La Etiqueta PICTURE

Permite ofrecer imágenes responsivas en tu sitio web, adaptando la imagen mostrada al tamaño de pantalla, resolución o formato compatible del navegador.

La etiqueta <picture> permite ofrecer imágenes responsivas en tu sitio web, adaptando la imagen mostrada al tamaño de pantalla, resolución o formato compatible del navegador. Es ideal para optimizar rendimiento y experiencia de usuario.

¿Por qué usar <picture>?

  • Optimización de recursos:
    Carga imágenes específicas para cada dispositivo (ej: móvil, escritorio).

  • Soporte para formatos modernos:
    Prioriza formatos como WebP o AVIF, con fallback a JPEG/PNG.

  • Art direction:
    Muestra versiones recortadas o ajustadas de una imagen según el contexto.

Sintaxis básica

<picture>
  <!-- Fuentes alternativas (se evalúan en orden) -->
  <source 
    media="(condición)" 
    srcset="imagen.jpg" 
    type="formato-MIME"
  >
  <!-- Imagen de respaldo (obligatoria) -->
  <img src="imagen-default.jpg" alt="Descripción">
</picture>

Atributos clave:

  • media: Media query (ej: (min-width: 768px)).

  • srcset: Ruta de la imagen (puede incluir múltiples resoluciones).

  • type: Formato de imagen (ej: image/webp).

  • sizes: Tamaños de visualización (opcional).

Ejemplos prácticos

Adaptar imágenes por tamaño de pantalla

<picture>
  <!-- Pantallas grandes: imagen de 1200px -->
  <source 
    media="(min-width: 1200px)" 
    srcset="paisaje-grande.jpg"
  >
  <!-- Pantallas medianas: imagen de 800px -->
  <source 
    media="(min-width: 768px)" 
    srcset="paisaje-mediano.jpg"
  >
  <!-- Móviles: imagen pequeña (default) -->
  <img 
    src="paisaje-pequeño.jpg" 
    alt="Paisaje natural"
  >
</picture>

Priorizar formatos modernos (WebP)

<picture>
  <!-- Usar WebP si el navegador lo soporta -->
  <source 
    srcset="imagen.webp" 
    type="image/webp"
  >
  <!-- Fallback a JPEG -->
  <img 
    src="imagen.jpg" 
    alt="Texto alternativo"
  >
</picture>

Art direction: cambiar imagen en móvil

<picture>
  <!-- Escritorio: imagen horizontal -->
  <source 
    media="(min-width: 768px)" 
    srcset="banner-horizontal.jpg"
  >
  <!-- Móvil: imagen vertical recortada -->
  <img 
    src="banner-vertical.jpg" 
    alt="Promoción especial"
  >
</picture>

Atributo srcset con múltiples resoluciones

Ofrece varias versiones de una imagen para pantallas de alta densidad (ej: Retina):

<picture>
  <source 
    srcset="logo-2x.webp 2x, logo-1x.webp 1x" 
    type="image/webp"
  >
  <img 
    src="logo-1x.png" 
    srcset="logo-2x.png 2x" 
    alt="Logo de la empresa"
  >
</picture>

  • 1x: Pantallas estándar.

  • 2x: Pantallas de alta densidad (ej: Retina).

Beneficios clave

  • Rendimiento:
    Evita cargar imágenes grandes en dispositivos pequeños.

  • Calidad visual:
    Aprovecha pantallas HD con imágenes de alta resolución.

  • Compatibilidad:
    Soporta formatos antiguos y modernos.

Errores comunes

  1. Olvidar la etiqueta <img>:
    Es obligatoria como fallback y para accesibilidad.

  2. Usar media queries incorrectas:
    Asegúrate de que las condiciones reflejen los breakpoints reales de tu diseño.

  3. No optimizar las imágenes:
    Comprime las imágenes para reducir peso (usa herramientas como Squoosh o ImageOptim).

Mejores prácticas

Ordena las fuentes de mayor a menor prioridad: El navegador usa la primera fuente que coincida con las condiciones.

Combina con <picture> y srcset:

<picture>
  <source 
    media="(min-width: 768px)" 
    srcset="imagen-grande.webp 1200w, imagen-mediana.webp 800w"
    sizes="(min-width: 1200px) 1200px, 800px"
    type="image/webp"
  >
  <img 
    src="imagen-movil.jpg" 
    alt="Imagen responsive"
  >
</picture>

Prueba en múltiples dispositivos: Verifica que las imágenes se carguen correctamente en distintos tamaños.

Conclusión

La etiqueta <picture> es esencial para crear sitios web rápidos y visualmente optimizados. Úsala para:

  • Mejorar la velocidad de carga en móviles.

  • Aprovechar formatos modernos como WebP/AVIF.

  • Ofrecer imágenes adaptadas al contexto (art direction).

Ejemplo final:

<picture>
  <!-- WebP para navegadores modernos -->
  <source 
    srcset="hero-image.webp" 
    type="image/webp"
  >
  <!-- JPEG como respaldo -->
  <img 
    src="hero-image.jpg" 
    alt="Bienvenida al sitio web"
    loading="lazy"
  >
</picture>

¡Implementa <picture> y lleva tus imágenes al siguiente nivel!