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.
Una biblioteca de preguntas de entrevista de IT con respuestas detalladas — de Junior a Senior.
Donar