# Media

Images, videos and sounds Feitio did not draw. Feitio gives the frame; the person gives the image.

## The role of media

### Images are content, not decoration

A photo gets in because it shows something the text cannot: a product, a place, a person, a result. Stock images "for atmosphere" stay out.

### Drawings at home; photos in facades

At home, visuals come from Feitio’s hand drawings, and photos appear only when they are the content itself. In outside facades, photography belongs to the client and can take the lead; Feitio only gives the frame: corners, ratio, caption.

## Images

Feitio’s frame: the usual uneven corners, no border, no shadow. The image sits on the paper, it does not float. Fixed ratio, three for everything: the page does not jump when the image loads, and a row stays aligned even with photos of different sizes.

![](/maid-avatar.png)

16:9, for highlights and video

![](/maid-avatar.png)

4:3, for content and attachments

![](/maid-avatar.png)

1:1, for thumbnails and grids

### A caption when context is needed

Who, where, when, where it came from. In the sans, small, right below the image.

### No filters

The image shows as it is. No extra saturation, no orange tint, no gradient on top.

Do

![](/maid-avatar.png)

Feitio corners, no shadow, the image as it is.

Don’t

![](/maid-avatar.png)

Blurred shadow, perfect round corner and boosted color: the image becomes an app card.

### Detail that matters is seen at full size

A product photo, a screenshot or a detailed diagram must be zoomable. The image itself links to the full file, opening in the same tab: looking and coming back is what the back button already does.

[![Ver a imagem em tamanho real / See the image at full size](/maid-avatar.png)](/maid-avatar.png)

Tap to see it at full size.

### At night, photos stay as they are

A photo is never darkened or inverted. Drawings and diagrams made in ink use the text color and switch with the theme on their own.

## Alt text

Every image has alt text (`alt`): what someone who cannot see the image needs to know about it, right there.

Image

Like this

Not like this

Product photo

Brown leather bag with a long strap and a gold clasp

`imagem_bolsa_01.jpg`

Chart

November backups: 29 done, 1 late on the 12th

Chart

Avatar next to a name

(empty: the name is already written next to it)

Profile photo of Ana

Decoration with no information

(empty, `alt=""`)

Decorative image

-   Describe the purpose, not the technique: no "image of" or "photo of" at the start, unless the type matters.
-   If the image repeats what the text next to it says, the `alt` stays empty, so it is not said twice.
-   Complex chart or diagram: the `alt` summarizes, and the numbers also go in a table or text.

## Video and audio

English captions · Transcript below · 2 min 14 s

-   **Nothing plays on its own.** Video and audio start when the person presses play. No autoplay, not even muted.
-   **Controls always visible:** play, pause, volume, time. The browser’s are fine.
-   **Captions and transcripts.** Video with speech has captions; audio has a transcript right below.
-   **Reduced motion applies here too:** background video and looping animation do not exist in Feitio.
-   **Show the duration before play:** the person decides whether they have time.

## Weight and loading

-   Images below the first screen load only when they get close (`loading="lazy"`); video does not download before play (`preload="none"`).
-   File size follows display size: no 4000-pixel photo in a thumbnail.
-   The fixed ratio reserves the space before the image arrives, and the page does not jump.
-   While loading, the plain raised surface shows. No blinking skeletons.