Imagens responsivas com srcset, sizes e picture

O que é

O guia de imagens responsivas da MDN separa dois problemas. A troca de resolução: a mesma imagem deve ser entregue como um arquivo menor a uma tela pequena ou de baixa densidade e como um arquivo maior a uma tela grande ou de alta densidade. A direção de arte: deseja-se um recorte ou uma composição diferente conforme o layout, por exemplo um recorte de retrato mais fechado em celulares.

A troca de resolução usa srcset no img. Com descritores de largura, cada candidato informa a sua largura intrínseca (hero-800.jpg 800w, hero-1600.jpg 1600w) e o sizes diz ao navegador qual será a largura do espaço, como uma lista de condições de mídia, cada uma com um comprimento, e um valor padrão no final ((max-width: 600px) 100vw, 50vw). O guia observa que porcentagens não são permitidas como largura do espaço, que vw é permitido, e que o navegador usa a primeira condição que corresponder e ignora as demais, portanto a ordem importa. A referência do img acrescenta que o sizes só deve estar presente quando o srcset usa descritores de largura. Para uma imagem exibida em um tamanho CSS fixo, os descritores de densidade (icon.png 1x, icon@2x.png 2x) são mais simples.

A direção de arte usa <picture> com filhos <source media="…" srcset="…"> e um img como fallback; o mesmo elemento com <source type="image/avif"> oferece fallback de formato, já que o navegador ignora os tipos que não consegue decodificar.

Por que importa

As imagens costumam ser a maior parte dos bytes de uma página, e um celular que baixa uma imagem de destaque pensada para desktop desperdiça banda e atrasa a renderização. A MDN observa que o navegador começa a baixar as imagens antes que o parser principal tenha carregado o CSS e o JavaScript da página; por isso, escolher já na marcação permite que o download certo comece cedo.

Como aplicar

• Gere de três a cinco larguras por imagem no momento do build e liste todas; deixe o navegador escolher. Nomeie os arquivos pela largura para manter o srcset legível.
• Escreva o sizes a partir do layout CSS real; um sizes errado escolhe, sem aviso, arquivos grandes demais. Revise-o quando o layout mudar.
• Defina sempre os atributos width e height (ou aspect-ratio no CSS) para que o espaço seja reservado antes de a imagem chegar.
• Use loading="lazy" para imagens abaixo da dobra e decoding="async" quando a imagem não for necessária para a primeira renderização; mantenha a imagem de destaque acima da dobra com carregamento imediato (eager).
• Mantenha um alt significativo; a marcação responsiva não altera as regras de acessibilidade.

Armadilhas

O srcset é uma dica: a MDN afirma que o user agent seleciona qualquer uma das fontes disponíveis a seu critério, de modo que um navegador pode continuar usando um candidato maior já em cache em vez de buscar um menor. O sizes é avaliado antes de o CSS da imagem necessariamente ter sido carregado, portanto os valores precisam ser autossuficientes. Misturar descritores de largura e de densidade em um mesmo srcset é inválido. Imagens de fundo em CSS precisam, em vez disso, de image-set() ou de media queries.