Implementación de imágenes responsivas con el atributo srcset y sizes

Implementación de imágenes responsivas con el atributo srcset y sizes

En esta guía profesional y técnica revisaremos cómo implementar imágenes responsivas usando los atributos srcset y sizes. Verás ejemplos prácticos, consideraciones de servidor y SEO técnico para optimizar la entrega de imágenes en sitios WordPress y páginas web modernas.

Por qué importan las imágenes responsivas

Las imágenes representan una porción significativa del peso de una página. Entregar la versión correcta para cada dispositivo reduce transferencia de datos, mejora tiempos de carga y repercute directamente en métricas como Largest Contentful Paint (LCP). Además, una implementación correcta influye en la accesibilidad y en el SEO técnico.

Cómo funcionan srcset y sizes

Los atributos srcset y sizes permiten al navegador elegir entre varias versiones de la misma imagen. Mientras srcset define las fuentes disponibles (con sus resoluciones o anchuras), sizes indica al navegador el ancho que la imagen ocupará en la página bajo condiciones de diseño específicas.

Formato básico de srcset

Existen dos formas principales de especificar srcset:

  • Descriptor de densidad (x): «imagen-1x.jpg 1x, imagen-2x.jpg 2x» para pantallas de alta densidad.
  • Descriptor de ancho (w): «imagen-400w.jpg 400w, imagen-800w.jpg 800w» para que el navegador elija según el ancho renderizado.

Cómo interpreta el navegador

Cuando usas descriptores w, el navegador combina sizes con la información disponible en srcset para calcular la mejor opción. Con descriptores x, la elección se basa en la densidad de píxeles del dispositivo.

Ejemplos prácticos

Los siguientes ejemplos muestran patrones reales que puedes adaptar a tu proyecto.

Ejemplo 1: Imagen en contenido principal con anchura fluida

<img src="/img/hero-800w.jpg"
     srcset="/img/hero-400w.jpg 400w, /img/hero-800w.jpg 800w, /img/hero-1200w.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Descripción concisa" loading="lazy" decoding="async">

Interpretación:

  • Si la pantalla es ≤600px, la imagen ocupará 100vw (ancho de viewport), así que el navegador elegirá la versión apropiada.
  • En pantallas mayores, la imagen ocupará 50vw y el navegador balanceará calidad y tamaño.

Ejemplo 2: Iconos y imágenes pequeñas (descriptor x)

<img src="/icons/user-1x.png"
     srcset="/icons/user-1x.png 1x, /icons/user-2x.png 2x"
     alt="Usuario" width="32" height="32">

Útil para recursos que tienen un tamaño visual fijo en CSS o atributos HTML.

Uso del elemento <picture> para art direction

Si necesitas cambiar recortes o proporciones según el dispositivo, usa <picture>:

<picture>
  <source media="(min-width:800px)" srcset="/img/landscape-1200w.jpg"
          type="image/webp">
  <source media="(max-width:799px)" srcset="/img/portrait-600w.jpg" type="image/webp">
  <img src="/img/landscape-1200w.jpg" alt="Imagen adaptativa" loading="lazy">
</picture>

Buenas prácticas técnicas y de servidor

Adoptar srcset y sizes es solo parte de la optimización. Aplica estas prácticas:

  • Servir formatos modernos (WebP, AVIF) cuando sea compatible y mantener fallback JPEG/PNG. Puedes detectar soporte con <source type="image/avif"> en <picture>.
  • Habilitar compresión y cabeceras de caché en el servidor (NGINX o Apache). Documentación útil en MDN Web Docs.
  • Configurar CDN para entregar variantes y aplicar políticas de cache y revalidación.
  • Generar automáticamente las variantes (400w, 800w, 1200w) en el pipeline de build o mediante un servicio de imágenes.
  • Usar lazy-loading nativo (loading="lazy") y atributos de tamaño (width/height) para evitar layout shift.

Cabeceras y HTTP/2

HTTP/2 mejora la multiplexación, pero la mejor estrategia sigue siendo reducir el número de bytes. Evita técnicas que generen muchas pequeñas peticiones sin beneficio. Si usas HTTP/2, la imagen optimizada por tamaño sigue siendo prioritaria para Core Web Vitals.

SEO técnico: impacto y recomendaciones

Desde la perspectiva del SEO técnico:

  • Mejorar LCP: servir la imagen adecuada reduce tiempo hasta que el contenido principal es visible.
  • Uso correcto de alt: accesibilidad y contexto semántico para buscadores.
  • Estructura y prerender: evita carga masiva de imágenes innecesarias en el primer viewport.
  • Compatibilidad con robots y crawlers: Google entiende srcset y picture; consulta la guía en Google Developers.

Integración en WordPress

WordPress genera automáticamente varias dimensiones para cada imagen subida y añade atributos srcset y sizes en las funciones de tema si usas the_post_thumbnail() o wp_get_attachment_image(). Aun así, revisa:

  • Que el tema no sobrescriba los atributos predeterminados y que el HTML incluya los atributos width/height para evitar CLS.
  • Plugins de optimización: prioriza los que generan variantes y sirven WebP/AVIF de forma controlada.
  • Configura el CDN para cachear y reescalar variantes con reglas coherentes.

Ejemplo de filtro en functions.php para ajustar sizes

add_filter('wp_calculate_image_sizes', function($sizes, $size, $image_src, $image_meta, $attachment_id) {
  // Ejemplo: forzar tamaños personalizados según ancho de contenido
  return '(max-width: 600px) 100vw, 700px';
}, 10, 5);

Pruebas y diagnóstico

Valida tu implementación usando herramientas:

  • Chrome DevTools: network y cobertura para ver qué imagen descarga el navegador.
  • PageSpeed Insights y Lighthouse para métricas LCP y oportunidades de mejora.
  • Revisa compatibilidad y especificaciones en W3C y MDN Web Docs para entender comportamiento en distintos agentes.

Errores comunes y cómo evitarlos

  • No definir sizes cuando usas descriptores w: el navegador puede seleccionar imágenes demasiado grandes.
  • Confiar solo en densidad x para imágenes fluidas: no da información sobre el ancho renderizado.
  • No incluir atributos width/height o estilos para reservar espacio: provoca CLS.
  • Generar demasiadas variantes innecesarias: balancea coste de almacenamiento con beneficios de entrega.

Checklist rápida antes de desplegar

  • Generar variantes recomendadas (p. ej. 320w, 640w, 1024w, 1600w).
  • Comprobar que sizes refleja el diseño real.
  • Servir WebP/AVIF con fallback y comprobar que los navegadores que no soportan formatos modernos reciben la alternativa.
  • Activar caching y cabeceras adecuadas en el servidor/CDN.
  • Medir LCP y CLS post-implementación.

Conclusión

Implementar imágenes responsivas con srcset y sizes es una práctica esencial para optimizar rendimiento, experiencia de usuario y SEO técnico. Más allá del marcado HTML, considera formatos modernos, configuración de servidor/CDN y ajustes en WordPress para obtener resultados sostenibles. Para profundizar en especificaciones y recomendaciones, consulta la documentación de MDN y las guías de Google Developers. Una implementación correcta reduce el peso de la página, mejora Core Web Vitals y ofrece una experiencia coherente en todos los dispositivos.

Tags: