Não existe um formato ideal para todo ativo: fotografia, logo e ilustração têm características diferentes.
Antes de começar
Agrupe fotos, capturas, gráficos, logos e animações e defina o que precisa continuar transparente ou vetorial.
Passo a passo
- Teste formatos adequados em arquivos representativos e mantenha uma alternativa que funcione no contexto publicado.
| Formato | Quando costuma servir | Verifique |
|---|---|---|
| AVIF | Fotografia e imagens complexas com compressão eficiente em navegadores compatíveis | Suporte real no público e custo de conversão; forneça alternativa se sua matriz de suporte exigir. |
| WebP | Fotos ou gráficos raster com ampla compatibilidade moderna; suporta transparência | Qualidade e peso do arquivo exportado. |
| JPEG | Fotografias e compatibilidade ampla sem transparência | Artefatos em texto, bordas e gradientes. |
| PNG | Capturas, gráficos com borda nítida e transparência raster | Arquivos podem ficar grandes para fotografias. |
| SVG | Logos e ilustrações vetoriais que precisam escalar | Otimize e sanitize SVG recebido de fonte não confiável. |
Essas são indicações para começar a comparação, não regras rígidas: o conteúdo do arquivo e navegadores-alvo determinam o resultado.
- Compare qualidade visual e bytes no tamanho real de exibição.
Limites e cuidados
A conversão pode degradar texto, transparência ou detalhes; verifique o resultado final. Compare as opções no mesmo ativo e tamanho de exibição, use <picture> quando precisar fornecer formatos alternativos e confira qual arquivo foi baixado em cada navegador-alvo. A matriz de suporte muda; consulte web.dev: formatos de imagem e verifique os navegadores usados pelo público.
Continue na biblioteca
Fonte oficial: Como escolher formatos de imagem — web.dev.
Serviços de desempenho
Veja o escopo e os próximos passos do serviço relacionado a este tema.
Conteúdo da biblioteca de Diego Henrich. Confira as fontes citadas e valide orientações que dependem da versão de uma plataforma ou serviço.