Imágenes responsive con srcset y sizes

Desafíos de imágenes en diseños responsive

Las imágenes representan uno de los mayores retos al crear sitios web adaptables a diferentes dispositivos. Cuando trabajamos con diseños responsive, nos enfrentamos a varios problemas específicos relacionados con el manejo de imágenes que pueden afectar tanto al rendimiento como a la experiencia del usuario.

Problemas de rendimiento

El tamaño de archivo es quizás el desafío más evidente. Una imagen optimizada para pantallas de alta resolución puede ser innecesariamente grande para dispositivos móviles, lo que provoca:

• Tiempos de carga más lentos: Las imágenes grandes consumen ancho de banda y aumentan el tiempo de carga de la página.
• Mayor consumo de datos: Especialmente problemático para usuarios con planes de datos limitados.
• Desperdicio de recursos: Enviar imágenes de 2500px de ancho a un dispositivo que solo puede mostrar 320px es ineficiente.

<!-- Problema: Una única imagen de alta resolución para todos los dispositivos -->
<img src="hero-image-large-2500px.jpg" alt="Imagen de portada">

Este enfoque tradicional obliga a todos los dispositivos a descargar la misma imagen grande, independientemente de sus capacidades de visualización.

Problemas de visualización

Adaptar las imágenes a diferentes tamaños de pantalla presenta desafíos visuales importantes:

• Relación de aspecto: Mantener la proporción adecuada en diferentes dispositivos puede ser complicado.
• Puntos focales: Una imagen que funciona bien en formato horizontal puede perder su punto focal cuando se visualiza en un dispositivo vertical.
• Densidad de píxeles: Las pantallas modernas tienen diferentes densidades de píxeles (1x, 2x, 3x), lo que afecta a la nitidez de las imágenes.

<!-- Problema: La imagen se estira o comprime para adaptarse -->
<img src="landscape-photo.jpg" alt="Paisaje" style="width: 100%;">

Este código hace que la imagen se adapte al ancho del contenedor, pero puede distorsionarla o hacer que se vea pixelada en ciertos dispositivos.

Problemas de art direction

El art direction (dirección artística) se refiere a la necesidad de mostrar diferentes versiones de una imagen según el contexto de visualización:

• En una pantalla grande, podríamos querer mostrar una imagen panorámica completa.
• En un móvil, podríamos necesitar una versión recortada que destaque el sujeto principal.

<!-- Problema: No podemos mostrar diferentes versiones según el dispositivo -->
<img src="team-photo-wide.jpg" alt="Nuestro equipo">

Con este enfoque tradicional, no podemos cambiar la composición de la imagen según el dispositivo, solo su tamaño.

Problemas de resolución y densidad de píxeles

Las pantallas de alta densidad (como las Retina de Apple) necesitan imágenes con más píxeles para verse nítidas:

• Una imagen de 300×200 píxeles se verá borrosa en una pantalla 2x, que necesitaría una imagen de 600×400 píxeles.
• Pero enviar imágenes de alta resolución a todos los dispositivos penaliza a aquellos con pantallas estándar.

<!-- Problema: O se ve borroso en pantallas de alta densidad o es demasiado pesado para pantallas normales -->
<img src="logo.png" alt="Logo de la empresa" width="200" height="100">

Problemas de implementación técnica

Finalmente, nos enfrentamos a desafíos de implementación:

• Compatibilidad entre navegadores: No todos los navegadores soportan las mismas soluciones.
• Complejidad de código: Las soluciones avanzadas requieren más código y mantenimiento.
• Generación de recursos: Necesitamos crear múltiples versiones de cada imagen.

<!-- Problema: Código más complejo y necesidad de múltiples archivos -->
<!-- Esto es solo un ejemplo básico de lo que veremos en las siguientes secciones -->
<img src="small.jpg" 
     srcset="medium.jpg 1000w, large.jpg 2000w" 
     alt="Ejemplo de imagen responsive">

Estos desafíos han llevado al desarrollo de soluciones específicas en HTML5 como los atributos srcset y sizes, y el elemento <picture>, que exploraremos en las siguientes secciones. Estas herramientas nos permiten ofrecer la imagen correcta para cada dispositivo, mejorando tanto el rendimiento como la experiencia visual.

