WebP, AVIF, JPEG ou PNG: qual formato de imagem deixa o site mais rápido

Um site pode ter servidor rápido, código enxuto e hospedagem cara, mas continuar parecendo lento por causa de uma única imagem. A cena é comum: alguém baixa uma foto de 6.000 pixels, coloca direto no banner, ajusta a largura no CSS e acredita que o navegador vai entender o recado. Visualmente a imagem aparece com 900 pixels. Na rede, o visitante continua baixando o arquivo gigante.

Quando a página demora, a primeira reação costuma ser procurar plugin, cache, CDN ou plano de hospedagem. Às vezes tudo isso ajuda. Só que a solução mais barata estava no arquivo de quatro megabytes ocupando metade do carregamento.

Aí surge a pergunta que parece simples: devo usar WebP, AVIF, JPEG ou PNG? A resposta honesta é que o formato importa, mas não trabalha sozinho. Uma imagem AVIF com dimensões absurdas pode ser pior do que um JPEG bem redimensionado. Um PNG pode ser a escolha correta para um logotipo e uma péssima escolha para uma foto.

Neste guia eu vou comparar os formatos com olhar de usuário e de quem publica site, explicar onde cada um funciona melhor, mostrar como combinar AVIF e WebP com fallback, e montar um fluxo prático para reduzir o peso das páginas sem transformar toda fotografia numa aquarela borrada.

O maior erro acontece antes de escolher o formato

Imagine que a imagem será exibida com 800 pixels de largura. O arquivo original possui 5.000 pixels. Mesmo comprimida, ela carrega muito mais informação do que a página consegue mostrar.

Redimensionar para uma dimensão compatível com o layout costuma produzir um ganho enorme antes de qualquer conversão. Em telas de alta densidade, pode fazer sentido entregar uma versão um pouco maior, como 1.600 pixels para um espaço visual de 800. Entregar 5.000 continua sendo exagero na maior parte dos casos.

O formato decide como os pixels serão comprimidos. Ele não decide quantos pixels você precisava ter guardado.

JPEG: o veterano que ainda não morreu

JPEG continua muito usado porque é amplamente compatível e funciona bem para fotografias com muitas cores, luz, sombra e variações suaves. Ele usa compressão com perda, descartando detalhes que o algoritmo considera menos perceptíveis.

Quando a qualidade está bem ajustada, um JPEG pode parecer excelente. Quando a compressão é exagerada, surgem blocos, manchas em áreas de cor e contornos feios ao redor de objetos.

O formato ainda faz sentido em três situações:

• Você precisa de compatibilidade com sistemas muito antigos
• O arquivo será usado fora da web em programas que não aceitam formatos modernos
• O fluxo atual já produz JPEGs pequenos e visualmente bons

Para um site moderno, eu não usaria JPEG como única opção por hábito. Ele pode continuar como fallback ou arquivo de origem, enquanto o navegador recebe WebP ou AVIF.

PNG: perfeito para algumas coisas e pesado para outras

PNG usa compressão sem perda. Ele preserva os pixels com precisão e suporta transparência. Isso o torna ótimo para imagens com áreas chapadas, linhas nítidas e detalhes que não podem ganhar artefatos.

Casos clássicos:

• Capturas de tela com texto
• Interfaces e diagramas
• Logotipos que ainda não estão em SVG
• Imagens com transparência
• Elementos gráficos que precisam de bordas muito limpas

O problema é usar PNG para fotografia. Uma foto de paisagem que ficaria leve em JPEG, WebP ou AVIF pode crescer muito em PNG porque o formato tenta preservar cada variação.

Também existe um desperdício comum: salvar uma imagem sem transparência como PNG só porque o editor sugeriu. O site não recebe benefício visual e paga o custo em bytes.

WebP: o formato moderno mais fácil de adotar

WebP suporta compressão com perda, sem perda, transparência e animação. Na prática, ele consegue substituir muitos usos de JPEG, PNG e GIF com arquivos menores.

Seu maior ponto forte hoje é o equilíbrio. A compatibilidade em navegadores modernos é ampla, as ferramentas de conversão são abundantes e o tempo de codificação costuma ser razoável.

