Como testar qual imagem responsiva o navegador baixou

HTML responsivo precisa ser verificado contra o layout real; a configuração pode baixar imagem grande demais.

Antes de começar

Escolha páginas representativas e registre largura, DPR, condição de rede e cache.

Passo a passo

1. Abra DevTools, recarregue a página e filtre os recursos de imagem para comparar URL e bytes.

2. Repita em mobile e desktop e ajuste srcset/sizes se o candidato não corresponder ao espaço ocupado.

Limites e cuidados

Emulação de laboratório não representa todas as redes ou aparelhos reais.

Continue na biblioteca

Fonte oficial: Como servir imagens responsivas — web.dev.

Conteúdo da biblioteca de Diego Henrich. Confira as fontes citadas e valide orientações que dependem da versão de uma plataforma ou serviço.