As imagens representam aproximadamente 50 a 60% da transferência de dados de uma página web comum. Escolher o formato de imagem correto é uma das otimizações de maior impacto que você pode fazer para o desempenho da web. Aqui está uma análise prática de cada formato e quando usar cada um deles.
Os formatos que você deve conhecer
JPG (JPEG)
O formato JPG é o padrão para fotografias na web desde a década de 1990. Ele utiliza compressão com perda, otimizada para fotografias — gradientes de cores naturais, texturas e cenas complexas.
Ideal para: Fotografias em que WebP ou AVIF não são viáveis, ou quando é necessária compatibilidade com versões anteriores.
Pontos fracos: Tamanho maior que os formatos modernos, sem transparência, artefatos de compressão em qualidade inferior.
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 do usuário, imagens que precisam de transparência.
Pontos fracos: Muito maior que o formato JPG para fotografias, carregamento mais lento.
WebP
O formato WebP do Google oferece compressão com e sem perdas, suporta transparência e supera os formatos JPG e PNG. Atualmente, é o padrão recomendado para imagens na web.
Ideal para: Quase tudo — fotografias (substituir JPG), logotipos/gráficos (substituir PNG), imagens da web em geral.
Vantagem em relação ao tamanho do arquivo: 25 a 35% menor que o JPG com qualidade visual equivalente; semelhante ao PNG, mas geralmente menor.
Compatibilidade com 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 mais recente e popular. Ele oferece uma compressão melhor que o WebP — geralmente 20 a 50% menor com qualidade equivalente.
Ideal para: Imagens estáticas onde a compressão máxima é a prioridade e você controla o servidor/processo de compilação.
Pontos fracos: A codificação é mais lenta (não é ideal para geração em tempo real), versões mais antigas do navegador podem não ser compatíveis.
Navegadores compatíveis: Chrome 85+, Firefox 93+, Safari 16+, Edge 121+.
SVG
SVG é um formato vetorial — as imagens são descritas como caminhos matemáticos, não como pixels. Os arquivos SVG são independentes de resolução e geralmente são pequenos, ideais para logotipos e ícones.
Ideal para: Logotipos, ícones, ilustrações, gráficos, qualquer elemento gráfico que precise ser redimensionado para diferentes tamanhos.
Não recomendado para: Fotografias ou qualquer imagem com gradientes e texturas complexas.
Matriz de Formato vs. Caso de Uso
| Tipo de conteúdo | Melhor formato | Formato alternativo |
|---|---|---|
| Fotografia | AVIF | WebP → JPG |
| Foto do 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
Converter uma foto típica de produto para formatos modernos:
| Formato | Tamanho do arquivo | Qualidade |
|---|---|---|
| JPG (qualidade 85) | 340 KB | Linha de base |
| PNG | 1,2 MB | Sem perdas |
| WebP (qualidade 80) | 210 KB | ≈ JPG 85 |
| AVIF (qualidade 60) | 155 KB | ≈ JPG 85 |
A mudança de JPG para WebP economiza aproximadamente 38% no tamanho dos arquivos por imagem. Em uma página com 20 imagens de produtos, isso representa uma economia potencial de megabytes por carregamento de página.
O elemento <picture> para aprimoramento progressivo
Se você deseja servir AVIF com WebP como alternativa e JPG como alternativa final:
<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 JavaScript.
E quanto às Core Web Vitals?
Largest Contentful Paint (LCP) é uma das métricas Core Web Vitals do Google e é fortemente influenciada pelo tempo de carregamento da imagem. Usar WebP ou AVIF para sua imagem principal e fotos de produtos pode melhorar diretamente sua pontuação de LCP, que é um fator de classificação do Google.
Dicas adicionais para imagens na web:
- Adicione os atributos
width, , ,heightpara evitar alterações de layout (CLS) - Use
loading="lazy"para imagens abaixo da dobra. - Use
fetchpriority="high"na sua imagem 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 qualidade para obter o menor arquivo possível sem degradação visível.
Resumo: Configurações padrão recomendadas em 2026
- Fotografias na web → WebP (com fallback para JPG via
<picture>) - Logotipos e ícones → SVG (formato raster alternativo: PNG)
- Capturas de tela e diagramas → WebP (com opção alternativa em PNG)
- Compressão máxima, recursos estáticos → AVIF (com alternativa WebP)
- Modelos de e-mail legados → JPG ou PNG (sem suporte para formatos modernos em clientes de e-mail)
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 oferece tamanhos de arquivo 25 a 35% menores que o JPG com qualidade equivalente, suporta transparência como o PNG e tem suporte completo em todos os navegadores modernos. O AVIF é ainda mais eficiente, mas tem suporte um pouco menos consistente nos 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 tamanho do arquivo de imagem em 25 a 50%, sem perda visível de qualidade. Imagens menores significam carregamento de página mais rápido, melhores pontuações nos indicadores vitais da web (Core Web Vitals) e SEO aprimorado. Todos os principais navegadores agora são compatíveis com WebP.
- O que é AVIF e é melhor que WebP?
- AVIF é um formato de imagem de última geração derivado do codec de vídeo AV1. Ele alcança uma compressão 20-50% melhor que o WebP com a mesma qualidade. O suporte dos navegadores agora é excelente (Chrome, Firefox, Safari 16+, Edge). A desvantagem é um tempo de codificação mais lento, tornando-o mais adequado para imagens estáticas pré-geradas.
- Quando devo usar SVG em vez de formatos raster?
- Use sempre SVG para logotipos, ícones, ilustrações e qualquer elemento gráfico composto por formas geométricas. O SVG é independente de resolução (mantém a nitidez em qualquer tamanho de tela), possui arquivos de tamanho reduzido para gráficos simples e se adapta perfeitamente a qualquer dimensão. O SVG não é apropriado para fotografias.
- O formato da imagem afeta o SEO?
- Sim, indiretamente. A velocidade de carregamento da página é um fator de classificação do Google, e os formatos de imagem afetam diretamente o tamanho da sua página. Usar formatos modernos como WebP ou AVIF em vez de JPG/PNG pode melhorar os Core Web Vitals (especialmente o LCP), o que afeta seu posicionamento nos resultados de busca.