Impacto en el Core Web Vitals

Los problemas con imágenes no optimizadas afectan directamente a las métricas de rendimiento que Google utiliza para evaluar sitios web:

• Largest Contentful Paint (LCP): Las imágenes grandes suelen ser el elemento más grande que se carga en una página, afectando directamente esta métrica.
• Cumulative Layout Shift (CLS): Las imágenes sin dimensiones especificadas pueden causar saltos en el diseño cuando finalmente se cargan.

<!-- Problema: Causa CLS porque el navegador no conoce las dimensiones antes de cargar -->
<img src="banner.jpg" alt="Banner promocional">

<!-- Mejor: Incluye dimensiones para reservar espacio -->
<img src="banner.jpg" alt="Banner promocional" width="800" height="400">

Especificar las dimensiones ayuda al navegador a reservar espacio para la imagen antes de que se cargue, reduciendo los saltos de diseño.

En las próximas secciones, veremos cómo HTML5 proporciona herramientas específicas para abordar estos desafíos, permitiéndonos crear experiencias visuales optimizadas para todo tipo de dispositivos.

Atributo srcset para múltiples resoluciones

El atributo srcset es una solución elegante que HTML5 introdujo para resolver el problema de servir imágenes de diferentes resoluciones según las características del dispositivo. Este atributo permite especificar múltiples versiones de una misma imagen, dejando que el navegador elija la más adecuada.

La sintaxis básica del atributo srcset consiste en una lista de fuentes de imagen separadas por comas, donde cada fuente incluye la URL de la imagen y un descriptor que indica su tamaño o densidad de píxeles:

<img src="imagen-pequeña.jpg"
     srcset="imagen-pequeña.jpg 320w,
             imagen-mediana.jpg 800w,
             imagen-grande.jpg 1200w"
     alt="Descripción de la imagen">

En este ejemplo, proporcionamos tres versiones de la misma imagen con diferentes anchos: 320px, 800px y 1200px. El navegador evaluará estas opciones y seleccionará la más apropiada según las condiciones del dispositivo.

Descriptores de ancho (w)

El descriptor w indica el ancho intrínseco de la imagen en píxeles. Esto permite al navegador calcular qué imagen es la más adecuada basándose en:

• El tamaño de la ventana del navegador
• La densidad de píxeles de la pantalla
• Otros factores como la configuración de zoom

<img src="fallback.jpg"
     srcset="small.jpg 500w,
             medium.jpg 1000w,
             large.jpg 1500w"
     alt="Imagen responsive con descriptores de ancho">

En este caso, el navegador podría elegir:

• small.jpg para dispositivos móviles o ventanas pequeñas
• medium.jpg para tablets o ventanas medianas
• large.jpg para pantallas de escritorio

Descriptores de densidad (x)

El descriptor x se utiliza para especificar la densidad de píxeles para la que está optimizada cada imagen. Esto es especialmente útil para dispositivos con pantallas de alta resolución como las Retina:

<img src="imagen-1x.jpg"
     srcset="imagen-1x.jpg 1x,
             imagen-2x.jpg 2x,
             imagen-3x.jpg 3x"
     alt="Imagen optimizada para diferentes densidades de pantalla">

En este ejemplo:

• imagen-1x.jpg se cargará en pantallas estándar (1x)
• imagen-2x.jpg se cargará en pantallas de doble densidad (como iPhone Retina)
• imagen-3x.jpg se cargará en pantallas de triple densidad (como algunos dispositivos de gama alta)

Combinando srcset con el atributo src

El atributo src funciona como respaldo para navegadores que no soportan srcset. Siempre debemos incluirlo:

<img src="imagen-fallback.jpg"
     srcset="imagen-pequeña.jpg 320w,
             imagen-mediana.jpg 800w,
             imagen-grande.jpg 1200w"
     alt="Ejemplo de imagen responsive">

Los navegadores modernos evaluarán el srcset y elegirán la imagen apropiada, mientras que los navegadores antiguos simplemente cargarán la imagen especificada en src.

Ejemplo práctico: Optimización de una imagen de producto

Veamos un ejemplo real de una imagen de producto en una tienda online:

