Que fan srcset e sizes
srcset dálle ao navegador unha lista de versións da mesma imaxe co seu ancho real
(800x450.jpg 800w). sizes dille que ancho vai ocupar a imaxe na páxina segundo o tamaño da
pantalla. Coas dúas cousas, e sabendo a densidade de píxeles da pantalla, o navegador escolle o ficheiro máis pequeno
que se vexa nítido. Decídeo antes de maquetar a páxina, por iso precisa que sizes llo digas ti.
Como escoller os anchos
- Cobre desde o móbil ata o dobre do ancho máximo que ocupa a imaxe, para pantallas de alta densidade.
- Entre catro e seis anchos abondan: máis versións apenas aforran bytes e complican a caché.
- Saltos duns 300–400 px funcionan ben:
480, 800, 1200, 1600para unha columna de 800 px.
img con srcset ou picture
Se só cambias o tamaño, abonda con <img srcset sizes>. <picture> fai falta para
ofrecer formatos que non todos os navegadores entenden: cada <source> leva un type e o
navegador usa o primeiro que sabe ler, así que AVIF vai antes ca WebP e o JPG do <img> queda como
respaldo. Tamén serve para a «dirección de arte»: recortes distintos segundo a pantalla, con media.
Detalles que se esquecen
widtheheight: con eles o navegador reserva o oco antes de que chegue a imaxe e a páxina non salta (CLS). Abonda con que teñan a proporción correcta.loading="lazy"en todo o que non se ve ao cargar. Nunca na imaxe principal da parte de arriba: aí atrasa o LCP.- O
altdescribe a imaxe; se é decorativa, vai baleiro (alt=""), non se omite.
Os URL do código son do xerador de ximg.es e cada imaxe leva escrito o seu ancho, así que podes pegar o HTML na túa maqueta e ver a simple vista que versión carga en cada pantalla. Cando teñas as fotos reais, cambia só os URL.