# Mídia

Imagens, vídeos e sons que o Feitio não desenhou. O Feitio dá a moldura; quem dá a imagem é a pessoa.

## O papel da mídia

### A imagem é conteúdo, não enfeite

Uma foto entra porque mostra algo que o texto não mostra: um produto, um lugar, uma pessoa, um resultado. Imagem de banco "para dar clima" não entra.

### Na casa, desenho; nas fachadas, foto

Na casa, o visual vem dos desenhos à mão do Feitio, e foto só aparece quando é o próprio conteúdo. Nas fachadas de fora, a fotografia é do cliente e pode ser protagonista; o Feitio só dá a moldura: cantos, proporção, legenda.

## Imagem

Moldura do Feitio: os cantos irregulares de sempre, sem borda, sem sombra. A imagem fica no papel, não flutua. Proporção fixa, três para tudo: a página não pula quando a imagem carrega, e uma fileira fica alinhada mesmo com fotos de tamanhos diferentes.

![](/maid-avatar.png)

16:9, para destaque e vídeo

![](/maid-avatar.png)

4:3, para conteúdo e anexos

![](/maid-avatar.png)

1:1, para miniaturas e grades

### Legenda quando precisa de contexto

Quem, onde, quando, de onde veio. Na sans, miúda, logo abaixo da imagem.

### Nada de filtro

A imagem aparece como é. Sem saturação a mais, sem tingir de laranja, sem sobrepor gradiente.

Faça assim

![](/maid-avatar.png)

Cantos do Feitio, sem sombra, a imagem como é.

Não faça

![](/maid-avatar.png)

Sombra borrada, canto redondo perfeito e cor saturada: a imagem vira cartão de aplicativo.

### Detalhe que importa se vê em tamanho real

Uma foto de produto, um print ou um diagrama cheio de detalhe precisam poder ser ampliados. A própria imagem é um link para o arquivo inteiro, que abre na mesma aba: olhar e voltar é o que o botão voltar já faz.

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

Toque para ver em tamanho real.

### À noite, fotos ficam como são

Não se escurece nem se inverte uma foto. Desenhos e diagramas feitos em tinta usam a cor do texto e trocam com o tema sozinhos.

## Texto alternativo

Toda imagem tem um texto alternativo (`alt`): o que alguém que não vê a imagem precisa saber dela, ali, naquele lugar.

Imagem

Assim

Não assim

Foto de um produto

Bolsa de couro marrom, com alça longa e fecho dourado

`imagem_bolsa_01.jpg`

Gráfico

Backups de novembro: 29 concluídos, 1 atrasado no dia 12

Gráfico

Avatar ao lado do nome

(vazio: o nome já está escrito ao lado)

Foto de perfil de Ana

Enfeite sem informação

(vazio, `alt=""`)

Imagem decorativa

-   Descreva a função, não a técnica: nada de "imagem de" ou "foto de" no começo, a não ser que o tipo importe.
-   Se a imagem repete o que o texto ao lado já diz, o `alt` fica vazio, para não dizer duas vezes.
-   Gráfico ou diagrama complexo: o `alt` resume, e os números ficam também numa tabela ou num texto.

## Vídeo e áudio

Legendas em português · Transcrição abaixo · 2 min 14 s

-   **Nada toca sozinho.** Vídeo e áudio começam quando a pessoa aperta play. Sem reprodução automática, nem sem som.
-   **Controles sempre à vista:** tocar, pausar, volume, tempo. Os do navegador servem.
-   **Legenda e transcrição.** Vídeo com fala tem legenda; áudio tem transcrição logo abaixo.
-   **Movimento reduzido vale aqui também:** vídeo de fundo e animação em loop não existem no Feitio.
-   **Mostre a duração antes do play:** a pessoa decide se tem tempo.

## Peso e carregamento

-   Imagem fora da primeira tela carrega só quando chega perto (`loading="lazy"`); vídeo não baixa antes do play (`preload="none"`).
-   O tamanho do arquivo segue o tamanho em que aparece: nada de foto de 4000 pixels numa miniatura.
-   A proporção fixa reserva o espaço antes de a imagem chegar, e a página não pula.
-   Enquanto carrega, aparece a superfície alta, lisa. Nada de esqueleto piscando.