Use o elemento HTML '<'picture> para servir formatos modernos com fallback automático — os browsers 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>
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description" loading="lazy">
</picture>
srcset para diferentes larguras de viewportloading="lazy" para imagens abaixo da dobraPara mais informações sobre otimização, consulte o nosso Guia de Otimização de Imagens.
AVIF oferece a melhor compressão (20-50% melhor que WebP, 50-80% melhor que JPEG) mas tem suporte de browser ligeiramente menor que WebP. WebP é suportado por todos os browsers 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 ecrã ou imagens com muito texto, (3) imagens com bordas nítidas como logótipos ou diagramas. Use JPEG para fotos onde alguns dados de cor podem ser descartados.
SVG é ideal para logótipos, ícones e ilustrações. Baseado em vetores, é nítido em qualquer resolução e tem tamanho de ficheiro 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 browsers selecionam automaticamente o formato suportado.