<img src="product-800x600.jpg"
     srcset="product-400x300.jpg 400w,
             product-800x600.jpg 800w,
             product-1200x900.jpg 1200w,
             product-1600x1200.jpg 1600w"
     alt="Zapatillas deportivas ultraligeras - modelo XC290">

Este código permite:

• Cargar imágenes más pequeñas en dispositivos móviles (ahorrando datos)
• Mostrar imágenes de mayor calidad en pantallas grandes
• Adaptarse a diferentes densidades de píxeles

Consideraciones importantes

Al implementar srcset, debemos tener en cuenta algunas consideraciones:

• Mismo contenido visual: Todas las imágenes en srcset deben mostrar el mismo contenido, solo a diferentes resoluciones. Para cambios en la composición o recorte, necesitaremos el elemento <picture> (que veremos en otra sección).

• Generación de imágenes: Necesitaremos crear múltiples versiones de cada imagen. Herramientas como ImageMagick, Sharp o servicios como Cloudinary pueden automatizar este proceso.

• Formato de archivo: Podemos usar el mismo formato para todas las versiones o considerar formatos modernos como WebP para versiones de mayor resolución:

<img src="photo.jpg"
     srcset="photo-400.jpg 400w,
             photo-800.jpg 800w,
             photo-1200.webp 1200w"
     alt="Fotografía de paisaje">

• Rendimiento: Aunque especifiquemos múltiples imágenes, el navegador descargará solo una, lo que mejora significativamente el rendimiento.

Cómo el navegador elige la imagen

El proceso de selección que realiza el navegador es bastante sofisticado:

1. Determina el ancho efectivo de la imagen en la página
2. Considera la densidad de píxeles de la pantalla
3. Puede tener en cuenta la conexión de red del usuario
4. Selecciona la imagen que mejor se adapte a estas condiciones

Por ejemplo, en una pantalla 2x con un ancho de imagen de 400px, el navegador buscará una imagen que proporcione aproximadamente 800px de resolución efectiva (400px × 2).

Ejemplo con imágenes de cabecera

Las imágenes de cabecera suelen ser elementos visuales importantes que se benefician enormemente de srcset:

<img src="header-fallback.jpg"
     srcset="header-mobile.jpg 640w,
             header-tablet.jpg 1024w,
             header-desktop.jpg 1920w,
             header-large.jpg 2560w"
     alt="Cabecera de nuestra conferencia anual de tecnología">

Este enfoque garantiza que los usuarios móviles no descarguen innecesariamente una imagen de 2560px cuando solo necesitan una versión mucho más pequeña.

Compatibilidad con navegadores

El soporte para srcset es excelente en navegadores modernos. Según Can I Use, tiene un soporte global superior al 95%. Para navegadores antiguos, el atributo src proporciona una alternativa funcional.

<!-- Los navegadores modernos usarán srcset, los antiguos usarán src -->
<img src="imagen-base.jpg"
     srcset="imagen-pequeña.jpg 400w,
             imagen-mediana.jpg 800w,
             imagen-grande.jpg 1600w"
     alt="Imagen con soporte para navegadores antiguos y modernos">

El atributo srcset representa un gran avance en la optimización de imágenes para la web responsive, permitiéndonos servir la imagen correcta para cada dispositivo sin necesidad de JavaScript o soluciones del lado del servidor. Combinado con el atributo sizes (que veremos en la siguiente sección), proporciona un control aún más preciso sobre cómo se cargan las imágenes en diferentes contextos.

Atributo sizes y viewport width

El atributo sizes complementa perfectamente a srcset, proporcionando información crucial al navegador sobre cómo se mostrará la imagen en diferentes tamaños de pantalla. Mientras que srcset indica qué archivos de imagen están disponibles, sizes comunica cuánto espacio ocupará la imagen en la página según el viewport del dispositivo.

La sintaxis básica de sizes consiste en una lista de condiciones de medios y valores de tamaño:

<img src="imagen-fallback.jpg"
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     sizes="(max-width: 600px) 100vw, 
            (max-width: 1200px) 50vw,
            33vw"
     alt="Ejemplo de imagen con sizes">

En este ejemplo, estamos indicando al navegador que:

