Os formatos de imagem explicados: PNG, JPG, GIF, WebP, SVG

Escolher o formato de imagem certo é uma das formas mais fáceis de deixar uma página mais rápida e nítida. Escolha errado e você fica com um logo borrado ou uma foto que pesa cinco vezes o que deveria. Aqui está em que cada formato comum é bom, para você casar o formato com a imagem.

As duas famílias

Primeiro, uma distinção que explica todo o resto. Os formatos raster (PNG, JPG, GIF, WebP) guardam uma grade de pixels, então borram ou pixelizam ao ampliar. Os formatos vetoriais (SVG) guardam formas como matemática, então permanecem nítidos como uma lâmina em qualquer tamanho. Fotos são sempre raster; logos e ícones ficam melhores como vetor.

Os formatos

JPG / JPEG

Compressão com perdas feita para fotografias. Tamanho excelente para conteúdo fotográfico, suportado em toda parte, mas sem transparência e com artefatos visíveis se comprimido demais. O padrão para fotos quando WebP não é opção.

PNG

Sem perdas, com transparência. Perfeito para logos, ícones, capturas de tela e qualquer coisa com bordas nítidas, texto ou cor chapada. Por ser sem perdas, fotografias salvas como PNG saem grandes.

GIF

Um formato antigo limitado a 256 cores, hoje usado quase só para animações simples. Para imagens estáticas é superado pelo PNG; para animação, formatos modernos (WebP animado ou vídeo) são menores e de maior qualidade.

WebP

Um formato moderno que faz tudo: com ou sem perdas, com transparência e animação. Costuma produzir arquivos 25–35% menores que JPG ou PNG com a mesma qualidade visual, e todo navegador atual o suporta. Para a maioria das imagens web hoje, WebP é o melhor padrão.

SVG

Gráficos vetoriais definidos como XML. Ideais para logos, ícones e ilustrações — infinitamente escaláveis, minúsculos para formas simples e estilizáveis com CSS. Não servem para fotografias.

Guia rápido de decisão

• Fotografia → WebP (ou JPG para máxima compatibilidade)
• Logo ou ícone → SVG (ou PNG se precisar de uma cópia raster)
• Captura de tela ou gráfico com texto → PNG (ou WebP)
• Precisa de transparência → PNG, WebP ou SVG
• Animação simples → WebP animado

Depois de escolher um formato, nosso guia de compressão de imagens cobre como reduzir o tamanho. Converta entre formatos com o conversor de SVG e o redimensionador de imagens, e encolha arquivos com o compressor de imagens — tudo no seu navegador.