Arquivos superdimensionados desperdiçam transferência e memória, principalmente em dispositivos móveis.
Antes de começar
Meça a largura renderizada em breakpoints e considere a densidade da tela.
Passo a passo
-
Exporte dimensões compatíveis com o layout ou forneça alternativas responsivas para cada faixa.
-
Compare dimensões intrínsecas, CSS e bytes recebidos em mobile e desktop.
Limites e cuidados
Não reduza a resolução abaixo do necessário para o tamanho e densidade de exibição.
Continue na biblioteca
Fonte oficial: Como servir imagens responsivas — web.dev.