El elemento <picture> y las imágenes adaptativas

En la era de los dispositivos móviles y pantallas de alta densidad, servir la imagen adecuada a cada usuario es crucial para la velocidad de carga, el SEO y la accesibilidad. El elemento <picture> permite seleccionar dinámicamente entre varios recursos de imagen basándose en media queries, formatos y otras condiciones.

Ejemplo práctico 1: Imágenes responsivas por ancho de pantalla

<picture>
  <source media="(min-width: 1200px)" srcset="hero-large.avif" type="image/avif">
  <source media="(min-width: 1200px)" srcset="hero-large.webp" type="image/webp">
  <source media="(min-width: 768px)" srcset="hero-medium.avif" type="image/avif">
  <source media="(min-width: 768px)" srcset="hero-medium.webp" type="image/webp">
  <img src="hero-fallback.jpg" alt="Paisaje de montaña al amanecer" loading="lazy" decoding="async" class="img-fluid">
</picture>

En pantallas ≥1200 px se servirán versiones AVIF o WebP de alta resolución; entre 768 px y 1199 px se usará la versión intermedia; y para dispositivos menores o navegadores sin soporte, se mostrará el .jpg de fallback.

Ejemplo práctico 2: Densidad de píxeles (Retina) y orientación

<picture>
  <source media="(orientation: portrait) and (min-resolution: 2dppx)" srcset="portrait@2x.webp 2x, portrait@1x.webp 1x" type="image/webp">
  <source media="(orientation: landscape) and (min-resolution: 2dppx)" srcset="landscape@2x.avif 2x, landscape@1x.avif 1x" type="image/avif">
  <img src="default.jpg" alt="Ejemplo de imagen adaptable" loading="lazy" class="img-fluid">
</picture>

Este caso combina orientación y densidad de píxeles para servir la variante adecuada en dispositivos Retina y en modo retrato o paisaje.

Buenas prácticas y optimización

• Usa loading="lazy" en el <img> interno para diferir la carga de imágenes fuera del viewport.
• Ordena los <source> del más específico al más genérico. El navegador selecciona la primera coincidencia.
• Prefiere formatos modernos (AVIF, WebP, JPEG‑XL) y proporciona type para que el navegador descarte rápidamente los no soportados.
• Genera los archivos con herramientas de línea de comandos:

  cavif -q 80 hero.jpg -o hero.avif
  cwebp -q 80 hero.jpg -o hero.webp
  magick hero.jpg -resize 1920x1080 hero-large.jpg

• Incluye atributos width y height en el <img> para evitar el reflow al cargar la imagen.
• Comprueba la accesibilidad: siempre provee un alt descriptivo y evita texto redundante.

Depuración y testing

Para asegurar que tu <picture> funciona en todos los navegadores, sigue estos pasos:

1. Abre la página en Chrome DevTools → pestaña Network y habilita Disable cache. Verifica que se solicite solo la variante correspondiente al viewport.
2. Usa la extensión Responsive Design Mode de Firefox o la herramienta de dispositivos de Chrome para simular diferentes anchos y densidades.
3. Ejecuta curl -I https://example.com/hero.avif para confirmar que el servidor sirve el archivo con encabezado Content-Type: image/avif.
4. Valida el HTML con W3C validator para detectar errores de sintaxis.

Rendimiento y SEO

Google valora la velocidad de carga y la correcta utilización de imágenes adaptativas. Algunas recomendaciones específicas:

• Utiliza Core Web Vitals (LCP) < 2.5 s; las imágenes son una de las causas más comunes de retrasos.
• Incluye srcset y sizes con valores reales (no solo “100vw”) para que el navegador elija la versión óptima.
• Comprueba el PageSpeed Insights y sigue los consejos de “Serve images in next‑gen formats”.
• En el head agrega <link rel="preload" as="image" href="hero-large.avif"> para recursos críticos.

Conclusión

El elemento <picture> es la herramienta más flexible para ofrecer imágenes adaptativas, permitiendo combinar media queries, formatos de última generación y control granular de densidad. Adoptarlo mejora la experiencia del usuario, reduce el consumo de ancho de banda y aporta valor SEO. Integra los ejemplos y buenas prácticas mostrados en tus proyectos y mantente al día con los formatos emergentes como AVIF y JPEG‑XL para seguir liderando en rendimiento web.