SVG vs PNG vs JPG: prós e contras do formato de imagem

/2016-01-04 00:04:46/
Brilee
/Gráficos/

Quando se trata de criar imagens para a Web e outros fins digitais, quais formatos de arquivo oferecem o melhor resultado? Você precisa pensar em velocidade versus qualidade e escala de imagem. Então, o que você deve usar: SVG vs PNG vs JPG?

Houve um tempo em que você acabou de usar um JPG dimensionado para caber no espaço em 72 dpi e seguir em frente. Não mais. Telas de alta resolução, múltiplas viewports e a necessidade de ter um site rápido tornam o processo muito mais complexo. Vamos mergulhar nos prós e contras de cada um desses formatos!

SVG

O SVG é ótimo em qualquer tamanho e funciona para praticamente qualquer tipo de imagem que não seja uma foto.

SVG, ou Scalable Vector Graphics, é incrivelmente prático. É por isso que os designers o usam com mais frequência.

Como o SVG é um formato vetorial, eles ficam ótimos em qualquer tamanho e funcionam para praticamente qualquer tipo de imagem que não seja uma foto.

O SVG é um formato sem perdas - o que significa que não perde dados quando compactado - renderiza um número ilimitado de cores e é mais comumente usado para gráficos e logotipos na web e para projetos que serão visualizados na retina ou em outras telas de alta resolução.

Prós do SVG

O formato vetorial é renderizado bem em qualquer tamanho
Capacidade de criar renderizações SVG simples em um editor de código ou texto
Projete e exporte gráficos complexos do Adobe Illustrator ou Sketch
O texto SVG é acessível
SVGs são fáceis de estilizar e escrever
Os formatos SVG são suportados por navegadores modernos e são à prova de futuro
O formato é altamente compressível e leve
Bom para pesquisa devido ao formato baseado em texto
Suporta transparência
Permite imagens fixas ou animadas

Contras de SVG

Projetar SVGs pode ficar complicado
Não renderize em alguns navegadores degradados
Suporte limitado para clientes de email

Quer saber mais? Temos outros dois guias explicando mais sobre o SVG: O Guia Prático para Iniciantes em SVG e como (e por que) o SVG vai assumir o controle.

PNG

PNG oferece algo que um JPG não pode - transparência.

PNG, ou Portable Network Graphics, é um formato projetado para a Web que oferece algo que um JPG não pode - transparência. É por isso que o PNG tem sido tão popular por carregar elementos como logotipos nos designs de sites.

Existem dois tipos de PNGs - PNG-8 e PNG-24. O PNG-8 usa uma paleta de cores mais limitada, com apenas 256 cores, tem uma transparência um pouco melhor e exporta em tamanho pequeno. O PNG-24 usa uma paleta de cores ilimitada, mantém a transparência, mas exporta em um tamanho maior. Ambos os tipos PNG têm compactação sem perdas.

Embora os formatos PNG sejam semelhantes aos GIFs, eles não suportam animação. Esse formato é mais comumente usado para ícones, pequenas imagens estáticas ou qualquer imagem que precise de transparência.

Prós do PNG

Suporta transparência
Bom para imagens com texto
Os formatos PNG processam bem os logotipos
Inclui descrição de texto incorporada para mecanismos de pesquisa
PNG-8 tem tamanho de arquivo pequeno e é mais leve
Exportações sem bordas serrilhadas

Contras de PNG

O tamanho dos arquivos aumenta rapidamente para arquivos grandes, como imagens
Alguns clientes de email mais antigos têm problemas para processá-los
Sem animação
Os arquivos PNG-24 podem ficar grandes; não é tão bom para compartilhamento na web

JPEG

Sempre que uma foto é salva novamente e exportada como JPG, ela é degradada.

JPG, ou Joint Photographic Experts Group, ou JPEG, é provavelmente o formato de imagem mais conhecido. É a opção padrão para a maioria das gravações de imagem, pois permite fotos, graças a uma tela colorida praticamente ilimitada.

O JPG também oferece a capacidade de escolher como uma imagem compactada deve ser de 0% (compactação pesada) a 100% (sem compactação). A maioria dos designers opta por algo entre 60 e 70%. As imagens ainda parecem boas nesse nível de compactação, mas o tamanho dos arquivos é consideravelmente menor.

O JPG usa compactação com perdas e não mantém os dados originais durante a compactação. Sempre que uma foto é salva novamente e exportada como JPG, ela é degradada.

O formato JPG é mais comumente usado para imagens, fotografia e qualquer coisa com muita cor.

Profissionais de JPEG

Ótimo para alta cor e fotografia
Fácil de reduzir o tamanho dos arquivos
Renderiza consistentemente em clientes de email

Contras de JPEG

Sem transparência
Cria bordas irregulares para texto
Sem animação
Formato com perdas
Nenhum metadado automático para pesquisa deve incluir informações

Que formato você deve usar?

Agora que você sabe quais são as diferenças entre SVG e PNG e JPG, o que você deve usar?

Você pode fazer algumas perguntas para obter essa resposta.

Você precisa de um formato vetorial ou raster?
Vector: SVG
Varredura: JPG ou PNG

Você precisa de transparência?
Sim: SVG ou PNG
Não: JPG

Você está usando uma imagem colorida?
Sim: JPG ou PNG
Não: SVG

É uma foto grande?
Sim: JPG
Não: PNG

A imagem contém texto?
Sim: PNG
Não: JPG

A compactação sem perdas é importante para você?
Sim: SVG ou PNG
Não: JPG

Os gráficos precisam ser atualizados e reimplantados?
Sim: SVG
Não: PNG ou JPG

Você está usando animação?
Sim: SVG
Não: JPG ou PNG

Conclusão

Todos os três formatos de imagem - SVG, PNG e JPG - têm aplicativos práticos e abrangentes. Embora o SVG seja o formato mais recente e possa ser salvo no menor tamanho de arquivo, nem sempre é a melhor opção.

Pense em como você está usando imagens em seu projeto ao selecionar um tipo de arquivo para encontrar aquele que funcionará melhor para o que você está tentando realizar. Você pode até achar que os projetos incluem imagens que usam todos os três tipos de arquivos. (Na verdade, é bastante comum!)