O atributo sizes complementa candidatos srcset por largura e deve refletir o CSS real do componente.
Antes de começar
Documente a largura do contêiner nos breakpoints e a margem disponível na página.
Passo a passo
- Escreva as condições de tamanho na ordem apropriada e mantenha o valor final coerente com a largura padrão.
Suponha que a imagem ocupe 100vw até 699 px e, em telas maiores, uma coluna de 640 px:
<img
src="/img/artigo-640.jpg"
srcset="/img/artigo-320.jpg 320w, /img/artigo-640.jpg 640w, /img/artigo-960.jpg 960w"
sizes="(max-width: 699px) 100vw, 640px"
width="960" height="640" alt="Descrição da imagem">O CSS do exemplo precisa limitar a coluna a 640 px em telas largas e permitir largura fluida abaixo do breakpoint; altere o sizes se o layout real for diferente.
- Use DevTools para conferir o candidato baixado em cada viewport, inclusive com pixel ratio diferente.
Limites e cuidados
Um sizes superestimado pode baixar arquivo maior do que a tela precisa. Em DevTools > Network, selecione uma viewport estreita e outra acima do breakpoint, recarregue com cache desativado e confira qual arquivo de srcset foi baixado. O candidato depende também do DPR, cache e condições de rede; verifique que o arquivo cobre a largura CSS × DPR sem enviar variantes enormes à toa.
Continue na biblioteca
Fonte oficial: Imagens responsivas — web.dev.