Compressão pode diminuir transferência, mas a configuração adequada depende da imagem e do uso.
Antes de começar
Escolha uma amostra representativa e guarde o original para permitir nova exportação.
Passo a passo
-
Ajuste uma variável por vez, exporte o arquivo e compare bordas, texto, textura e gradientes.
-
Veja a imagem em escala real em celular e desktop e anote bytes antes e depois.
Fluxo de exemplo: parta de uma foto de 2400 × 1600 usada num cartão que nunca ultrapassa 600 CSS px. Gere candidato de 640 px e, se o layout também usar imagem maior, outro de 1200 px; compare AVIF e WebP em navegadores-alvo e mantenha JPEG como fallback quando o suporte da aplicação exigir. Em fotografia, teste qualidade em degraus e registre qual arquivo foi escolhido; em logo com transparência ou texto, compare PNG/SVG apropriado para o ativo, pois artefatos podem ser mais visíveis. Verifique corte, cores, transparência e legibilidade com o arquivo na dimensão real de uso.
Limites e cuidados
Não adote um limite universal de qualidade ou tamanho sem considerar o conteúdo. Registre para cada candidato: formato, dimensões, bytes, tempo de transferência no perfil de teste e aprovação visual. Aceite a menor variante que passe os critérios visuais e de uso definidos; preserve o original para poder reexportar. Veja a comparação de formatos e compatibilidade em web.dev.
Continue na biblioteca
Fonte oficial: Como escolher formatos de imagem — web.dev.