A web tem mais formatos de imagem do que nunca — e isso é bom. Cada um foi feito para um trabalho diferente, e usar o certo deixa páginas muito mais leves sem ninguém perceber. Esta é a referência prática dos sete formatos que importam em 2026: JPG, PNG, WebP, AVIF, SVG, GIF e HEIC.
JPG / JPEG — O padrão das fotos
Lançado em 1992, segue como formato universal para fotografias. Compressão com perdas, cor 24 bits, sem transparência. Suporte 100 % nos navegadores. Para tom contínuo (fotos, gradientes) ainda é excelente, mas WebP e AVIF já vencem em tamanho com a mesma qualidade.
Use quando: precisa de máxima compatibilidade, envia fotos por e-mail ou exporta direto da câmera. Evite para: logos, capturas, bordas nítidas, qualquer coisa com transparência.
Leia também: JPG vs PNG: qual usar?
PNG — Sem perdas e com transparência
Criado em 1996 para substituir o GIF. Compressão sem perdas, transparência por canal alfa, ideal para gráficos. Custo: tamanho — uma foto em PNG normalmente pesa muito mais que a mesma em JPG.
Use quando: precisa de transparência, salva logos ou ícones, faz capturas ou trabalha com gráficos nítidos. Evite para: fotos em sites de produção — converta antes para WebP.
WebP — O padrão moderno pragmático
Desenvolvido pelo Google e estável desde 2010, é o formato que deve mover a maioria das imagens na web em 2026. Suporta compressão com e sem perdas, transparência e animação. Costuma pesar bem menos que PNG e cerca de 25 % menos que JPG na mesma qualidade. Suporte de navegadores 97 %+.
Use quando: está publicando na web. É a escolha mais segura como formato único em 2026. Evite para: anexos de e-mail (alguns clientes ainda têm problemas) e masters de arquivamento.
Leia também: PNG vs WebP: por que o WebP é o futuro
AVIF — Campeão de banda
Baseado no codec de vídeo AV1, é o menor entre os formatos modernos. Costuma vencer o WebP por mais de 20 % na mesma qualidade, suporta HDR e gama ampla, transparência e animação. Suporte 95 %+ em 2025. Pegadinha: codificação mais lenta e nem toda ferramenta de edição já o suporta.
Use quando: banda é cara (mobile, sites com muitas imagens). Sirva AVIF primeiro, WebP em seguida e JPG/PNG por último via <picture>. Evite para: fluxos internos que ainda não adotaram.
SVG — Vetorial, resolução infinita
SVG é diferente: é XML descrevendo formas, não uma grade de pixels. Logos, ícones, gráficos e ilustrações ficam nítidos em qualquer zoom. Bem feito é minúsculo. Pode ser estilizado com CSS e animado com JS.
Use quando: tem logos, ícones, infográficos ou ilustrações planas. Antes de publicar, passe pelo otimizador SVG. Evite para: fotografias (são pixels, não vetores).
GIF — Animações antigas
GIF é de 1987. Suporta animação, mas é estruturalmente ineficiente: paleta de 256 cores, arquivos grandes, sem áudio real. Em 2026, animações ficam quase sempre melhores em MP4, WebP animado ou AVIF animado.
Use quando: a plataforma destino (alguns apps de chat) só aceita GIF. Evite para: quase tudo em um site moderno sob seu controle.
Leia também: GIF vs MP4: qual usar?
HEIC / HEIF — O formato do iPhone
Padrão do iPhone desde o iOS 11. Pesa cerca da metade do JPG equivalente e suporta HDR e Live Photos. Lado ruim: suporte limitado em navegadores e pouca compatibilidade em desktop.
Use quando: tira fotos no iPhone e guarda no iCloud. Evite para: publicar na web. Converta para JPG ou WebP com nossa ferramenta HEIC → JPG.
Casos lado a lado
- Foto hero em landing → AVIF + WebP + JPG fallback via
<picture> - Logo no header → SVG (PNG fallback se necessário)
- Captura de UI em docs → WebP sem perdas (ou PNG para máxima compatibilidade)
- Foto de produto em e-commerce → AVIF + WebP, com lazy load
- Demo animada → MP4 (autoplay/muted/loop) — nunca GIF
- Assinatura de e-mail → JPG (compatibilidade) ou PNG com transparência
- Master do fotógrafo → RAW original + cópia JPG. PNG só para gráficos.
O padrão moderno com picture
O <picture> é seu aliado. Serve formatos modernos para navegadores modernos e degrada com elegância:
<picture>
<source srcset="/photo.avif" type="image/avif">
<source srcset="/photo.webp" type="image/webp">
<img src="/24picture/photo.jpg" alt="..." width="1600" height="1067" loading="lazy" decoding="async">
</picture>O navegador percorre a lista de cima para baixo e usa o primeiro formato que entende. O <img> final é o fallback universal.
Matriz rápida de decisão
- Foto, web → AVIF (com WebP/JPG fallback)
- Foto, arquivo → JPG alta qualidade
- Logo / ícone / ilustração → SVG
- Captura de UI → WebP sem perdas ou PNG
- Imagem transparente, web → WebP
- Animação → MP4 (ou WebP animado)
- Captura de iPhone → HEIC, converter para WebP/JPG na web
Ferramentas que você vai usar
- JPG → PNG para adicionar transparência
- PNG → WebP para enviar gráficos à web
- HEIC → JPG para fotos do iPhone
- Compressor para qualquer formato
- Otimizador SVG para logos e ícones
- Conversão em lote para pastas inteiras
Dica: padronize um formato de produção por tipo de ativo. Fotos → AVIF/WebP. Gráficos → SVG ou WebP sem perdas. Animações → MP4. O resto é fallback ou caso especial.
Conclusão
Formatos de imagem não são religião — são ferramentas. JPG e PNG carregam o passado, WebP e AVIF carregam o presente, SVG cobre tudo geométrico e GIF é praticamente história. Escolha o certo e suas páginas ficam rápidas, suas imagens nítidas e sua conta de banda baixa.
