Como otimizar imagens para seu site: um guia prático

Imagens costumam representar uma parte relevante da transferência da página e também podem afetar descoberta, decodificação, layout e Largest Contentful Paint. A otimização pode gerar ganhos importantes, mas nenhuma economia fixa ou resultado de ranking vale para toda página. Este é um fluxo que você pode medir passo a passo.

Por Que Otimizar Imagens Importa Mais do Que Nunca

O relatório de peso de página do HTTP Archive mostra que imagens continuam sendo parte relevante de muitas páginas, embora as medianas atuais mudem. Largest Contentful Paint (LCP) mede quando o maior elemento de conteúdo elegível na viewport é renderizado; ele costuma ser uma imagem, mas nem sempre.

Os limites de LCP publicados pelo Google classificam até 2.5 segundos como bom e acima de 4 segundos como ruim, avaliados no percentil 75 das visitas. O trabalho com imagens pode mover a página entre faixas quando o recurso LCP é o gargalo, mas sozinho não garante aprovação nas Core Web Vitals nem posição na busca.

Passo 1: Escolha o Formato Certo

A escolha do formato pode afetar bastante tamanho e recursos. A comparação abaixo é qualitativa porque benchmarks dependem da origem, codificador, configurações e meta de qualidade:

WebP é um candidato padrão útil para muitos sites, não uma resposta universal. Se pipeline e público aceitam AVIF, teste-o como <source> anterior, com WebP ou JPEG como fallback. Você pode converter JPG para WebP ou converter para AVIF no Vizua; o arquivo selecionado é processado no navegador e não enviado ao nosso servidor de processamento de imagens.

Para uma comparação mais profunda, veja nossa análise de WebP vs AVIF e a explicação sobre compressão com e sem perdas.

Passo 2: Redimensione para o Tamanho Real de Exibição

Uma foto de 4000 × 3000 pixels exibida a 800 × 600 tem muito mais pixels de origem do que o slot renderizado precisa. Uma tela responsiva de alta densidade pode exigir um candidato maior, mas enviar o original da câmera costuma acrescentar transferência e decodificação desnecessárias.

O princípio é oferecer candidatos próximos do tamanho e da densidade renderizados. Use srcset e sizes para o navegador escolher e considere largura do layout, densidade de pixels do aparelho, qualidade, zoom e direção de arte, em vez de fixar um multiplicador “Retina”.

Dimensões iniciais de exemplo para adaptar ao seu layout:

• Hero em largura total: comece pelo maior slot renderizado e gere candidatos para densidades e breakpoints relevantes
• Imagem no conteúdo do blog: combine com a coluna de conteúdo e qualquer estado responsivo mais largo
• Miniatura: gere um candidato próximo de cada tamanho renderizado do card em vez de reutilizar a hero
• Avatar: considere o círculo ou quadrado exibido, a densidade do aparelho e uma possível tela detalhada de perfil

Use o redimensionador de imagens do Vizua para criar candidatos adequados antes da compressão. A economia depende da quantidade de pixels original e final; meça os arquivos gerados.

Passo 3: Comprima com a Qualidade Certa

Depois de escolher o formato e redimensionar, ajuste o codificador. Escalas de qualidade não são lineares nem padronizadas entre codificadores ou formatos. Um valor menor costuma trocar mais informação por menos bytes em um codificador com perdas, mas o tamanho e a mudança visual precisam ser medidos no resultado real.

Configurações recomendadas:

• JPEG: 75–85 pode ser uma faixa inicial conservadora para fotos. As escalas variam; examine o resultado.
• WebP: 75–80 é uma faixa inicial, não um equivalente garantido ao valor JPEG.
• AVIF: 60–75 pode ser uma faixa inicial em algumas ferramentas; escalas e comportamento do codificador variam.
• PNG: tente primeiro compressão sem perdas mais forte. Quantizar a paleta para no máximo 256 entradas pode economizar mais, mas é uma redução de cor com perdas que precisa ser examinada.

O compressor JPEG do Vizua permite ajustar a qualidade e analisar o resultado. Para um método detalhado, veja como comprimir imagens sem perder qualidade.

Passo 4: Entregue Imagens de Forma Eficiente

Boa compressão é só metade do trabalho. Como você entrega as imagens ao navegador importa tanto quanto para a performance.

Defina dimensões explicitamente

Dê a cada <img> valores intrínsecos precisos de width e height, ou reserve seu slot com uma regra de layout intencional. Assim o navegador estabelece a proporção cedo. Isso reduz movimentos de layout ligados à imagem, embora fontes, conteúdo injetado, animações e estilos responsivos incorretos ainda afetem o Cumulative Layout Shift (CLS).

Aplique lazy-load nas imagens abaixo da dobra

Considere loading="lazy" para imagens suficientemente fora da viewport inicial. Não use mecanicamente na provável imagem LCP ou em conteúdo necessário imediatamente. Heurísticas do navegador, carrosséis, impressão, rolagem rápida e layouts responsivos ocultos tornam os testes necessários.

Priorize a imagem hero

Não adie a provável imagem LCP. Considere fetchpriority="high" quando o recurso realmente merecer banda inicial e garanta que seja descoberto no HTML inicial. Não atribua prioridade alta de modo amplo; confirme o efeito em um trace e nos dados de campo.

Use imagens responsivas

Os atributos srcset e sizes oferecem candidatos ao navegador e descrevem o slot esperado. Ele considera viewport, densidade, cache e implementação. Garanta que sizes corresponda ao layout real; um valor errado pode levar à escolha de um candidato grande ou pequeno demais.

Etapa 5: audite e meça regularmente

Otimização não é uma tarefa única. Cada imagem nova que você adiciona é uma oportunidade de regressão.

• PageSpeed Insights: rode o PageSpeed Insights do Google em páginas representativas. Analise LCP de campo e laboratório separadamente e confira os diagnósticos atuais de entrega de imagem, sem depender de um rótulo de auditoria que pode mudar.
• Aba Network do DevTools: ordene requisições por tamanho e examine imagens grandes no contexto. Pergunte se dimensões, formato, compressão, cache e prioridade combinam com sua função, sem impor um limite universal de KB.
• Automatize: acrescente otimização de imagens ao pipeline de build para detectar imagens superdimensionadas antes da publicação.

Checklist Rápido

• Gere e compare variantes adequadas em JPEG, WebP, AVIF, PNG ou SVG
• Redimensione imagens para as dimensões reais de exibição — sem largura maior que a necessária
• Comece com configurações conservadoras, compare bytes e aparência e não iguale números de qualidade entre formatos
• Reserve um slot preciso para cada <img>, normalmente com width e height intrínsecos
• Considere fetchpriority="high" para a provável imagem LCP e depois meça
• Adie imagens adequadas fora da tela; teste rolagem e layout
• Use srcset/sizes para entrega responsiva
• Defina orçamentos de desempenho a partir da página, do público e dos dados de campo
• Remova metadados privados desnecessários, mas preserve perfis de cor e outros dados exigidos pelo fluxo — veja o guia sobre dados EXIF e privacidade
• Audite regularmente com PageSpeed Insights

Perguntas Frequentes