Las imágenes responsivas permiten que el navegador elija la mejor imagen para el dispositivo — ahorrando ancho de banda en teléfonos y sirviendo imágenes nítidas en pantallas de alto DPI.
srcset + sizes — misma imagen, diferentes resoluciones
html
Las imágenes responsivas permiten que el navegador elija la mejor imagen para el dispositivo — ahorrando ancho de banda en teléfonos y sirviendo imágenes nítidas en pantallas de alto DPI.
srcset enumera imágenes candidatas con sus anchos intrínsecos (400w = 400px de ancho).sizes le dice al navegador cuál será el ancho mostrado de la imagen en diferentes puntos de ruptura (aquí: ancho de viewport completo por debajo de 600px, si no la mitad).sizes + la densidad de píxeles del dispositivo para elegir la imagen más pequeña que siga viéndose nítida — antes de descargar nada.Un teléfono podría elegir small.jpg; una laptop Retina que la muestre al 50% de ancho podría elegir large.jpg.
<picture>
<source srcset="hero.avif" type="image/avif" /> <!-- modern format -->
<source srcset="hero.webp" type="image/webp" />
<source media="(max-width: 600px)" srcset="hero-cropped.jpg" /> <!-- different crop on mobile -->
<img src="hero.jpg" alt="Hero" /> <!-- required fallback -->
</picture>
El navegador utiliza la primera <source> que soporta/coincide. Use <picture> cuando necesite diferentes formatos (servir AVIF/WebP con un fallback JPEG) o un recorte diferente por tamaño de pantalla (dirección artística) — cosas que srcset solo no puede hacer.
srcset + sizes.<picture>.Servir imágenes de tamaño adecuado y formato moderno es una de las mayores ganancias de rendimiento para la web — reduce drásticamente el uso de datos móviles y mejora el Largest Contentful Paint.
Estas herramientas nativas permiten que el navegador haga la elección óptima automáticamente, con degradaciones elegantes para navegadores más antiguos.