JPG vs PNG vs WebP vs SVG: qual formato de imagem você deve usar?

Escolha o formato de imagem errado e você encherá sua página com arquivos enormes ou acabará com gráficos borrados e pixelados. Escolha o caminho certo e seu site carrega mais rápido e fica mais nítido - de graça. Aqui está o detalhamento em inglês simples dos quatro formatos que você realmente usará e exatamente quando usar cada um.

JPG (JPEG): fotografias

JPG usa compactação com "perdas" — ela descarta detalhes que os olhos mal percebem para obter arquivos pequenos. Isso o torna perfeito para fotografias e imagens complexas com muitas cores e gradientes. A desvantagem: ele não oferece suporte à transparência e edições/re-salvamentos repetidos degradam a qualidade. Evite-o para textos, logotipos ou bordas nítidas, que podem ser desfocados e transformados em artefatos visíveis.

PNG: gráficos, logotipos e transparência

PNG usa compactação "sem perdas", portanto mantém cada pixel exato e suporta transparência. É a escolha certa para logotipos, ícones, capturas de tela e qualquer imagem com bordas nítidas ou texto. A desvantagem é o tamanho do arquivo: uma foto PNG pode ser várias vezes maior que o equivalente em JPG, portanto, não a use para fotografias.

WebP: o moderno versátil

O WebP, desenvolvido pelo Google, oferece compactação com e sem perdas e transparência — essencialmente o melhor de JPG e PNG em um formato, em um tamanho menor. A documentação WebP do Google relata uma economia de 25 a 35% em relação a JPGs e PNGs comparáveis. É compatível com todos os navegadores modernos, portanto, para a maioria dos sites, deve ser o padrão. Converta suas imagens existentes com JPG para WebP ou PNG para WebP — e se você precisar de um substituto, WebP para JPG o reverte.

SVG: logotipos, ícones e qualquer coisa que possa ser dimensionada

SVG é fundamentalmente diferente: em vez de pixels, ele armazena instruções vetoriais (linhas, curvas, formas) como código. Isso significa que ele pode ser dimensionado para qualquer tamanho – de um favicon a um outdoor – sem perda de qualidade e os arquivos são pequenos para gráficos simples. Use-o para logotipos, ícones e ilustrações. Não é adequado para fotografias. Elimine o excesso de SVGs exportados com nosso otimizador de SVG. O guia MDN para tipos de arquivos de imagem é a referência oficial se você quiser se aprofundar.

Guia de decisão rápida

• Foto em uma página da web? WebP (ou JPG como substituto).
• Logotipo ou ícone? SVG se você tiver o vetor; caso contrário, PNG.
• Precisa de transparência? WebP, PNG ou SVG, nunca JPG.
• Imprimir ou fazer download onde a compatibilidade é importante? JPG ou PNG.

Não se esqueça de otimizar

O formato é apenas metade da batalha. O tamanho também é importante. Seja qual for sua escolha, redimensione-o para as dimensões que ele realmente exibirá com o redimensionador de imagem e compacte-o com o compressor de imagem. Para ver o fluxo de trabalho completo, consulte nosso guia sobre otimização de imagens.

E quanto ao AVIF, o novo concorrente?

O WebP tem um rival mais recente: AVIF. Muitas vezes, ele compacta ainda menos que o WebP com a mesma qualidade, tornando-o atraente para sites de desempenho crítico. A desvantagem é um suporte um pouco menos universal e uma codificação mais lenta, embora a cobertura do navegador agora seja forte. Uma abordagem moderna comum é servir AVIF com um substituto WebP e um JPG/PNG como rede de segurança final – o navegador escolhe o melhor formato que suporta. Para a maioria dos sites hoje, o WebP continua sendo o padrão pragmático, sendo o AVIF um próximo passo que vale a pena.

Com perdas versus sem perdas: a principal compensação

Abaixo dos nomes dos formatos há uma decisão: com ou sem perdas. Com perdas (JPG e WebP/AVIF em modo com perdas) desperdiça dados que os olhos mal percebem, gerando arquivos minúsculos — perfeitos para fotos, errados para textos nítidos. Lossless (PNG, SVG e WebP no modo sem perdas) mantém cada pixel exato, essencial para logotipos, capturas de tela e gráficos com bordas nítidas. Corresponder essa escolha ao seu tipo de imagem é mais importante do que o rótulo de formato específico.

Não salve novamente imagens com perdas repetidamente

Um aviso prático: toda vez que você edita e salva novamente um JPG (ou qualquer formato com perdas), ele perde um pouco mais de qualidade — “perda de geração”, como fotocopiar uma fotocópia. Sempre mantenha um original, edite-o e exporte uma nova cópia, em vez de salvá-lo repetidamente no mesmo JPG. Para imagens que você editará com frequência, trabalhe em um formato sem perdas e exporte para com perdas apenas como etapa final. Em seguida, otimize com nosso compressor de imagens.

Resultado

WebP para fotos, SVG para logotipos e ícones, PNG quando você precisar de transparência sem perdas, JPG para compatibilidade máxima. Combine o formato com o conteúdo e você obterá imagens mais nítidas e páginas mais rápidas sem gastar nada.