Curso HTML 12.3 Elemento picture para imágenes adaptativas

Elemento picture para imágenes adaptativas

El elemento picture sirve para ofrecer varias versiones de una misma imagen, adaptándose al entorno de visualización del usuario. Permite:

• Ofrecer distintos formatos (AVIF, WebP, JPEG).
• Definir diferentes resoluciones (1x, 2x, etc.).
• Aplicar art direction: imágenes distintas según tamaño de pantalla.
• Optimizar la carga y mejorar la experiencia.

Anatomía de <picture>

Uso de srcset y sizes

srcset lista archivos con sus densidades o anchos. sizes define el ancho de la imagen en diferentes condiciones de media.

<picture>
  <source 
    type='image/avif'
    srcset='img/portada-400.avif 400w,
            img/portada-800.avif 800w,
            img/portada-1200.avif 1200w'
    sizes='(max-width: 600px) 100vw, 50vw'
  >
  <source 
    type='image/webp'
    srcset='img/portada-400.webp 400w,
            img/portada-800.webp 800w,
            img/portada-1200.webp 1200w'
    sizes='(max-width: 600px) 100vw, 50vw'
  >
  <img
    src='img/portada-800.jpg'
    alt='Vista panorámica de montañas'
    loading='lazy'
    width='1200' height='800'
  >
</picture>
  

• El navegador elige el primer source compatible con formato y condiciones.
• Si no coincide, usa la etiqueta img de respaldo.
• loading='lazy' retrasa la carga de imágenes fuera de pantalla.

Art Direction: imágenes distintas según media queries

Podemos servir una composición diferente de la misma escena, por ejemplo, recortar enfoque en móvil.

<picture>
  <source
    media='(max-width: 600px)'
    srcset='img/banner-mobile.jpg'
    type='image/jpeg'
  >
  <source
    media='(min-width: 601px)'
    srcset='img/banner-desktop.jpg'
    type='image/jpeg'
  >
  <img
    src='img/banner-default.jpg'
    alt='Banner promocional'
    loading='lazy'
  >
</picture>
  

• media actúa como en CSS, el primer source cuyo media sea true se usa.
• Ideal para cambiar no solo resolución, sino composición y encuadre.

Detallando atributos

srcset

Lista de fuentes separadas por comas. Cada fuente puede indicar su ancho (w) o densidad (x).

sizes

Lista de pares media-condition / tamaño. El navegador calcula qué recurso elegir.

type

MIME type (image/avif, image/webp, etc.). Filtra rápidamente si el navegador soporta el formato.

media

Media query asociada. Ideal para art direction.

loading

lazy o eager. Sugiere al navegador cuándo cargar la imagen.

Buenas prácticas

• Generar variantes optimizadas mediante herramientas de build (Sharp, imagemin).
• Incluir al menos un source moderno (AVIF/WebP) y un img tradicional.
• Definir siempre width y height en el img de respaldo para evitar salto de contenido.
• Utilizar loading='lazy' para páginas con muchas imágenes.
• Ajustar sizes a tu diseño responsive para permitir decisiones óptimas.

Ejemplo completo con formatos y art direction

<picture>
  <!-- AVIF para navegadores compatibles -->
  <source 
    type='image/avif'
    srcset='
      images/hero-mobile.avif 600w,
      images/hero-desktop.avif 1200w
    '
    media='(max-width: 800px)'
  >

  <!-- WebP de respaldo -->
  <source 
    type='image/webp'
    srcset='
      images/hero-mobile.webp 600w,
      images/hero-desktop.webp 1200w
    '
    media='(max-width: 800px)'
  >

  <!-- JPEG fallback para todos los dispositivos -->
  <source 
    srcset='
      images/hero-mobile.jpg 600w,
      images/hero-desktop.jpg 1200w
    '
    sizes='(max-width: 800px) 100vw, 50vw'
  >

  <!-- Imagen de respaldo -->
  <img
    src='images/hero-default.jpg'
    alt='Persona contemplando paisaje al amanecer'
    loading='lazy'
    width='1200'
    height='800'
  >
</picture>
  

Resumen de flujo de elección

1. Comprueba el primer source cuyo media sea true.
2. De ese source, selecciona el formato soportado (type).
3. Según srcsety sizes, escoge la URL más adecuada.
4. Si no hay source válido, usa la etiqueta img.