Qual formato é melhor para salvar imagens destinadas a sites; PNG ou SVG?

Respostas:

8

Eu diria PNG simplesmente pelo fato de parecer um formato mais aceito que o SVG.

Philip Regan
fonte
3
Para qualidade SVG, é melhor, mas, na prática, a única solução real é PNG, porque SVG não é globalmente suportado nesta data atual.
Littlemad
@Littlemad A renderização e a exibição de SVG também são mais lentas do que simplesmente misturar a imagem com um PNG.
Mateen Ulhaq
1
@ Littlemad Você não precisa. Você pode usar a solução alternativa em VML para o IE <9, ou pode pré-renderizá-la no servidor ou até mesmo usar uma incorporação baseada em flash que a renderize no IE. Todos os navegadores (pelo menos os principais) são compatíveis com SVG, apenas IE 6, 7 e 8 estão fodendo conosco. Portanto, basta usar qualquer solução alternativa que não seja horrível; se eles virem um site pior, a culpa é deles. É muito parecido com SDTV vs HDTV ou DVD vs BluRay.
Camilo Martin
1
Em 2014, essa resposta provavelmente deve ser a favor dos SVGs.
217 Hanna
1
2015 caniuse.com/#search=svg - basicamente apenas não IE8
goodship11
18

A resposta simples aqui é usar os dois.

O fato de você ter nomeado SVG como uma opção significa que podemos descartar os gráficos fotográficos como um caso de uso pretendido - porque os SVGs são bons apenas para gráficos de arte de linha, como logotipos, ícones e ilustrações semelhantes a clip-art.

Se você está considerando esta opção para gráficos fotográficos, não há opção; PNG provavelmente sempre será melhor. Para gráficos em que SVG é uma opção viável, SVG é a melhor opção com um fallback PNG / JPEG. O PNG tem muitos pontos fortes, mas na escalabilidade e no tamanho do arquivo, geralmente não corresponde ao SVG.

Usar apenas um ou outro significa que você terá que sacrificar a compatibilidade com versões anteriores ou o aprimoramento progressivo.

Pesando um contra o outro, o PNG certamente será suportado por mais navegadores que o SVG no momento atual, mas as resoluções de dispositivos recém-lançados aumentam para sempre, o que significa que os PNGs precisarão ser veiculados com base em uma ampla variedade de resoluções diferentes (por meio de consultas de mídia, JavaScript ou sniffing do agente do usuário) ou redimensionadas pelos navegadores, o que pode produzir resultados imperfeitos.

Olhando para o que sabemos que o futuro reserva; resoluções sempre mais altas, suporte mais amplo e uso mais amplo de SVGs na Internet; faz sentido construir para o que está por vir.

Em geral, os sites devem ser criados para durar muitos anos; daqui a cinco anos, seu site belamente compatível com versões anteriores pode parecer incrível para os 2% de usuários de Internet que ainda usam navegadores antigos, mas bastante ruim nos navegadores atualizados com resoluções malucas - portanto, é uma pilha de escolhas difíceis sobre como compromisso.

Suas opções em novembro de 2014

  1. Apenas PNGs

    • Por uma questão de qualidade, você precisará veicular pelo menos cinco versões diferentes, dependendo do tamanho da tela e das resoluções - e esse é um estimativa muito conservador, você pode acabar com 10 a 15 versões da mesma imagem se quiser ser extremamente completo . Isso também leva algum tempo para implementar.

    • Se você optar por veicular um único gráfico e fazer com que o navegador dimensione, os resultados provavelmente serão menos do que perfeitos e podem ser feios, dependendo da quantidade de dimensionamento.

    • Um grande número de consultas de mídia pode inchar desnecessariamente o CSS e afetar negativamente a velocidade de carregamento da página.

    • Ficará ótimo em navegadores e dispositivos mais antigos, mas não tão bom nos mais novos.

  2. SVGs com fallback PNG / JPEG / GIF único

    • Você pode usar SVGs em qualquer lugar e, em seguida, fazer o fallback para outro formato para navegadores que não suportam SVG. A principal vantagem é que você só precisa de um arquivo para todas as diferentes resoluções.

    • Se você comprometer e aceitar que os usuários em navegadores desatualizados possam viver com gráficos imperfeitamente dimensionados, você precisará apenas de uma outra versão de cada arquivo no formato PNG, JPEG ou GIF.

    • Isso levaria um tempo semelhante para ser implementado, pois as consultas de mídia somente PNG - possivelmente ainda menos, o que significa que provavelmente custaria o mesmo preço.

    • Ficará ótimo em todos os novos dispositivos, com sacrifícios sendo feitos em tecnologias mais antigas.

  3. SVG com vários fallbacks PNG / JPEG / GIF, dependendo da resolução e tamanho da tela

    • Primeiro, você pode veicular SVG e, em seguida, PNGs dependentes de resolução para navegadores que não suportam SVG. Essa seria a opção mais demorada , compatível com versões anteriores e anteriores, mais consistente e mais cara .

    • Provavelmente levaria tanto tempo quanto 1 e 2 combinados, além de um pouco mais para resolver os problemas.

    • Ficará incrível em quase todos os dispositivos.

