Compare diferentes formatos de imagem e escolha o melhor para o seu projeto.
Use o elemento HTML '<'picture> para servir formatos modernos com fallback automático — os navegadores escolhem o primeiro formato que suportam:
<picture> <!-- Best compression (AVIF) — ~95% browser support --> <source srcset="image.avif" type="image/avif" /> <!-- Excellent fallback (WebP) — ~97% browser support --> <source srcset="image.webp" type="image/webp" /> <!-- Universal fallback (JPEG) — 100% support --> <img src="image.jpg" alt="Product photo" width="800" height="600" /> </picture>
AVIF oferece a melhor compressão (20-50% melhor que WebP, 50-80% melhor que JPEG) mas tem suporte de navegador ligeiramente menor que WebP. WebP é suportado por todos os navegadores modernos (95%+ globalmente). Use o elemento '<'picture> com AVIF como fonte principal, WebP como fallback e JPEG/PNG como fallback final.
Use PNG quando precisar de: (1) transparência/canal alfa, (2) qualidade sem perdas para capturas de tela ou imagens com muito texto, (3) imagens com bordas nítidas como logos ou diagramas. Use JPEG para fotos onde alguns dados de cor podem ser descartados.
SVG é ideal para logos, ícones e ilustrações. Baseado em vetores, é nítido em qualquer resolução e tem tamanho de arquivo pequeno. Se SVG não for possível, use WebP ou PNG com transparência.
Use o elemento <picture>: primeiro <source type='image/avif'>, depois WebP e finalmente JPEG/PNG como elemento <img>. Os navegadores selecionam automaticamente o formato suportado.