Escolher um formato de imagem costumava ser simples: JPEG para fotografias, PNG para gráficos, e estava feito. Hoje o cenário é mais subtil — e mais compensador. Os formatos modernos como o WebP e o AVIF podem reduzir o peso das imagens para metade ou menos, sem qualquer quebra visível de qualidade, o que melhora diretamente a velocidade das páginas, o desempenho nas pesquisas e a experiência de quem usa uma ligação lenta.
Este guia explica como funciona, na prática, cada formato de imagem principal para a web, onde cada um se destaca e como escolher com confiança. Foi escrito para qualquer pessoa que publique imagens na web — programadores, designers, profissionais de marketing e proprietários de lojas — e centra-se em decisões práticas em vez de teoria.
Comece Com Duas Perguntas
Quase todas as decisões sobre formato se resumem a duas propriedades da sua imagem.
**É uma fotografia ou um gráfico?** As fotografias (tons contínuos, gradientes, contornos suaves) comprimem-se bem com formatos *lossy*, que descartam detalhe que o olho mal nota. Os gráficos com contornos nítidos, cor uniforme e texto — logótipos, ícones, capturas de ecrã, gráficos estatísticos — precisam de compressão *lossless* ou de um formato vetorial para se manterem nítidos.
**Precisa de transparência ou animação?** Um logótipo colocado sobre fundos diferentes precisa de um canal alpha. Um pequeno clipe em ciclo precisa de suporte para animação. Estes requisitos incluem ou excluem formatos ainda antes de o tamanho do ficheiro sequer entrar na conversa.
Tenha estas duas respostas em mente enquanto percorremos os formatos.
Os Formatos de Imagem para a Web Num Relance
| Formato | Compressão | Transparência | Animação | Suporte dos browsers | Melhor para |
|---|---|---|---|---|---|
| JPEG (JPG) | Lossy | Não | Não | Universal | Fotografias onde a compatibilidade é importante |
| PNG | Lossless | Sim (alpha) | Não | Universal | Logótipos, ícones, capturas de ecrã, gráficos planos |
| WebP | Lossy + lossless | Sim (alpha) | Sim | Todos os browsers modernos | Uma escolha padrão moderna para fotos e gráficos |
| AVIF | Lossy + lossless | Sim (alpha) | Sim | A maioria dos browsers modernos | Máxima eficiência para fotos e imagens de destaque |
| SVG | Vetorial (lossless) | Sim | Sim | Universal | Logótipos, ícones, ilustrações que têm de escalar |
| GIF | Lossless, 256 cores | 1 bit | Sim | Universal | Animações simples antigas |
JPEG (JPG): O Formato Universal de Fotografia
O JPEG tem sido o formato fotográfico predefinido há três décadas, e a sua maior força é a compatibilidade universal. Todos os browsers, sistemas operativos, câmaras e ferramentas de edição o leem sem hesitar.
O JPEG usa compressão lossy: descarta o detalhe de alta frequência ao qual a visão humana é menos sensível e armazena o resto de forma compacta. Em definições de alta qualidade a perda é invisível; force a compressão demasiado e obtém artefactos em blocos e halos à volta dos contornos.
As suas limitações são tão importantes como o seu alcance. O JPEG não tem transparência, pelo que qualquer área transparente passa a ser um fundo sólido, e tem dificuldades com contornos nítidos e texto. Use o JPEG quando uma fotografia tem de abrir em qualquer lado sem risco de compatibilidade. Se tiver gráficos ou precisar de transparência, converta JPG para PNG em vez disso.
PNG: Quando Precisa de Transparência ou de Detalhe Perfeito ao Pixel
O PNG é lossless: reproduz cada pixel exatamente como foi guardado, sem artefactos de compressão. Isso torna-o a ferramenta certa para logótipos, ícones, capturas de ecrã, diagramas e qualquer gráfico com contornos nítidos ou grandes áreas de cor uniforme. Suporta também transparência alpha completa, pelo que as imagens assentam de forma limpa sobre qualquer fundo.
A contrapartida é o tamanho do ficheiro. Para fotografias, um PNG pode ser várias vezes maior do que um JPEG equivalente de alta qualidade. A regra prática é simples: PNG para gráficos e transparência, não para fotos. Quando um PNG fotográfico está a atrasar uma página, converta PNG para JPG ou, melhor para a web, converta PNG para WebP. Para uma análise mais aprofundada, veja JPG vs PNG.
WebP: A Escolha Padrão Moderna e Prática
O WebP, desenvolvido pela Google, é o formato pelo qual a maioria dos sites deve optar primeiro nos dias de hoje. Suporta compressão lossy e lossless, transparência alpha completa e animação — cobrindo quase todos os casos de uso num único formato. A Google indica que as imagens WebP lossy são tipicamente 25 a 34 por cento mais pequenas do que JPEG comparáveis, e o WebP lossless é normalmente cerca de 26 por cento mais pequeno do que o PNG.
O suporte já não é um obstáculo: o WebP funciona em todos os principais browsers atuais, incluindo o Safari desde a versão 14. Para a esmagadora maioria do público pode servir WebP diretamente, e é por isso que é uma escolha padrão sensata tanto para fotos como para gráficos. Para o adotar, converta JPG para WebP ou converta PNG para WebP. Para uma explicação mais completa, leia O Que É o WebP.
AVIF: O Mais Eficiente, Com Algumas Contrapartidas
O AVIF é o formato mainstream mais recente, construído sobre o codec de vídeo AV1 da Alliance for Open Media. É o campeão da eficiência: com qualidade visual comparável, os ficheiros AVIF têm frequentemente cerca de metade do tamanho do JPEG e são significativamente mais pequenos do que o WebP. Lida também com alta gama dinâmica (HDR), gamas de cor amplas, transparência e animação.
Há duas contrapartidas práticas. A codificação é mais lenta e exigente do que a do JPEG ou do WebP, o que é importante em grandes lotes. E embora o suporte seja agora alargado — Chrome, Firefox, Edge e Safari 16.4 e posteriores — continua ligeiramente atrás do WebP, pelo que ter uma alternativa de recurso é prudente. O AVIF brilha em grandes imagens de destaque e em páginas com muitas fotos, onde cada kilobyte conta. Experimente-o convertendo JPG para AVIF ou PNG para AVIF, e veja O Que É o AVIF para mais detalhes.
SVG: Para Tudo o Que Tem de Escalar
O SVG é fundamentalmente diferente: é um formato vetorial, que descreve formas com matemática em vez de uma grelha de pixels. Um SVG mantém-se perfeitamente nítido em qualquer tamanho, de um favicon a um outdoor, mantendo-se minúsculo para gráficos simples. É a escolha correta para logótipos, ícones e ilustrações construídas a partir de formas e linhas sólidas.
O SVG não é adequado para fotografias, que não têm geometria limpa para descrever. Mas para ícones de interface e elementos de marca, nada iguala a sua escalabilidade e nitidez. Saiba mais em O Que É um Ficheiro SVG.
Um Esquema de Decisão Simples
Quando estiver em dúvida, percorra estes pontos por ordem:
- **É um logótipo, ícone ou ilustração plana?** Use SVG.
- **É um gráfico ou captura de ecrã, ou precisa de transparência ou contornos perfeitos ao pixel?** Use PNG, ou WebP lossless para ficheiros mais pequenos.
- **É uma fotografia para um público moderno?** Use AVIF para o menor tamanho, WebP para o melhor equilíbrio entre tamanho e alcance.
- **Precisa de abrir literalmente em qualquer lado, incluindo software antigo?** Use JPEG.
- **É animado?** Use WebP ou, melhor ainda, um formato de vídeo real como o MP4 — não GIF.
Servir Formatos Modernos em Segurança
Não tem de escolher um único formato para todos. O elemento picture do HTML permite que o browser escolha o melhor formato que suporta: liste primeiro o AVIF, depois o WebP e por fim uma alternativa de recurso em JPEG ou PNG, e cada visitante descarrega apenas um ficheiro. Os browsers modernos recebem a versão eficiente e os mais antigos recebem uma alternativa garantida, sem necessidade de JavaScript.
Isto é importante para além da estética. As imagens são normalmente a maior parte de uma página, pelo que a escolha do formato tem um efeito direto no Largest Contentful Paint, um dos Core Web Vitals da Google, e, por conseguinte, tanto na experiência do utilizador como no desempenho nas pesquisas. Imagens mais pequenas e bem escolhidas são uma das melhorias de velocidade de maior alavancagem disponíveis.
Como Converter as Suas Imagens Existentes
Raramente precisa de voltar a exportar do zero. Para modernizar uma biblioteca existente, converta no local: JPG para WebP, PNG para WebP, JPG para AVIF, ou PNG para JPG para máxima compatibilidade. Guarde os seus originais de alta qualidade e gere os formatos modernos a partir deles conforme necessário.