Em resumo, eu acho que depende se você está procurando a compatibilidade mais para trás ou para valorização mais progressista, e quanto dinheiro o tempo que você tem para gastar.

Dom
fonte
1
Você pode mencionar algo sobre o <picture>elemento ajudando com vários tamanhos de imagem
Zach Saucier
15

O SVG é escalável, se você tiver um gráfico vetorial que é uma clara vantagem. Para gráficos de pixel PNG é melhor. Uma desvantagem é que o Internet Explorer suporta SVG apenas na próxima versão 9 (antes com o plugin). Os navegadores móveis também podem ter suporte limitado ao SVG.

EDIT : Como ClemDesm aponta, versões mais antigas do IE não suportam PNG totalmente transparente, já que o IE8 é suportado. PNGs não transparentes funcionam bem. A resposta do Computerish tem uma ótima solução para lidar com imagens vetoriais por enquanto: mantenha-as como SVG, mas exporte-as para a Web como PNG. Concordo plenamente com esta solução.

Mnementh
fonte
-1 Svg ainda não é suportado globalmente Eu não sugeriria o uso se você não explicasse claramente onde está trabalhando e uma alternativa alternativa no caso de não estar funcionando (provavelmente). Temos que considerar os padrões da web que estamos tentando alcançar. Se a opção for para Web e for PNG ou SVG, deve ser sempre PNG, até que o SVG seja globalmente suportado por navegadores de uma geração mais antiga. Eu adoraria usar a perfeição SVG, mas ainda não é uma realidade.
Littlemad
Como escrevi, o IE não tem suporte a SVG (apenas na versão 9 até agora futura) e o navegador móvel também pode não ter suporte.
Mnementh
@ Littleittle: o voto negativo é um pouco exagerado, já que 1 - a resposta nos diz que não é totalmente compatível (ok, não há muitos detalhes, mas, no entanto, é dito e não errado, não merece um -1) 2- PNG alpha channel também não é suportado no IE6 e 7 e nem uma palavra sobre isso? :)
Shikiryu
@ClemDesm: Ah, boa dica, os IEs mais antigos não suportam totalmente PNGs transparentes.
Mnementh
1
@Littlemad "não é suportado em muitos navegadores recentes" Essa parece ser uma conclusão incorreta, pois na referência vinculada, existe apenas um navegador que não é capaz de lidar com SVG (IE8). Você também não precisa instalar plugins para usar o SVG (nunca vi isso, talvez no IE6). O que você vê em vermelho na referência vinculada são partes do SVG, que você geralmente não usa (principalmente algum tipo de filtro ou outros efeitos). O básico funciona.
FeeJul
5

Definitivamente, use PNG para um site. O SVG simplesmente não é suficientemente suportado e possui poucos (se houver) benefícios significativos sobre o PNG para uma exportação nivelada. Dito isto, mantenha todas as suas cópias de trabalho em SVG.

Computerish
fonte
1
Boa solução para manter o original como SVG e exportá-lo para PNG para web. Se o SVG for mais tarde suportado, você poderá alterá-lo. Eu recomendaria essa solução para imagens vetoriais.
Mnementh
2
"possui poucos (se houver) benefícios significativos sobre o PNG" O quê? Como você manipula PNGs via CSS ou JavaScript? Como você os escala, sem perder a resolução? Como você vincula partes de uma imagem (por exemplo, um link de país em um mapa)? Arquivos SVG geralmente também são muito menores que PNG (exceto ícones minúsculos).
Fee
3
O SVG tem muitas vantagens sobre o PNG para ilustrações vetoriais.
DA01 19/07/11
0

Eu ficaria com PNG para estar no lado seguro. O SVG ainda não é totalmente aceito por muitas grandes empresas e navegadores da Internet. Embora os SVGs sejam escaláveis ​​e sejam vetores, muitas vezes são desnecessários, ocupam mais espaço e complicam demais o site.

Espero que tenha respondido sua pergunta :)

nicolos
fonte
"ocupar mais espaço e complicar demais"? Como assim?
DA01 30/10
1
Tenho certeza de que ele pode ter impacto na sua SEO como suas imagens podem não aparecer no Google e eu não estou 100% certo, mas é frequentemente o caso que SVGs demorar mais tempo para carregar
Nicolos
2
O tempo de carregamento é baseado no tamanho do arquivo, dos quais os SVGs geralmente podem ser muito menores. E se a pesquisa de imagens do google é importante para o SEO dos seus sites, sim, PNG pode ser melhor, mas acho que isso é mais um nicho.
DA01 30/10
1
Sim, quero dizer, no final do dia, não há resposta certa ou errada. O tamanho do arquivo depende muito da complexidade da sua imagem e, sim, sua escolha depende do caso de uso. Eu estava apenas indicando os prós e contras dos diferentes tipos de arquivo :)
Nicolos
-1

Embora o SVG não seja aceito globalmente e algumas pessoas tenham um tempo frustrante na escalação de PNGs, sempre achei que a criação de um ícone no Adobe Illustrator funciona melhor na escalada para cima ou para baixo em uma quantidade "razoável".

stancil21
fonte
O Adobe Illustrator permite pngs ou svg ou ambos ou qual o motivo exato para nomear Illustrator aqui? E por que você acha que o svg não é aceito globalmente?
Mensch 15/10