Para quem está começando a otimizar um site, WebP é a escolha mais segura como formato moderno principal. Você converte fotos e imagens transparentes sem precisar montar uma arquitetura complicada.

Isso não significa que todo WebP será menor. Uma configuração sem perda aplicada a uma fotografia pode criar arquivo maior do que um JPEG bem comprimido. O formato oferece possibilidades, mas ainda exige escolher modo e qualidade corretamente.

Onde WebP costuma funcionar melhor

• Imagens de posts e páginas
• Fotos de produtos
• Miniaturas
• Banners
• Imagens transparentes que não precisam permanecer em PNG
• Animações simples que substituiriam GIFs enormes

AVIF: compressão excelente, mas com um pouco mais de paciência

AVIF é baseado em tecnologia do codec de vídeo AV1 e foi pensado para comprimir imagens com grande eficiência. Ele suporta transparência, HDR e diferentes profundidades de cor.

Em muitas fotografias, AVIF consegue manter boa qualidade com arquivos menores do que JPEG e WebP. O ganho varia bastante conforme a imagem. Céu, pele, textura, ruído e ilustração respondem de formas diferentes.

O preço dessa eficiência costuma aparecer na criação do arquivo. Codificar AVIF pode levar mais tempo e algumas ferramentas oferecem controles menos intuitivos. Para quem processa uma imagem de vez em quando, isso não incomoda. Para um sistema que gera milhares de versões sob demanda, o custo precisa entrar na conta.

Outro ponto é que qualidade numérica não é comparável entre formatos. Um AVIF em qualidade 50 não equivale automaticamente a um WebP em 50 ou JPEG em 50. O valor é apenas uma posição dentro do codificador escolhido.

Onde AVIF brilha

• Fotografias grandes usadas em destaque
• Sites em que cada quilobyte importa
• Galerias e catálogos com muitas imagens
• Projetos que já possuem pipeline automático de conversão
• Imagens em que o teste visual mostrou vantagem real sobre WebP

WebP ou AVIF: qual eu escolheria

Se eu precisasse escolher um único formato moderno para colocar um projeto no ar hoje, escolheria WebP pela combinação de suporte, velocidade de conversão, simplicidade e resultado consistente.

Se o site já está organizado e eu quero espremer mais desempenho, adicionaria AVIF como primeira opção e manteria WebP como alternativa. O navegador escolhe o primeiro formato que entende.

A decisão não deveria ser ideológica. Faça um teste com dez imagens reais do seu projeto. Compare tamanho e qualidade no zoom normal, no celular e em áreas difíceis como cabelo, céu, texto e gradientes.

Algumas imagens ficam impressionantes em AVIF. Outras mostram artefatos antes do esperado e ficam melhores em WebP. A melhor política é automatizar o formato, mas revisar as imagens mais importantes.

E o SVG?

SVG não entra exatamente na mesma disputa porque é um formato vetorial. Em vez de guardar uma grade de pixels, ele descreve formas, curvas, textos e cores.

É excelente para:

• Logotipos
• Ícones
• Ilustrações geométricas
• Gráficos simples
• Elementos que precisam crescer sem perder nitidez

Uma marca em SVG pode continuar nítida do celular ao telão com arquivo pequeno. Transformar a mesma marca em PNG exige várias resoluções e ainda pode ficar borrada.

SVG não é a escolha natural para fotografia. Também precisa ser tratado com cuidado quando vem de fonte externa, porque pode conter elementos ativos. Em projetos próprios, exporte de ferramenta confiável e remova metadados desnecessários.

Como entregar AVIF, WebP e fallback sem duplicar o conteúdo

O elemento <picture> permite oferecer várias versões da mesma imagem. O navegador escolhe a primeira que suporta:

<picture>
  <source srcset="/img/capa.avif" type="image/avif">
  <source srcset="/img/capa.webp" type="image/webp">
  <img
    src="/img/capa.jpg"
    alt="Notebook exibindo uma página de tecnologia"
    width="1200"
    height="675"
  >
</picture>

O JPEG continua no src como fallback. Navegadores compatíveis baixam apenas a fonte escolhida, não todas as versões.

