Imágenes responsivas: srcset, sizes y art direction

Las imágenes son el 40-60% del peso de una página típica: ninguna optimización de CSS compensa servir 2MB de foto a un celular. En el módulo 2 conociste las herramientas; hoy las dominas con la profundidad de producción — incluido el matiz que el 80% del gremio configura mal: sizes.

srcset elige el archivo; sizes le da el dato

Repaso express del módulo 2: srcset ofrece la imagen en varios anchos (400w, 800w...) y el navegador elige. Pero elige BIEN solo si sabe qué tan grande se VERÁ la imagen — y eso es sizes:

<img
src="img/nota-800.webp"
srcset="img/nota-400.webp 400w,
        img/nota-800.webp 800w,
        img/nota-1600.webp 1600w"
sizes="(width >= 1024px) 33vw,
       (width >= 768px) 50vw,
       100vw"
alt="Los jugadores celebran el gol en el estadio lleno"
width="800" height="450"
>

Ese sizes se lee: "en pantallas ≥1024px ocuparé un tercio (soy tarjeta en grid de 3); en tablet, la mitad; en móvil, todo el ancho". Con ese dato el navegador calcula los píxeles reales (33vw de 1200px ≈ 400px → descarga la de 400) ANTES de descargar el CSS siquiera.

¿Cómo verificar? DevTools → Network → recarga → la columna del archivo descargado. O pasa el mouse sobre el <img> en Elements: el tooltip muestra "current source". Depurar esto una vez vale más que releer la teoría diez veces.

Art direction: cuando escalar no basta

A veces el problema no es el TAMAÑO sino el ENCUADRE: la panorámica del estadio en desktop queda ilegible como miniatura móvil — ahí quieres el primer plano del jugador. Eso es art direction, y es el otro trabajo de <picture>:

<picture>
<!-- pantallas anchas: la panorámica 16:9 -->
<source media="(width >= 768px)"
        srcset="img/estadio-panoramica.webp">
<!-- móvil: recorte cuadrado del primer plano -->
<img src="img/jugador-cuadrado.webp"
     alt="El delantero celebra el gol"
     width="600" height="600">
</picture>

Ojo a la diferencia con el <picture> de formatos del módulo 2: aquí los <source> llevan media= (condición de pantalla) en vez de type= (formato). Y con media, el navegador OBEDECE tu media query al pie de la letra — tú decides el encuadre, él ya no opina. Ambos usos se combinan si hace falta.

El kit de rendimiento completo

<!-- Imágenes BAJO el pliegue: carga perezosa -->
<img src="img/nota.webp" alt="..."
   loading="lazy"
   decoding="async"
   width="800" height="450">

<!-- LA imagen del hero (arriba, la más importante): prioridad alta,
   JAMÁS lazy — es la que define el LCP (velocidad percibida) -->
<img src="img/hero.webp" alt="..." fetchpriority="high"
   width="1600" height="800">

• loading="lazy": el navegador descarga la imagen solo cuando se acerca al viewport. Para TODO lo que está bajo el pliegue.
• fetchpriority="high": para la imagen protagonista del primer pantallazo (una por página, típicamente el hero).
• width/height siempre (módulo 2): reservan el espacio y evitan saltos de layout — que además son métrica de Google (CLS).

Mini-reto

Toma la imagen principal de tu periódico y complétala de producción: srcset de 3 anchos (usa placehold.co con distintos tamaños), sizes real según tu layout, width/height y fetchpriority="high". A las secundarias: loading="lazy". Verifica en Network qué descarga cada viewport.

Qué sigue

Imágenes que pesan lo justo. La próxima lección hace fluido lo demás: clamp() para tipografía Y espaciados — la técnica que elimina la mitad de tus media queries restantes.