Preferências de cookies
Usamos cookies para análises. Política de Privacidade Você pode aceitar ou recusar rastreamento não essencial.
Guia prático sobre "Pipeline de compressão de imagem: JPEG para WebP e AVIF": etapas principais, erros comuns e implementação com Compressor de Imagens.
Vá para a ferramenta
Compacte imagens com controles do navegador e processamento em fila do servidor quando necessário.
Formatos de imagem modernos reduzem drasticamente o tamanho do arquivo sem perda visível de qualidade. Uma pipeline de compressão bem configurada pode reduzir seu payload de imagens em 50-70%, melhorando diretamente os tempos de carregamento da página e os Core Web Vitals.
| Formato | Economia típica vs JPEG | Suporte do Navegador | Melhor para |
|---|---|---|---|
| **JPEG** (qualidade 80) | Baseline | 100% | Fallback universal |
| **WebP** (qualidade 80) | 25-35% menor | 97%+ | Formato principal para a maioria dos sites |
| **AVIF** (qualidade 65) | 50% menor que JPEG | 92%+ | Compressão máxima, navegadores mais novos |
Exemplo do mundo real: uma imagem hero de 400KB em JPEG se torna ~280KB em WebP e ~200KB em AVIF -- sem diferença visível à distância normal de visualização.
Passo 1: Redimensione primeiro.
Nunca compacte uma imagem de 4000px quando ela será exibida em 800px. Redimensione para a largura máxima que será exibida. Para um post de blog com largura máxima de conteúdo de 800px, redimensione para 1600px (2x para retina).
Passo 2: Compacte para WebP.
Qualidade 80 é o ponto ideal para a maioria das fotos. Qualidade 75 economiza mais, mas pode mostrar artefatos em gradientes. Qualidade 85+ tem retornos decrescentes em economia.
Use Image Compressor para converter e compactar em um único passo.
Passo 3: Opcionalmente, gere AVIF.
AVIF na qualidade 65 corresponde visualmente ao WebP na qualidade 80, mas com um tamanho de arquivo significativamente menor. A codificação AVIF é mais lenta, então é melhor adequada para ativos estáticos que você gera no momento da compilação, não para transformações em tempo real.
Passo 4: Sirva com `<picture>` fallback.
<picture>
<source srcset="hero.avif" type="image/avif" />
<source srcset="hero.webp" type="image/webp" />
<img src="hero.jpg" alt="Product hero shot" width="1600" height="900" />
</picture>O navegador escolhe o primeiro formato que suporta: AVIF > WebP > JPEG. Todo usuário recebe o melhor formato que seu navegador suporta.
| Caso de Uso | JPEG | WebP | AVIF |
|---|---|---|---|
| Fotos, imagens hero | 80-85 | 78-82 | 60-68 |
| Fotos de produtos (detalhes importantes) | 85-90 | 82-88 | 68-75 |
| Miniaturas, pré-visualizações | 70-75 | 70-75 | 55-60 |
| Capturas de tela, imagens com muito texto | Use PNG | WebP sem perdas | AVIF sem perdas |
Para os Core Web Vitals, alinhe-se a esses máximos:
Compacte suas imagens agora com Image Compressor. Para a checklist completa de SEO, veja Checklist de SEO de Imagens para Core Web Vitals.
Este artigo é revisado pela equipe editorial da Tools Hub para garantir precisão, utilidade prática e consistência com os fluxos atuais do produto.
Última revisão:
Guia prático sobre "Lista de verificação de SEO de imagens para Core Web Vitals": etapas principais, erros comuns e implementação com Compressor de Imagens.
Otimizador SQL AI analisa consultas lentas e oferece sugestões de otimização, análise de plano de execução e recomendações de índices.
Estrutura de blog AI gera estruturas de artigos otimizadas para SEO, frameworks de thought leadership e guias passo a passo.
Conversor de PNG para AVIF: Use o conversor PNG para AVIF para reduzir a carga de imagem para UI, produtos e ativos de conteúdo, mantendo um fluxo de trabalho em lote repetível na fila.