Sirves la misma imagen de 2400 px a un móvil de 390 px y a un monitor 4K. El navegador la escala, pero el usuario ya ha pagado el peso completo en datos y tiempo. Los atributos srcset y sizes permiten ofrecer varias resoluciones y elegir la adecuada según el ancho real del hueco en pantalla, sin duplicar diseños ni renunciar a la calidad en escritorio.
En octubre de 2026, con más tráfico móvil que nunca y métricas como LCP y CLS en el centro del SEO técnico, dominar srcset ya no es opcional en webs de empresa con fotos de producto, equipo o instalaciones. Te explicamos cómo funcionan, cómo combinarlos con formatos modernos y qué errores evitar en tu próximo despliegue.
Qué es srcset y qué problema resuelve
srcset es un atributo de <img> (y de <source> dentro de <picture>) que lista varias URLs de la misma imagen a distintas anchuras o densidades de píxel. El navegador elige una según el viewport y la densidad del dispositivo (w descriptors) o según x (1x, 2x, 3x).
En una web corporativa típica, la foto del hero puede ocupar el 100 % del ancho en móvil y solo el 50 % en escritorio dentro de un grid de dos columnas. Sin srcset, todos descargan el mismo archivo grande. Con srcset bien configurado, el móvil puede recibir un JPEG de 800 px y el escritorio uno de 1600 px, con ahorros de cientos de kilobytes por visita.
El papel de sizes: decirle al navegador cuánto espacio ocupará la imagen
sizes complementa a srcset. Indica, antes de que el layout esté completo, qué anchura tendrá la imagen en distintos breakpoints. El navegador usa esa estimación para elegir el candidato de srcset más eficiente.
Ejemplo habitual en portada:
sizes="(max-width: 768px) 100vw, 50vw"
Significa: en pantallas de hasta 768 px la imagen ocupa todo el ancho del viewport; a partir de ahí, la mitad. Si tu CSS hace otra cosa (por ejemplo 33 % en desktop), sizes debe reflejarlo o elegirás un archivo demasiado grande o demasiado pequeño.
Regla práctica: sizes debe coincidir con el CSS real, no con un valor genérico copiado de un tutorial.
Relación con rendimiento, LCP y datos móviles
srcset no sustituye a comprimir bien las imágenes ni a usar WebP o AVIF, pero multiplica el efecto: menos bytes en el recurso que suele ser el LCP en landings visuales.
Combínalo con:
- width y height en el HTML para reservar espacio y evitar CLS.
- fetchpriority="high" solo en la variante LCP above the fold (fetchpriority).
- loading="lazy" en imágenes below the fold (lazy loading), nunca en la hero LCP.
- CDN si sirves muchas variantes desde el mismo origen (CDN).
srcset con w versus descriptor x (DPR)
Descriptor w (anchuras): ideal cuando la imagen cambia de tamaño en CSS según breakpoint. Necesitas sizes.
Descriptor x (1x, 2x, 3x): útil para iconos o imágenes de tamaño fijo en píxeles (logos en retina). No requiere sizes.
En banners responsive de empresa, casi siempre usarás 480w, 800w, 1200w, 1600w con sizes acorde al layout. En miniaturas de blog con ancho fijo de 400 px en CSS, un srcset 400w/800w con sizes="400px" puede bastar.
picture, art direction y formatos alternativos
Cuando además del tamaño cambia el recorte (móvil vertical vs escritorio panorámico), entra <picture> con varios <source media="..."> y un <img> fallback. Es «art direction»: no es solo escalar, es otra composición.
También puedes ofrecer AVIF/WebP con fallback JPEG:
<source type="image/avif" srcset="..."><source type="image/webp" srcset="..."><img src="fallback.jpg" srcset="..." sizes="..." alt="...">
El orden importa: el navegador usa el primer formato que entienda.
Casos prácticos en webs de empresa
Hero de servicios. Tres o cuatro anchuras (768, 1200, 1600, 2000) y sizes que reflejen ancho completo en móvil y columna en desktop. Una sola imagen con fetchpriority high en el fallback img.
Fichas de producto o catálogo. Miniatura 300 px en listado: srcset 300w/600w, sizes="(max-width: 576px) 50vw, 300px". Imagen grande en detalle con anchuras mayores.
Blog y noticias. Imagen destacada dentro del artículo: sizes="(max-width: 768px) 100vw, 720px" si el contenedor de contenido tiene max-width ~720–800 px.
Equipo y testimonios. Retratos en grid: evita subir solo 4000 px; genera variantes y deja que srcset reparta.
Implementación paso a paso
- Define en diseño el ancho máximo de la imagen en cada breakpoint (coincide con tu diseño responsive).
- Exporta o genera variantes (manual, build script o servicio de imágenes dinámicas).
- Escribe sizes con media queries alineadas a tu CSS.
- Construye srcset con las anchuras reales de cada archivo (el número w debe ser la anchura intrínseca).
- Añade alt descriptivo, width/height de la variante por defecto y prueba en DevTools → Network con throttling 4G.
- Mide LCP antes y después en PageSpeed Insights y en campo si tienes CrUX.
Ejemplo mínimo:
<img src="/img/hero-1200.jpg" srcset="/img/hero-480.jpg 480w, /img/hero-800.jpg 800w, /img/hero-1200.jpg 1200w, /img/hero-1600.jpg 1600w" sizes="(max-width: 768px) 100vw, 50vw" alt="Equipo de consultoría en oficina" width="1200" height="675" fetchpriority="high" decoding="async">
Errores frecuentes con srcset y sizes
- sizes="100vw" en todo cuando la imagen solo ocupa un 40 % del layout en desktop → descargas innecesariamente grandes.
- Valores w que no coinciden con el archivo real (marcar 1200w en un JPEG de 800 px) → el navegador elige mal.
- Olvidar el atributo sizes con descriptor w → el navegador asume 100vw y suele penalizar móvil.
- Demasiadas variantes sin CDN o sin caché → más archivos que mantener sin beneficio claro; 3–5 anchuras suelen bastar.
- Lazy en la imagen LCP junto con srcset complejo → retrasa la pintura principal.
- Confiar solo en el CMS «responsive» sin revisar el HTML generado → a veces solo redimensiona en servidor una única URL.
Herramientas y comprobaciones (2026)
En Chrome DevTools, activa «Disable cache», emula móvil y compara el archivo descargado en Network con el ancho del elemento en Layout. PageSpeed Insights señala imágenes «oversized» cuando el archivo supera el tamaño mostrado.
Si usas WordPress, plugins de optimización pueden generar srcset automáticamente a partir de tamaños registrados; en stacks custom (Laravel, headless), conviene automatizar en build o con un servicio de imágenes. Lo importante es que el HTML final sea correcto, no solo que existan archivos en el servidor.
Checklist antes de publicar cambios
- sizes alineado con CSS en móvil, tablet y escritorio.
- 3–5 anchuras razonables; archivos comprimidos en WebP/AVIF cuando sea posible.
- width/height en la variante por defecto para CLS.
- Sin lazy loading en la imagen LCP; fetchpriority high si aplica.
- Prueba en 4G y en pantalla retina (DPR 2x).
- Alt text único y descriptivo en cada imagen de producto o equipo.
Conclusión
srcset y sizes son la forma estándar de alinear peso de imagen y calidad visual en cada dispositivo. En webs de empresa con fotografía de marca fuerte, bien aplicados recortan segundos de carga percibida y mejoran LCP sin cambiar el diseño que ya tienes.
Si quieres auditar qué imágenes de tu portada o catálogo están sobredimensionadas y cómo generar variantes sin duplicar trabajo editorial, en aatsoft revisamos HTML, CMS y pipeline de medios con foco en rendimiento y conversión.