• En pantallas de hasta 600px de ancho, la imagen ocupará el 100% del viewport width (100vw)
• En pantallas entre 601px y 1200px, la imagen ocupará el 50% del viewport width (50vw)
• En pantallas más grandes de 1200px, la imagen ocupará un tercio del viewport width (33vw)

Cómo funciona sizes internamente

Cuando el navegador encuentra una imagen con los atributos srcset y sizes, realiza un proceso de selección inteligente:

1. Evalúa las condiciones de medios en sizes para determinar qué valor de tamaño aplicar
2. Calcula el tamaño efectivo de la imagen en píxeles (basado en el valor de sizes)
3. Considera la densidad de píxeles de la pantalla
4. Selecciona la imagen de srcset que mejor se adapte a estas condiciones

Este proceso ocurre antes de que se descargue cualquier imagen, lo que permite una optimización eficiente de recursos.

Unidades en el atributo sizes

Aunque podemos usar diferentes unidades en sizes, las más comunes son:

• vw (viewport width): Porcentaje del ancho de la ventana del navegador
• px (píxeles): Valores fijos en píxeles
• em/rem: Unidades relativas al tamaño de fuente

<img src="imagen.jpg"
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     sizes="(max-width: 600px) calc(100vw - 2rem), 
            (max-width: 1200px) 500px,
            800px"
     alt="Imagen con diferentes unidades en sizes">

En este ejemplo, usamos:

• Una expresión calc() para restar márgenes en pantallas pequeñas
• Valores fijos en píxeles para pantallas medianas y grandes

Ejemplos prácticos de sizes

Imagen a pantalla completa en móviles, más pequeña en escritorio

<img src="hero.jpg"
     srcset="hero-small.jpg 600w, 
             hero-medium.jpg 1200w, 
             hero-large.jpg 2000w"
     sizes="(max-width: 768px) 100vw, 
            (max-width: 1200px) 80vw, 
            1000px"
     alt="Imagen de cabecera responsive">

Este código crea una experiencia donde:

• En móviles (hasta 768px), la imagen ocupa todo el ancho
• En tablets (hasta 1200px), ocupa el 80% del ancho
• En escritorio, tiene un ancho fijo de 1000px

Imagen en una cuadrícula de productos

<img src="product.jpg"
     srcset="product-small.jpg 300w, 
             product-medium.jpg 600w, 
             product-large.jpg 900w"
     sizes="(max-width: 600px) 48vw, 
            (max-width: 1024px) 30vw, 
            250px"
     alt="Producto en cuadrícula responsive">

Este ejemplo es ideal para una cuadrícula de productos donde:

• En móviles pequeños, cada producto ocupa casi la mitad del ancho (48vw)
• En tablets, ocupa aproximadamente un tercio (30vw)
• En escritorio, tiene un tamaño fijo de 250px

Valor por defecto de sizes

Si omitimos el atributo sizes, el navegador asume un valor predeterminado de 100vw:

<img src="imagen.jpg"
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     alt="Imagen sin atributo sizes">

En este caso, el navegador asumirá que la imagen ocupará el 100% del ancho de la ventana, lo que puede llevar a cargar imágenes más grandes de lo necesario si la imagen realmente ocupa solo una parte de la pantalla.

Uso de calc() para ajustes precisos

La función calc() es especialmente útil en sizes para realizar cálculos precisos:

<img src="sidebar-image.jpg"
     srcset="sidebar-small.jpg 400w, 
             sidebar-medium.jpg 700w, 
             sidebar-large.jpg 1000w"
     sizes="(max-width: 768px) calc(100vw - 40px), 
            (max-width: 1200px) calc(30vw - 40px), 
            300px"
     alt="Imagen de barra lateral con márgenes">

En este ejemplo, restamos 40px para considerar los márgenes o padding que rodean la imagen.

Combinando srcset y sizes para una optimización completa

El verdadero poder de estas herramientas se aprecia cuando se combinan:

<img src="photo.jpg"
     srcset="photo-400.jpg 400w,
             photo-800.jpg 800w,
             photo-1600.jpg 1600w,
             photo-2400.jpg 2400w"
     sizes="(max-width: 480px) 100vw,
            (max-width: 900px) 50vw,
            33vw"
     alt="Fotografía optimizada para todos los dispositivos">

Con este código:

1. El navegador determina primero el tamaño que tendrá la imagen según sizes
2. Luego selecciona el archivo más apropiado de srcset
3. Por ejemplo, en un móvil con pantalla 2x y viewport de 375px:

• La imagen ocupará 100vw = 375px
• Con factor 2x, necesita aproximadamente 750px de resolución
• El navegador probablemente elegirá photo-800.jpg

Consideraciones de rendimiento

El uso adecuado de sizes tiene un impacto significativo en el rendimiento:

• Valores precisos: Cuanto más preciso sea el valor de sizes, mejor será la selección de imágenes
• Evitar 100vw por defecto: Si tu imagen no ocupa todo el ancho, especifica sizes para evitar descargas innecesariamente grandes
• Pruebas en dispositivos reales: Verifica que tus imágenes se carguen correctamente en diferentes dispositivos

Ejemplo completo con layout responsive

Veamos un ejemplo completo de una imagen en un artículo de blog:

<article class="post">
  <img src="article-image.jpg"
       srcset="article-400.jpg 400w,
               article-800.jpg 800w,
               article-1200.jpg 1200w"
       sizes="(max-width: 768px) 100vw,
              (max-width: 1200px) 75vw,
              50vw"
       alt="Imagen principal del artículo">
  <h1>Título del artículo</h1>
  <p>Contenido del artículo...</p>
</article>

Este código se adapta a diferentes layouts:

• En móviles, la imagen ocupa todo el ancho
• En tablets, ocupa el 75% del ancho
• En escritorio, ocupa la mitad del ancho

Compatibilidad con navegadores

El soporte para el atributo sizes es excelente en navegadores modernos, con una compatibilidad similar a srcset. Para navegadores que no lo soportan, la imagen especificada en el atributo src funcionará como respaldo.

<!-- Navegadores modernos usarán srcset+sizes, los antiguos usarán src -->
<img src="imagen-base.jpg"
     srcset="imagen-pequeña.jpg 400w,
             imagen-mediana.jpg 800w,
             imagen-grande.jpg 1600w"
     sizes="(max-width: 600px) 100vw,
            (max-width: 1200px) 50vw,
            800px"
     alt="Imagen con soporte para todos los navegadores">

Errores comunes al usar sizes

Algunos errores frecuentes que debemos evitar:

• No especificar sizes cuando la imagen no ocupa todo el ancho: Esto puede llevar a cargar imágenes innecesariamente grandes
• Valores imprecisos: Si indicamos sizes incorrectos, el navegador podría seleccionar una imagen subóptima
• Olvidar el valor por defecto: Siempre incluye un valor final sin condición de medios para cubrir todos los casos

<!-- Incorrecto: Falta el valor por defecto -->
<img srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
     sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw"
     alt="Imagen con sizes incompleto">

<!-- Correcto: Incluye valor por defecto -->
<img srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
     sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
     alt="Imagen con sizes completo">

El atributo sizes es una herramienta fundamental para el diseño web responsive, permitiendo que las imágenes no solo se adapten visualmente a diferentes tamaños de pantalla, sino que también se optimicen en términos de recursos descargados. Cuando se combina con srcset, proporciona una solución completa para servir imágenes optimizadas en la web moderna.

Elemento picture para art direction

El elemento picture representa una solución avanzada para el manejo de imágenes responsive que va más allá de simplemente ajustar resoluciones. Mientras que srcset y sizes se enfocan en proporcionar la misma imagen en diferentes tamaños, picture nos permite implementar art direction - la capacidad de mostrar imágenes completamente diferentes según el contexto de visualización.

Art direction significa adaptar no solo el tamaño sino también la composición, el encuadre o incluso el contenido de una imagen para diferentes dispositivos y tamaños de pantalla. Esto resulta fundamental cuando el simple escalado no es suficiente para transmitir el mensaje visual adecuadamente.

Estructura básica del elemento picture

El elemento picture funciona como un contenedor que alberga múltiples fuentes de imagen y un elemento img que actúa como respaldo:

