HTML
Cómo servir imágenes adaptadas al viewport y densidad de pantalla mediante srcset y sizes sin descargar recursos más grandes de lo necesario.
ofrece varias versiones de una misma imagen y describe cuánto espacio ocupará antes de conocer el layout final. El navegador elige el recurso más apropiado.
srcsetsizes<img
src="project-800.webp"
srcset="
project-480.webp 480w,
project-800.webp 800w,
project-1200.webp 1200w
"
sizes="(min-width: 64rem) 50vw, 100vw"
alt="Dashboard de DomiSys"
width="1200"
height="750"
>srcset="small.webp 480w, medium.webp 800w, large.webp 1200w"480w describe el ancho intrínseco del archivo, no el viewport donde debe usarse.
No mientas sobre dimensiones; el navegador usa esa información para calcular candidatos.
sizes="(min-width: 64rem) 50vw, 100vw"Se evalúa de izquierda a derecha. La última medida funciona como fallback.
Significa:
Debe describir el layout CSS real. No es una lista de tamaños de archivos.
Considera:
sizes.No puedes exigir un candidato exacto; declaras opciones y dejas la elección al user agent.
Para imágenes con el mismo tamaño CSS:
<img
src="logo.png"
srcset="logo.png 1x, logo@2x.png 2x"
alt="Acme"
width="160"
height="40"
>No mezcles w y x dentro del mismo srcset.
src="project-800.webp"Sigue siendo necesario como candidato inicial y fallback en entornos sin soporte de srcset.
Cuando usas width descriptors, el recurso de src participa también como candidato según parsing.
.project-image {
width: 100%;
}
@media (min-width: 64rem) {
.project-image {
width: 50vw;
}
}El atributo sizes debe mantenerse alineado con ese comportamiento. Si CSS cambia y sizes no, el navegador puede descargar archivos demasiado grandes o pequeños.
Si una imagen vive en un contenedor limitado:
sizes="(min-width: 75rem) 720px, 100vw"Comunica que nunca supera 720px en pantallas grandes.
Piensa en el espacio de layout, no en “iPhone” o “desktop”. Usa condiciones relacionadas con breakpoints reales.
Las dimensiones declaradas siguen representando la proporción intrínseca de un candidato coherente.
width="1200" height="750"El navegador calcula aspect ratio incluso si el recurso elegido tiene otro ancho de la misma proporción.
Si todas las imágenes muestran la misma composición con diferentes resoluciones, usa srcset.
Si necesitas un recorte o composición diferente, utiliza picture.
srcset en img no selecciona por tipo MIME directamente. Para ofrecer AVIF, WebP y fallback utiliza picture con source type.
Componentes de imágenes pueden generar srcset y sizes, pero necesitan una propiedad sizes correcta. Un default como 100vw puede descargar recursos excesivos en cards que ocupan 30% del viewport.
Inspecciona el HTML final.
<img
class="project-image"
src="domisys-800.webp"
srcset="
domisys-480.webp 480w,
domisys-800.webp 800w,
domisys-1200.webp 1200w
"
sizes="(min-width: 64rem) 42vw, 100vw"
alt=""
width="1200"
height="750"
loading="lazy"
>480w como breakpoint.100vw en una card estrecha.w describe ancho intrínseco; x, densidad.¿Por qué sizes="100vw" puede ser incorrecto para una imagen que ocupa media pantalla?
Porque informa al navegador que la imagen será tan ancha como todo el viewport y puede provocar la descarga de un candidato mucho mayor del necesario.
picture y art direction permite cambiar formato o composición según condiciones.