# Medios

Imágenes, videos y sonidos que Feitio no dibujó. Feitio da el marco; la persona da la imagen.

## El rol de los medios

### Las imágenes son contenido, no decoración

Una foto entra porque muestra algo que el texto no puede: un producto, un lugar, una persona, un resultado. Las imágenes de stock "para atmósfera" se quedan fuera.

### Dibujos en casa; fotos en fachadas

En casa, los visuales provienen de los dibujos a mano de Feitio y las fotos solo aparecen cuando son el contenido mismo. En fachadas exteriores, la fotografía pertenece al cliente y puede tomar el liderazgo; Feitio solo da el marco: esquinas, proporción, subtítulo.

## Imágenes

El marco de Feitio: las esquinas desiguales habituales, sin borde, sin sombra. La imagen está sobre el papel, no flota. Proporción fija, tres para todo: la página no salta cuando carga la imagen y una fila permanece alineada incluso con fotos de diferentes tamaños.

![](/maid-avatar.png)

16:9, para resúmenes y video

![](/maid-avatar.png)

4:3, para contenido y adjuntos

![](/maid-avatar.png)

1:1, para miniaturas y cuadrículas

### Un subtítulo cuando se necesita contexto

Quién, dónde, cuándo, de dónde vino. En la fuente sin serifa, pequeña, justo debajo de la imagen.

### Sin filtros

La imagen se muestra tal cual es. Sin saturación extra, sin tono naranja, sin degradado arriba.

Do

![](/maid-avatar.png)

Esquinas de Feitio, sin sombra, la imagen tal cual es.

Don’t

![](/maid-avatar.png)

Sombra desenfocada, esquina redondeada perfecta y color potenciado: la imagen se convierte en una tarjeta de aplicación.

### El detalle que importa se ve a tamaño completo

Una foto de producto, una captura de pantalla o un diagrama detallado deben ser ampliables. La imagen en sí misma enlaza al archivo completo, abriéndose en la misma pestaña: mirar y volver es lo que ya hace el botón de atrás.

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

Toca para verlo a tamaño completo.

### A la noche, las fotos permanecen como están

Una foto nunca se oscurece ni se invierte. Los dibujos y diagramas hechos con tinta usan el color del texto e intercambian con el tema por sí mismos.

## Texto alternativo

Cada imagen tiene texto alternativo (`alt`): lo que alguien que no puede ver la imagen necesita saber sobre ella, ahí mismo.

Imagen

Así

No así

Foto de producto

Bolso de cuero marrón con correa larga y hebilla dorada

`imagem_bolsa_01.jpg`

Gráfico

Reservas de noviembre: 29 realizadas, 1 retrasada el 12

Gráfico

Autor junto a un nombre

(vacío: el nombre ya está escrito al lado)

Foto de perfil de Ana

Decoración sin información

(vacío, `alt=""`)

Imagen decorativa

-   Describa el propósito, no la técnica: no use "imagen de" o "foto de" al inicio, a menos que el tipo sea relevante.
-   Si la imagen repite lo que dice el texto al lado, el `alt` permanece vacío para no repetirse.
-   Gráfico complejo o diagrama: el `alt` resume y los números también van en una tabla o texto.

## Vídeo y audio

Subtítulos en inglés · Transcripción abajo · 2 min 14 s

-   **Nada se reproduce solo.** El video y el audio empiezan cuando la persona presiona play. Sin autoplay, ni siquiera con sonido apagado.
-   **Los controles siempre visibles:** play, pause, volumen, tiempo. Los del navegador están bien.
-   **Subtítulos y transcripciones.** El video con habla tiene subtítulos; el audio tiene una transcripción justo debajo.
-   **La reducción de movimiento aplica aquí también:** el video de fondo y la animación en bucle no existen en Feitio.
-   **Muestra la duración antes de reproducir:** la persona decide si tiene tiempo.

## Peso y carga

-   Las imágenes debajo de la primera pantalla solo se cargan cuando están cerca (`loading="lazy"`); el video no descarga antes de reproducirse (`preload="none"`).
-   El tamaño del archivo sigue el tamaño de visualización: no hay foto de 4000 píxeles en un miniatura.
-   La proporción fija reserva el espacio antes de que llegue la imagen, y la página no salta.
-   Mientras carga, se muestra la superficie plana elevada. No hay esqueletos parpadeantes.