<picture>
  <source media="(max-width: 600px)" srcset="mobile-image.jpg">
  <source media="(max-width: 1200px)" srcset="tablet-image.jpg">
  <img src="desktop-image.jpg" alt="Descripción de la imagen">
</picture>

En este ejemplo:

• En pantallas de hasta 600px de ancho, se mostrará mobile-image.jpg
• En pantallas entre 601px y 1200px, se mostrará tablet-image.jpg
• En pantallas más grandes de 1200px, se mostrará desktop-image.jpg

El elemento img es obligatorio dentro de picture y sirve tanto como respaldo para navegadores que no soportan picture como para proporcionar el atributo alt para accesibilidad.

Casos de uso para art direction

Recorte específico para dispositivos

Uno de los usos más comunes es mostrar versiones recortadas de una imagen en dispositivos móviles:

<picture>
  <source media="(max-width: 767px)" srcset="portrait-closeup.jpg">
  <img src="landscape-full.jpg" alt="Equipo de desarrollo durante la conferencia anual">
</picture>

En este caso, en lugar de mostrar una imagen panorámica completa en móviles (donde sería difícil distinguir detalles), mostramos una versión recortada que enfoca solo en los elementos principales.

Cambio de orientación y composición

Para algunas imágenes, la orientación horizontal funciona mejor en escritorio, mientras que la vertical es más adecuada para móviles:

<picture>
  <source media="(max-width: 767px)" srcset="product-vertical.jpg">
  <img src="product-horizontal.jpg" alt="Zapatillas deportivas modelo Runner Pro">
</picture>

Este enfoque permite mostrar una composición completamente diferente que aprovecha mejor el espacio disponible en cada dispositivo.

Combinando art direction con múltiples resoluciones

El elemento picture puede combinarse con srcset y sizes para implementar tanto art direction como optimización de resolución:

<picture>
  <source media="(max-width: 767px)" 
          srcset="mobile-image-400.jpg 400w, 
                  mobile-image-800.jpg 800w" 
          sizes="100vw">
  <source media="(max-width: 1200px)" 
          srcset="tablet-image-800.jpg 800w, 
                  tablet-image-1200.jpg 1200w" 
          sizes="100vw">
  <img src="desktop-image-1200.jpg" 
       srcset="desktop-image-1200.jpg 1200w, 
               desktop-image-1800.jpg 1800w, 
               desktop-image-2400.jpg 2400w" 
       sizes="100vw"
       alt="Banner promocional de temporada">
</picture>

Este ejemplo proporciona:

• Diferentes composiciones para móvil, tablet y escritorio
• Múltiples resoluciones para cada composición
• Soporte para pantallas de alta densidad de píxeles

Uso del atributo type para diferentes formatos

Otra capacidad poderosa de picture es permitir especificar diferentes formatos de imagen según la compatibilidad del navegador:

<picture>
  <source type="image/webp" srcset="image.webp">
  <source type="image/jpeg" srcset="image.jpg">
  <img src="image.jpg" alt="Imagen con formato adaptativo">
</picture>

En este caso:

• Los navegadores que soportan WebP cargarán image.webp (generalmente más ligero)
• Los demás navegadores cargarán image.jpg

Podemos combinar este enfoque con media queries para una solución completa:

<picture>
  <!-- WebP para móviles -->
  <source media="(max-width: 767px)" type="image/webp" srcset="mobile.webp">
  <!-- JPEG para móviles (navegadores sin soporte WebP) -->
  <source media="(max-width: 767px)" srcset="mobile.jpg">
  <!-- WebP para escritorio -->
  <source type="image/webp" srcset="desktop.webp">
  <!-- JPEG para escritorio (respaldo) -->
  <img src="desktop.jpg" alt="Imagen con formato y art direction adaptativos">
</picture>

Ejemplo práctico: Imagen de héroe adaptativa

Veamos un ejemplo completo para una imagen de héroe en un sitio web:

