Ir al contenido

IDEAS PRÁCTICAS · ASIMOV INGENIERÍA

Guía completa del elemento <picture> para imágenes adaptativas en HTML

Descubre cómo usar la etiqueta <picture> para ofrecer imágenes responsivas, optimizar el rendimiento y mejorar la experiencia de usuario en dispositivos modernos.

ASIMOV Ingeniería S. de R.L. de C.V., Emiliano Nava

Imagen ilustrativa · Amper / Unsplash.

Table of contents

No titles in the blog post

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.

Boceto de un sitio web en papel junto a una pluma naranja
Imagen ilustrativa · Compagnons / Unsplash.

Características principales del <picture>

  • Media Queries integradas: Permite servir diferentes archivos según el ancho, la resolución o la orientación del dispositivo.
  • Formato de imagen optimizado: Puedes ofrecer WebP, AVIF o JPEG‑XL a navegadores que los soporten y fallback a formatos tradicionales.
  • Control total del srcset y sizes: Cada <source> puede tener su propio srcset, facilitando variaciones de densidad de píxeles.
  • Accesibilidad: El <img> interno sigue siendo el elemento que recibe alt, loading y decoding.
  • Compatibilidad: Soportado en todos los navegadores modernos (Chrome, Edge, Firefox, Safari) y en versiones móviles a partir de 2014.

Comparativa con <img srcset>

Aspecto <picture> <img srcset>
Selección por media query ✔️ (usando <source media="...">) ❌ (solo por densidad o ancho)
Soporte de formatos alternativos ✔️ (WebP, AVIF, JPEG‑XL, etc.) ✔️ pero sin fallback automático
Sintaxis sencilla para casos simples 🛠️ (más verbose) ✅ (ideal para srcset básico)
Control granular de sizes ✔️ en cada <source> ✔️ pero único para toda la etiqueta
Compatibilidad con navegadores antiguos Graceful fallback a <img> También fallback a <img>

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.

Compartir

En esta página

No titles in the blog post