As imagens representam de 50% a 60% do tráfego de dados de uma página web comum. Escolher o formato de imagem certo é uma das otimizações de maior impacto para o desempenho da web. Veja uma análise prática de cada formato e quando usar cada um.
Os Formatos Que Você Deve Conhecer
JPG (JPEG)
O veterano. O JPG é o padrão para fotografias na web desde os anos 1990. Ele usa compressão com perdas otimizada para fotografias — gradientes de cor naturais, texturas e cenas complexas.
Ideal para: Fotografias quando WebP ou AVIF não são viáveis, ou quando é necessária compatibilidade com sistemas legados.
Pontos fracos: Maior que os formatos modernos, sem transparência, artefatos de compressão em qualidade mais baixa.
PNG
O PNG é um formato sem perdas ideal para gráficos com cores sólidas, bordas nítidas e fundos transparentes.
Ideal para: Logotipos, ícones, capturas de tela, elementos de interface, imagens que precisam de transparência.
Pontos fracos: Muito maior que o JPG para fotografias, carregamento mais lento.
WebP
O formato WebP, do Google, oferece compressão com e sem perdas, oferece suporte a transparência e supera tanto o JPG quanto o PNG. Hoje é o padrão recomendado para imagens na web.
Ideal para: Quase tudo — fotografias (substituindo o JPG), logotipos/gráficos (substituindo o PNG), imagens web em geral.
Vantagem de tamanho: 25% a 35% menor que o JPG com qualidade visual equivalente; semelhante ao PNG, mas geralmente menor.
Suporte de navegadores: mais de 97% (Chrome, Firefox, Safari, Edge — todos os navegadores modernos).
AVIF
Derivado do codec de vídeo AV1, o AVIF é o formato de imagem mainstream mais recente. Ele alcança compressão melhor que a do WebP — muitas vezes de 20% a 50% menor com qualidade equivalente.
Ideal para: Imagens estáticas em que a compressão máxima é prioridade e você controla o servidor ou o processo de build.
Pontos fracos: A codificação é mais lenta (não é ideal para geração em tempo real), versões mais antigas de navegadores podem não ter suporte.
Suporte de navegadores: Chrome 85+, Firefox 93+, Safari 16+, Edge 121+.
SVG
O SVG é um formato vetorial — as imagens são descritas como caminhos matemáticos, não como pixels. Os arquivos SVG independem de resolução e costumam ser minúsculos para logotipos e ícones.
Ideal para: Logotipos, ícones, ilustrações, gráficos, qualquer imagem que precise ser dimensionada para tamanhos diferentes.
Não recomendado para: Fotografias ou qualquer imagem com gradientes e texturas complexos.
Matriz de Formato x Caso de Uso
| Tipo de Conteúdo | Melhor Formato | Alternativa |
|---|---|---|
| Fotografia | AVIF | WebP → JPG |
| Foto de produto | WebP | JPG |
| Logotipo | SVG | PNG |
| Ícone | SVG | PNG |
| Captura de tela | WebP | PNG |
| Ilustração | SVG ou WebP | PNG |
| Padrão de fundo | WebP | JPG |
| Animado | WebP | GIF |
Impacto no Desempenho: Números Reais
Ao converter uma foto de produto comum para formatos modernos:
| Formato | Tamanho do Arquivo | Qualidade |
|---|---|---|
| JPG (qualidade 85) | 340 KB | Base |
| PNG | 1,2 MB | Sem perdas |
| WebP (qualidade 80) | 210 KB | ≈ JPG 85 |
| AVIF (qualidade 60) | 155 KB | ≈ JPG 85 |
Migrar do JPG para o WebP economiza cerca de 38% no peso da imagem, por imagem. Em uma página com 20 imagens de produto, isso representa uma economia potencial de megabytes a cada carregamento de página.
O Elemento <picture> para Melhoria Progressiva
Se você quiser servir AVIF com fallback para WebP e JPG como última alternativa:
<picture>
<source srcset="image.avif" type="image/avif" />
<source srcset="image.webp" type="image/webp" />
<img src="image.jpg" alt="Product photo" />
</picture>
Isso permite que navegadores modernos usem AVIF, navegadores modernos mais antigos usem WebP e navegadores legados recorram ao JPG — sem a necessidade de nenhum JavaScript.
E Quanto aos Core Web Vitals?
O Largest Contentful Paint (LCP) é uma das métricas de Core Web Vitals do Google e é fortemente influenciado pelo tempo de carregamento das imagens. Usar WebP ou AVIF para a sua imagem principal e fotos de produto pode melhorar diretamente sua pontuação de LCP, que é um sinal de ranqueamento do Google.
Dicas adicionais para imagens na web:
- Adicione os atributos
widtheheightpara evitar mudanças de layout (CLS) - Use
loading="lazy"para imagens abaixo da dobra - Use
fetchpriority="high"na sua imagem de LCP (geralmente a imagem principal)
Convertendo Suas Imagens
Você pode converter qualquer imagem para WebP, AVIF, PNG ou JPG usando o Conversor de Imagens do PicsSizer. Para otimização em lote, o Compressor de Imagens permite ajustar a configuração de qualidade para obter o menor arquivo possível sem degradação visível.
Resumo: Padrões Recomendados em 2026
- Fotografias na web → WebP (com fallback para JPG via
<picture>) - Logotipos e ícones → SVG (fallback raster: PNG)
- Capturas de tela e diagramas → WebP (com fallback para PNG)
- Compressão máxima, ativos estáticos → AVIF (com fallback para WebP)
- Modelos de e-mail legados → JPG ou PNG (clientes de e-mail não têm suporte a formatos modernos)
Perguntas frequentes
- Qual é o melhor formato de imagem para sites em 2026?
- O WebP é o melhor formato de uso geral para sites em 2026. Ele gera arquivos 25-35% menores que o JPG com qualidade equivalente, suporta transparência como o PNG e é totalmente compatível com todos os navegadores modernos. O AVIF é ainda mais eficiente, mas tem compatibilidade um pouco menos uniforme entre navegadores. Use SVG para ícones e logotipos.
- Devo converter as imagens do meu site para WebP?
- Sim. Converter imagens JPG e PNG para WebP pode reduzir o peso das imagens em 25-50% sem perda de qualidade visível. Imagens menores significam carregamento mais rápido das páginas, melhores pontuações nas Core Web Vitals e SEO aprimorado. Todos os principais navegadores já são compatíveis com WebP.
- O que é AVIF e ele é melhor que o WebP?
- O AVIF é um formato de imagem de nova geração derivado do codec de vídeo AV1. Ele alcança compressão 20-50% melhor que o WebP com a mesma qualidade. A compatibilidade com navegadores agora é excelente (Chrome, Firefox, Safari 16+, Edge). A desvantagem é o tempo de codificação mais lento, o que o torna mais indicado para imagens estáticas geradas previamente.
- Quando devo usar SVG em vez de formatos rasterizados?
- Use sempre SVG para logotipos, ícones, ilustrações e qualquer gráfico composto por formas geométricas. O SVG é independente de resolução (fica nítido em qualquer tamanho de tela), gera arquivos muito pequenos para gráficos simples e se adapta perfeitamente a qualquer dimensão. O SVG não é adequado para fotografias.
- O formato da imagem afeta o SEO?
- Sim, indiretamente. A velocidade de carregamento da página é um fator de ranqueamento do Google, e os formatos de imagem afetam diretamente o peso da sua página. Usar formatos modernos como WebP ou AVIF em vez de JPG/PNG pode melhorar as Core Web Vitals (especialmente o LCP), o que influencia seu posicionamento nos resultados de busca.