<picture>
  <!-- Versión móvil: imagen vertical centrada en el sujeto principal -->
  <source media="(max-width: 767px)"
          srcset="hero-mobile-600.jpg 600w,
                  hero-mobile-800.jpg 800w"
          sizes="100vw">
  
  <!-- Versión tablet: recorte intermedio -->
  <source media="(max-width: 1199px)"
          srcset="hero-tablet-1024.jpg 1024w,
                  hero-tablet-1400.jpg 1400w"
          sizes="100vw">
  
  <!-- Versión escritorio: imagen panorámica completa -->
  <img src="hero-desktop-1400.jpg"
       srcset="hero-desktop-1400.jpg 1400w,
               hero-desktop-2000.jpg 2000w,
               hero-desktop-2800.jpg 2800w"
       sizes="100vw"
       alt="Nuestra nueva colección de otoño en un entorno natural">
</picture>

Este código proporciona:

• Una versión vertical para móviles que enfoca en el sujeto principal
• Una versión intermedia para tablets
• Una versión panorámica completa para escritorio
• Múltiples resoluciones para cada versión, optimizadas para diferentes densidades de pantalla

Consideraciones de implementación

Al trabajar con el elemento picture, debemos tener en cuenta algunas consideraciones importantes:

• Orden de los elementos source: El navegador utilizará la primera fuente que cumpla con los criterios especificados, por lo que el orden es crucial. Coloca las condiciones más específicas primero.

• Preparación de recursos: Necesitarás crear múltiples versiones de cada imagen, posiblemente con diferentes recortes y composiciones.

• Mantenimiento: Más versiones de imágenes significan más archivos para mantener y actualizar.

• Rendimiento vs. experiencia visual: Equilibra la cantidad de variantes con el beneficio real para la experiencia del usuario.

Ejemplo de banner promocional adaptativo

Un caso de uso común es un banner promocional que necesita mostrar información diferente según el dispositivo:

<picture>
  <!-- Versión móvil: texto grande, menos elementos -->
  <source media="(max-width: 767px)" srcset="promo-simple.jpg">
  
  <!-- Versión tablet: información intermedia -->
  <source media="(max-width: 1199px)" srcset="promo-medium.jpg">
  
  <!-- Versión escritorio: todos los detalles y ofertas -->
  <img src="promo-complete.jpg" alt="Promoción especial: 30% de descuento en toda la tienda">
</picture>

En este caso, adaptamos no solo el tamaño sino también la cantidad de información mostrada según el espacio disponible.

Compatibilidad con navegadores

El elemento picture tiene un excelente soporte en navegadores modernos. Para navegadores antiguos, el elemento img dentro de picture funcionará como respaldo, garantizando que siempre se muestre alguna versión de la imagen.

<!-- Navegadores modernos usarán picture, los antiguos mostrarán la imagen de respaldo -->
<picture>
  <source media="(max-width: 767px)" srcset="mobile.jpg">
  <source media="(max-width: 1199px)" srcset="tablet.jpg">
  <img src="desktop.jpg" alt="Imagen con respaldo para navegadores antiguos">
</picture>

Diferencias clave entre picture y srcset/sizes

Es importante entender cuándo usar cada enfoque:

• srcset/sizes: Ideal cuando necesitas la misma imagen en diferentes resoluciones, manteniendo la misma composición y contenido.

• picture: Necesario cuando quieres mostrar imágenes con diferentes composiciones, recortes o incluso contenido completamente diferente según el dispositivo.

<!-- Mismo contenido, diferentes resoluciones: usa srcset/sizes -->
<img src="product.jpg"
     srcset="product-small.jpg 400w, product-medium.jpg 800w, product-large.jpg 1200w"
     sizes="(max-width: 767px) 100vw, (max-width: 1199px) 50vw, 33vw"
     alt="Producto con diferentes resoluciones">

<!-- Diferente composición/recorte: usa picture -->
<picture>
  <source media="(max-width: 767px)" srcset="product-vertical.jpg">
  <img src="product-horizontal.jpg" alt="Producto con diferentes composiciones">
</picture>

El elemento picture representa una herramienta poderosa para implementar art direction en diseños web responsive, permitiéndonos adaptar no solo el tamaño sino también la composición y el contenido de nuestras imágenes según el contexto de visualización. Combinado con srcset y sizes, proporciona un control completo sobre cómo se presentan las imágenes en diferentes dispositivos, mejorando tanto la experiencia visual como el rendimiento.