O que fazem o srcset e o sizes
O srcset dá ao navegador uma lista de versões da mesma imagem com a respetiva largura real
(800x450.jpg 800w). O sizes indica que largura a imagem vai ocupar na página consoante o tamanho
do ecrã. Com as duas coisas, e sabendo a densidade de píxeis do ecrã, o navegador escolhe o ficheiro mais pequeno que
fique nítido. Decide-o antes de paginar, por isso precisa que o sizes lho diga.
Como escolher as larguras
- Cubra desde o telemóvel até ao dobro da largura máxima que a imagem ocupa, para ecrãs de alta densidade.
- Entre quatro e seis larguras chegam: mais versões quase não poupam bytes e complicam a cache.
- Saltos de cerca de 300–400 px funcionam bem:
480, 800, 1200, 1600para uma coluna de 800 px.
img com srcset ou picture
Se só muda o tamanho, basta <img srcset sizes>. O <picture> é necessário para
oferecer formatos que nem todos os navegadores entendem: cada <source> tem um type e o
navegador usa o primeiro que sabe ler, por isso o AVIF vem antes do WebP e o JPG do <img> fica como
alternativa. Também serve para a «direção de arte»: recortes diferentes consoante o ecrã, com media.
Pormenores que se esquecem
widtheheight: com eles o navegador reserva o espaço antes de a imagem chegar e a página não salta (CLS). Basta que tenham a proporção correta.loading="lazy"em tudo o que não se vê ao carregar. Nunca na imagem principal do topo: aí atrasa o LCP.- O
altdescreve a imagem; se for decorativa, fica vazio (alt=""), não se omite.
Os URL do código são do gerador ximg.es e cada imagem tem a largura escrita, por isso o HTML pode ser colado na maquete para ver de relance que versão carrega em cada ecrã. Quando houver fotografias reais, basta trocar os URL.