¿Qué es una imagen adaptable («responsive image»)?

Una «imagen adaptable» (o «responsive image» en inglés) es una imagen que se ajusta y optimiza automáticamente según las características del dispositivo del usuario, como el tamaño de la pantalla, la resolución (densidad de píxeles) y, a veces, la orientación o el formato de imagen soportado.

El objetivo principal es doble:

1. Mejorar el rendimiento: Evitar cargar imágenes innecesariamente grandes en dispositivos con pantallas pequeñas (como móviles), lo que ahorra ancho de banda y acelera la carga de la página.
2. Mejorar la calidad visual: Servir imágenes de mayor resolución para pantallas de alta densidad (como las pantallas Retina) para que se vean nítidas, o incluso mostrar una composición de imagen diferente (dirección de arte) según el espacio disponible.

HTML5 proporciona dos mecanismos principales para implementar imágenes adaptables:

1. El atributo srcset y sizes en la etiqueta <img>:

Este enfoque es ideal para «cambio de resolución», es decir, servir la misma imagen pero en diferentes tamaños o densidades.

• srcset: Define una lista de posibles fuentes de imagen y sus características. Puede usar:
  • Descriptores de ancho (ej. imagen-300w.jpg 300w, imagen-600w.jpg 600w): El navegador elige basándose en el tamaño de la imagen en el «viewport» y la resolución de la pantalla.
  • Descriptores de densidad de píxeles (ej. imagen-1x.jpg 1x, imagen-2x.jpg 2x): Para pantallas con diferentes densidades de píxeles.
• sizes: Informa al navegador sobre el tamaño que ocupará la imagen en la pantalla en diferentes condiciones de «viewport» (usando media queries). Esto ayuda al navegador a seleccionar la fuente más adecuada de srcset cuando se usan descriptores de ancho.

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva vestida de hada">
Lenguaje del código: PHP (php)

2. La etiqueta <picture>:

Esta etiqueta es más potente y se usa para «dirección de arte», donde quieres mostrar imágenes completamente diferentes o diferentes formatos de imagen (como WebP o AVIF con un «fallback» a JPG/PNG) según el contexto.

Contiene uno o más elementos <source> y un elemento <img> de respaldo. Cada <source> puede tener:

• media: Una media query para aplicar la fuente solo si se cumple la condición.
• srcset: Las fuentes de imagen para esa condición.
• type: El tipo MIME del formato de imagen (ej. image/webp).

El navegador elige el primer <source> que cumpla las condiciones y cuyo formato soporte.

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Elva sonriendo">
</picture>
Lenguaje del código: PHP (php)

Usar imágenes adaptables es crucial para ofrecer una buena experiencia de usuario en la web moderna, independientemente del dispositivo que se utilice.