srcset enumera los archivos candidatos; tamaños le dice al navegador el ancho de la ranura en píxeles CSS antes de que se complete el diseño. Los sitios que envían srcset sin tamaños honestos hacen que el navegador adivine, y su suposición es el archivo más grande.
<img
src="photo-800.webp" alt="the workshop bench"
srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
sizes="(max-width: 700px) 92vw, 560px"
width="800" height="533" fetchpriority="high" />Las matemáticas de dos minutos
- Abra devtools y lea el ancho de la imagen renderizada en cada punto de interrupción que admita. Ese ES el valor de tu talla; escríbalo en px, no en vw, donde está fijada la ranura.
- Genere archivos en los dos extremos del rango de ranuras (densidad 1x y 2x de la más grande). Tres candidatos ya son suficientes.
- Nunca mezcle descriptores de densidad (1x, 2x) con descriptores de ancho (w) en un srcset; una sintaxis gana y es la forma w para diseños.
Los errores que corrige esta guía
- Un héroe de escritorio enviado a bytes de escritorio en teléfonos: los tamaños se olvidaron del caso (ancho máximo).
- Una foto borrosa de 400 píxeles extendida en el escritorio: no existía un candidato más grande al que actualizar.
- Cambio de diseño al cargar: faltan atributos de ancho/alto. Vuelva a colocarlos; no cuestan nada.
Este sitio: un recorte de 3:2 por foto de artículo, héroe ansioso en las páginas de artículos, todo lo demás flojo, Lighthouse 100 en cada página medida en este repositorio. Simple, medido y los bytes siguen la ventana gráfica.