Checklist do designer web: otimizar imagens sem perder qualidade

Passo 1. Escolha o formato certo

Para fotos e imagens complexas com gradientes, a melhor escolha é um formato moderno como AVIF ou WebP: eles pesam de 30% a 50% menos que um JPG com qualidade comparável. Para gráficos simples de cor plana (ícones, logos), o PNG se encaixa melhor. Converta os arquivos que já existem com o Conversor para AVIF ou passe de JPG para WebP.

A diferença fica ainda mais evidente em imagens com muitas transições suaves de cor — pôr do sol, sombras, fundos desfocados: é justamente aí que AVIF e WebP economizam mais em relação ao JPG.

Passo 2. Ajuste o tamanho exato para o layout

Não entregue ao navegador uma imagem de 4000×3000px se na página ela aparece em um bloco de 800×600 — esses pixels a mais só aumentam o peso do arquivo sem nenhum benefício. Redimensionar imagem permite definir a largura e a altura exatas para um bloco específico do layout, mantendo as proporções.

Isso importa especialmente nas versões mobile de um site, onde o bloco de imagem costuma ser duas ou três vezes mais estreito que no desktop — se o layout for responsivo, vale preparar alguns tamanhos para os diferentes breakpoints em vez de depender de uma única imagem universal.

Passo 3. Comprima com um nível de qualidade razoável

Depois de definir o formato e o tamanho, falta a compressão: Comprimir imagem com qualidade entre 70% e 85% costuma gerar uma perda imperceptível a olho nu, reduzindo bastante o peso do arquivo. Confira o resultado visualmente antes de publicar — em fotos com muitos detalhes finos, às vezes vale subir a qualidade em 5% a 10%.

Uma regra útil: se a diferença entre 70% e 85% de qualidade não é perceptível ao ver a página normalmente, escolha o valor mais baixo — a economia no peso do arquivo reduz de forma perceptível o tempo de carregamento para usuários em conexões móveis lentas.

Passo 4. Corte o que não precisa

Se o enquadramento tem margens sem conteúdo ou objetos soltos nas bordas, Cortar imagem remove isso antes da compressão — assim o arquivo final concentra o peso no que realmente importa, em vez de em áreas que o usuário nem vai notar.

O corte é especialmente útil em prints de interface, que costumam deixar barras do navegador ou espaços vazios nas bordas — eles não agregam nenhum conteúdo, mas somam peso ao arquivo sem falta.

Passo 5. Prepare uma alternativa para navegadores antigos

AVIF e WebP são suportados por todos os navegadores atuais, mas se o público do site pode incluir versões antigas, vale preparar um JPG de reserva com uma tag <picture> com várias fontes — o navegador escolhe o formato que ele suporta.

A tag <picture> também ajuda se parte do público navega pelo navegador embutido de um aplicativo de mensagens ou por um componente web do sistema bem antigo, que às vezes não suporta os formatos mais novos mesmo com o navegador principal do aparelho atualizado.

Passo 6. Não esqueça das fotos de produto e dos prints de interface

Para cards de produto com fundo limpo, ajuda recortar o fundo antes com Remover fundo — isso mantém o estilo visual do catálogo consistente e reduz o peso do arquivo graças à área transparente uniforme.

Um fundo transparente (ou de uma única cor) constante em todos os cards de produto fica mais profissional do que uma mistura de fotos com fundos reais, e facilita mudanças futuras de layout — por exemplo, se o catálogo migrar depois para um tema escuro. Se o catálogo já estiver publicado sem um fundo único, atualizar os cards antigos pode ser feito aos poucos, começando pelos produtos mais vistos.

Passo 7. Confira como as imagens se comportam ao carregar

Mesmo imagens otimizadas levam algum tempo para carregar, principalmente em conexões móveis. Defina os atributos width e height na tag <img> para que o navegador reserve o espaço imediatamente e não desloque o texto ao redor quando a imagem terminar de carregar — isso afeta diretamente a métrica Cumulative Layout Shift nos relatórios de desempenho da página. Carregar de forma preguiçosa as imagens abaixo da dobra acelera ainda mais a percepção de velocidade de carregamento.

Passo 8. Confira o efeito com uma ferramenta de análise de velocidade

Depois de publicar, vale rodar a página no Google PageSpeed Insights ou em uma ferramenta parecida — o relatório vai mostrar exatamente quais imagens mais afetam o tempo de carregamento, e se vale a pena revisitar o checklist para algum arquivo específico. Também ajuda a pegar imagens que foram adicionadas depois e passaram batido pelo checklist, algo que acontece mais do que parece em sites com atualizações frequentes de catálogo.