Esse padrão é útil quando você quer aproveitar AVIF sem abandonar visitantes de ambientes antigos. Também facilita uma adoção gradual: primeiro gere WebP, depois acrescente AVIF quando o processo estiver maduro.

Imagens responsivas economizam mais do que trocar extensão

Um celular não deveria baixar a mesma imagem entregue a um monitor grande. O atributo srcset oferece diferentes larguras, e o navegador escolhe a versão adequada conforme tela, densidade e espaço do layout.

<img
  src="/img/post-960.webp"
  srcset="
    /img/post-480.webp 480w,
    /img/post-960.webp 960w,
    /img/post-1600.webp 1600w
  "
  sizes="(max-width: 700px) 100vw, 960px"
  alt="Tela mostrando uma ferramenta de otimização de imagens"
  width="960"
  height="540"
>

A parte sizes informa quanto espaço a imagem deve ocupar. Sem essa pista, o navegador pode escolher um arquivo maior do que o necessário.

Na prática, gerar três larguras bem escolhidas costuma trazer mais resultado do que criar dez variações minúsculas. Um conjunto simples para celular, conteúdo padrão e telas grandes resolve a maioria dos blogs.

Lazy loading ajuda, mas não deve atrasar a imagem principal

O atributo loading="lazy" pede que o navegador adie imagens que estão fora da tela. Isso é ótimo para galerias, posts longos e blocos que o usuário talvez nem alcance.

<img
  src="/img/exemplo.webp"
  loading="lazy"
  alt="Comparação visual entre formatos de imagem"
  width="900"
  height="506"
>

O erro é aplicar lazy loading em tudo, inclusive na imagem principal visível no topo. Essa imagem pode participar da métrica de maior conteúdo visível da página. Se você manda o navegador esperar, ele obedece e o site parece mais lento.

Minha regra prática:

• Imagem principal acima da dobra: carregamento normal e prioridade adequada
• Imagens abaixo da primeira tela: lazy loading
• Ícones pequenos: prefira SVG, sprite ou solução equivalente
• Plano de fundo decorativo: verifique se realmente precisa existir no celular

Defina largura e altura para a página não ficar pulando

Quando o navegador não sabe a proporção da imagem antes do download, ele monta o texto e depois abre espaço quando o arquivo chega. O conteúdo pula. O usuário tenta tocar num botão e acerta outro elemento.

Informar width e height permite reservar o espaço correto. O CSS ainda pode tornar a imagem responsiva:

img {
  max-width: 100%;
  height: auto;
}

Os atributos representam a proporção original, enquanto o CSS ajusta o tamanho visual. É uma melhoria pequena no código e grande na sensação de estabilidade.

Qual qualidade usar

Não existe um número universal. A imagem, o codificador e o formato mudam o resultado. Mesmo assim, algumas práticas ajudam:

• Comece numa qualidade intermediária alta
• Reduza aos poucos e compare lado a lado
• Observe a imagem no tamanho em que será exibida
• Confira áreas com texto, rosto, fios, folhas e gradientes
• Evite recomprimir várias vezes o mesmo arquivo com perda
• Guarde o original em qualidade alta

Para fotografias de blog, muitas vezes é possível reduzir bastante sem diferença perceptível no uso normal. Para captura de tela com letras pequenas, a tolerância é menor. Um formato moderno não corrige uma configuração inadequada.

Nome do arquivo e texto alternativo ainda importam

Trocar IMG_4837.webp por comparacao-webp-avif.webp ajuda organização e oferece contexto. Não espere que o nome sozinho coloque a página no topo da busca, mas nomes descritivos são melhores do que códigos de câmera.

O atributo alt deve descrever a função ou o conteúdo relevante da imagem. Ele serve principalmente para acessibilidade e para situações em que o arquivo não carrega.

Evite encher o texto alternativo de palavras-chave repetidas. Uma boa descrição é direta:

alt="Comparação do tamanho de uma foto em JPEG, WebP e AVIF"

Se a imagem é puramente decorativa e não adiciona informação, um alt="" vazio pode ser apropriado para que leitores de tela a ignorem.

Um fluxo prático para imagens de posts

