Os melhores formatos de imagem para a web em 2026

As imagens continuam a ser o elemento mais pesado na maioria das páginas web: normalmente ocupam mais bytes do que os teus scripts, tipos de letra e folhas de estilo juntos. Escolher o formato certo é a decisão de desempenho com maior impacto que podes tomar e, em 2026, a resposta finalmente estabilizou. A versão curta: recorre primeiro a AVIF, usa WebP como alternativa e mantém JPEG como rede de segurança universal. O PNG ainda tem o seu papel, mas mais reduzido do que a maioria supõe. Eis como convém pensar nisto.

A stack de imagem moderna num relance

Três formatos com perdas dominam agora o conteúdo fotográfico na web, por ordem decrescente de eficiência de compressão:

AVIF: derivado do codec de vídeo AV1, costuma produzir os ficheiros mais pequenos para uma dada qualidade visual, muitas vezes entre 30 e 50 % menores do que o JPEG e sensivelmente menores do que o WebP. Suporta ainda gama de cor ampla, HDR, transparência e modos com e sem perdas.
WebP: um formato da Google um pouco mais antigo que continua excelente: cerca de 25 a 35 % mais pequeno do que o JPEG, com suporte de transparência e animação. A sua maior vantagem hoje é a velocidade de codificação e um suporte de navegador sólido como uma rocha.
JPEG: tem quase 35 anos e suporte universal. É o teu recurso, não a tua primeira opção, mas será apresentado literalmente em todo o lado.

A boa notícia para 2026 é que isto já não é uma aposta. O AVIF é compatível com as versões atuais do Chrome, Edge, Firefox e Safari, e o WebP funciona há anos em todos os principais navegadores. Podes consultar a matriz de suporte em tempo real na referência de tipos de imagem da MDN, que regista a disponibilidade por navegador de cada formato.

AVIF ou WebP: qual deves escolher?

Se só puderes servir um formato moderno, a decisão costuma resumir-se a um equilíbrio entre o tamanho do ficheiro e o custo de codificação:

Escolhe AVIF quando os bytes são o mais importante: imagens hero grandes, portefólios de fotografia, tudo onde cada kilobyte conta para as tuas métricas de carregamento. Além disso, lida com gradientes suaves e céus com muito menos artefactos de bandas do que o JPEG.
Escolhe WebP quando precisares de uma codificação rápida e barata em grande escala, ou quando quiseres um único formato moderno com o maior alcance possível e um comportamento previsível. O WebP codifica muito mais depressa do que o AVIF, o que importa se estiveres a converter milhares de imagens.

Na verdade, não tens de escolher. A resposta certa para um site em produção é oferecer ambos e deixar o navegador escolher, que é precisamente para isso que serve o elemento <picture>. Podes experimentar ambos agora mesmo com o compressor de AVIF e o compressor de WebP da FileShrinking, comparar os tamanhos de saída lado a lado e decidir o que funciona melhor para o teu conteúdo. Tudo corre no teu navegador, por isso nada é enviado.

Servir o formato certo com <picture>

A forma mais limpa de entregar formatos modernos com um recurso é a negociação de conteúdo em HTML. O elemento <picture> permite-te listar fontes candidatas por ordem de prioridade; o navegador usa a primeira que entende e ignora as restantes:

Lista primeiro a tua fonte AVIF, já que o formato mais eficiente deve vencer quando estiver disponível.
Lista o WebP em segundo lugar, para apanhar qualquer navegador que não tenha AVIF mas suporte WebP.
Coloca um JPEG (ou PNG) simples na etiqueta <img> de fecho como recurso garantido, e para levar o teu texto alt, o width e o height.

Como o navegador só descarrega a única fonte que escolhe, isto dá-te o formato mais pequeno que cada visitante consegue apresentar sem nada de JavaScript nem deteção no servidor. Para o padrão de marcação completo, o guia de imagens adaptáveis da web.dev explica como combinar <picture> com srcset também para a troca de resolução.

Quando o PNG (e o SVG) ainda importam

Os formatos modernos com perdas foram concebidos para fotografias. São a ferramenta errada para gráficos planos, e o PNG ainda merece o seu lugar em alguns casos específicos:

Gráficos de contornos nítidos com poucas cores: logótipos, ícones, capturas de interface e diagramas. O PNG sem perdas mantém o texto e os contornos definidos, onde a compressão com perdas os esborrataria.
Capturas de ecrã com precisão de píxel que queiras reproduzir exatamente, byte a byte.
Masters de origem que vais voltar a editar mais tarde, já que o PNG é sem perdas e não acumula perda de geração.

Dito isto, para muitos destes trabalhos o SVG é ainda melhor: logótipos e ícones simples desenhados como vetores mantêm-se bem nítidos em qualquer tamanho e muitas vezes pesam menos do que um equivalente rasterizado. E quando precisares mesmo de um gráfico rasterizado com transparência na web, tanto o AVIF como o WebP suportam também um canal alfa, pelo que um WebP sem perdas pode muitas vezes superar o PNG no tamanho. Se tens um recurso no formato errado, o conversor de imagens pode trocá-lo sem voltar a enviar nada.

O peso das imagens e os Core Web Vitals

A escolha do formato não tem só a ver com faturas de largura de banda: afeta diretamente os Core Web Vitals da Google, que influenciam tanto a experiência do utilizador como o posicionamento nas pesquisas. A métrica mais ligada às imagens é o Largest Contentful Paint (LCP): numa página típica, o maior elemento é a imagem hero, por isso a rapidez com que essa imagem chega determina em grande medida a tua pontuação de LCP. O objetivo recomendado é um LCP abaixo de 2,5 segundos para a maioria das tuas visitas.

Algumas alavancas práticas, por ordem aproximada de impacto:

Reduz os bytes servindo AVIF ou WebP em vez de JPEG. Uma imagem LCP mais pequena chega mais cedo: esta é a maior melhoria individual.
Ajusta as imagens às suas dimensões de exibição. Enviar uma foto de 4000 px para um espaço de 800 px desperdiça a maior parte da transferência. Usa srcset para servir variantes de tamanho adequado.
Define sempre width e height (ou usa aspect-ratio em CSS) para que o navegador reserve espaço e evites o deslocamento da maquetação, o que protege a tua pontuação de CLS.
Evita o carregamento diferido da imagem LCP. Difere o carregamento das imagens abaixo da dobra, mas deixa a imagem hero carregar de imediato para que não seja atrasada.

A conclusão para 2026

Para o conteúdo fotográfico, usa AVIF por predefinição para obter os ficheiros mais pequenos, oferece WebP como alternativa rápida e amplamente compatível, e conserva um recurso em JPEG dentro de um elemento <picture> para que todos os navegadores recebam algo. Reserva o PNG para gráficos nítidos, capturas de ecrã e masters sem perdas, e usa SVG para logótipos e ícones sempre que puderes. Comprime antes de publicar, ajusta cada imagem ao seu espaço e os teus Core Web Vitals vão recompensar-te.

Queres pô-lo em prática? Converte e comprime as tuas imagens diretamente no teu navegador com as ferramentas de AVIF e WebP, ou muda de formato com o conversor de imagens: sem envios, sem contas e os teus ficheiros nunca saem do teu dispositivo.