Respuesta directa
Imágenes responsive: srcset, tamaños y formatos sin complicar la experiencia
Una imagen responsive no es simplemente una foto que se encoge con CSS. El navegador debería poder elegir un archivo de tamaño adecuado al dispositivo y al espacio real donde se mostrará.
Por qué una sola imagen grande desperdicia datos
Servir una imagen de 2000 px para una tarjeta de 360 px obliga a descargar información que no se verá. En móvil ese peso afecta tiempo y consumo de datos.
srcset y sizes permiten elegir
Con varias variantes y una descripción del tamaño visual, el navegador selecciona el recurso más conveniente según densidad y viewport. El atributo src sigue funcionando como respaldo.
width y height evitan saltos
Declarar dimensiones permite reservar proporción antes de descargar la imagen. El CSS puede hacerla fluida sin perder esa ventaja.
WebP/AVIF ayudan, pero no reemplazan una buena resolución
Un formato eficiente reduce peso, pero una foto demasiado grande seguirá siendo innecesaria. El mayor beneficio aparece al combinar formato, compresión y tamaño correctos.
Checklist de imágenes
| Elemento | Práctica |
|---|---|
| Hero | Preload/fetchpriority cuando sea LCP |
| Cards | Lazy loading bajo el pliegue |
| HTML | width y height explícitos |
| Responsive | srcset + sizes realistas |
| Peso | Comprimir sin degradación visible excesiva |
Experiencia aplicada
Un ejemplo real: Doite
Un ecommerce visual como Doite depende de muchas fotografías. Variantes responsive permiten conservar calidad sin enviar el mismo archivo grande a todas las pantallas.
Preguntas frecuentes
Dudas habituales sobre este tema.
¿Hay que generar una imagen por cada teléfono?
No. Un conjunto razonable de anchos permite elegir la variante más cercana.
¿Lazy loading en el hero?
Normalmente no si es el LCP.
¿WebP o AVIF?
Ambos pueden ser eficientes; la elección depende de compatibilidad y calidad/peso.
Documentación primaria
Fuentes y referencias
Estas referencias permiten contrastar y ampliar los criterios técnicos explicados en el artículo.