Este é o processo que eu usaria para publicar uma capa e imagens internas num site como o IATechNerds:

1. Escolher uma imagem com licença clara. Guardar o nome do autor e a página de origem
2. Cortar na proporção do layout. Evitar depender de recorte imprevisível no navegador
3. Redimensionar. Criar larguras adequadas para celular, conteúdo e tela grande
4. Gerar WebP. Usar como base moderna compatível
5. Gerar AVIF. Manter quando o ganho compensar e a qualidade estiver boa
6. Preservar fallback. JPEG para fotografia, PNG apenas quando necessário
7. Adicionar dimensões. Informar largura e altura no HTML
8. Usar lazy abaixo da dobra. Não atrasar a capa principal
9. Testar no celular. Rede rápida no computador esconde arquivos pesados
10. Medir a página real. Não confiar apenas no tamanho isolado da imagem

Ferramentas que processam no navegador são especialmente interessantes para esse trabalho porque permitem converter e redimensionar sem enviar fotografias privadas para um servidor. A área de ferramentas do IATechNerds segue justamente essa ideia de utilidades acessíveis, sem cadastro e com processamento local sempre que possível.

Erros que deixam o site pesado mesmo usando WebP

• Trocar a extensão sem converter. Renomear .jpg para .webp não muda o formato
• Usar uma única largura gigante. O celular continua baixando pixels que não mostra
• Aplicar qualidade máxima em tudo. O arquivo moderno pode continuar enorme
• Gerar miniaturas pelo CSS. Exibir pequeno não significa baixar pequeno
• Fazer lazy loading na capa. A principal imagem chega atrasada
• Esquecer cache. A mesma imagem é baixada novamente sem necessidade
• Usar PNG em fotografia. A transparência inexistente custa caro
• Não definir dimensões. A página pula durante o carregamento
• Comprimir o original repetidamente. A qualidade degrada a cada geração

Perguntas rápidas

WebP prejudica SEO?

Não por ser WebP. Imagens menores podem melhorar a experiência e o desempenho. O que importa é o arquivo estar acessível, possuir contexto adequado e ser entregue corretamente.

AVIF funciona em todos os lugares?

O suporte em navegadores modernos é amplo, mas sistemas antigos e algumas ferramentas externas podem não aceitar. O elemento <picture> com WebP e JPEG resolve esse cenário na web.

PNG sempre tem mais qualidade?

PNG preserva os dados sem perda, mas isso não significa que seja a melhor escolha visual ou prática. Para fotografia, um formato com perda bem configurado pode parecer igual no uso normal e ocupar muito menos.

Posso apagar os originais depois de converter?

Eu não apagaria. Guarde uma versão mestre em alta qualidade. Novos formatos, novos recortes e tamanhos futuros ficam muito melhores quando partem do original.

Quanto uma imagem deveria pesar?

Não existe um limite único. Uma miniatura deve ser bem menor do que uma capa de tela inteira. A meta é entregar a menor versão que mantenha qualidade no tamanho real, considerando o conjunto da página.

Meu veredito

WebP é o melhor ponto de partida para a maioria dos sites. AVIF entra como opção de compressão mais agressiva quando o ganho foi comprovado na imagem real. JPEG continua útil como fallback e arquivo de origem. PNG deve ficar reservado para transparência, interfaces e conteúdo que realmente precisa de compressão sem perda. SVG é a escolha natural para logotipos e ícones vetoriais.

Mas o formato sozinho não salva uma página. Redimensionar, usar imagens responsivas, evitar lazy loading na capa, definir dimensões e preservar qualidade visual fazem parte do mesmo trabalho.

A boa otimização é quase invisível. A pessoa não abre o site e pensa que aquela foto possui uma taxa de compressão excelente. Ela apenas sente que a página apareceu rápido, não pulou e continuou bonita.

É esse o objetivo. Não ganhar uma competição de arquivo minúsculo, mas remover espera sem remover qualidade.

Fontes técnicas para aprofundar

• web.dev: como escolher o formato correto de imagem
• web.dev: fundamentos do formato AVIF
• web.dev: fundamentos do formato WebP
• web.dev: desempenho de imagens
• MDN: uso do elemento picture