Quel format est le meilleur pour enregistrer des images destinées aux sites Web; PNG ou SVG?

Réponses:

8

Je dirais PNG simplement parce qu'il semble être un format plus accepté que SVG.

Philip Regan
la source
3
Pour un SVG de qualité c'est mieux, mais en pratique la seule vraie solution est le PNG car le SVG n'est pas globalement supporté à cette date actuelle.
Littlemad
@Littlemad Le rendu et l'affichage de SVG est également plus lent que le simple blitting de l'image avec un PNG.
Mateen Ulhaq
1
@Littlemad Vous n'êtes pas obligé. Vous pouvez utiliser une solution de contournement VML pour IE <9, ou vous pouvez le pré-rendre sur le serveur, ou même utiliser une intégration basée sur flash qui le rend sur IE. Tous les navigateurs (au moins les principaux) prennent en charge SVG, seuls IE 6, 7 et 8 sont f * cking avec nous. Il suffit donc d'utiliser une solution de contournement qui n'est pas horrible, s'ils voient un pire site, c'est leur faute. C'est un peu comme SDTV vs HDTV ou DVD vs BluRay.
Camilo Martin
1
En 2014, cette réponse devrait plutôt être en faveur des SVG.
Hanna
1
2015 caniuse.com/#search=svg - essentiellement pas d'IE8
goodship11
18

La réponse simple ici est d'utiliser les deux.

Le fait que vous ayez nommé SVG en option signifie que nous pouvons exclure les graphiques photo comme cas d'utilisation prévu, car les SVG ne conviennent qu'aux graphiques au trait tels que les logos, les icônes et les illustrations de type clip art.

Si vous envisagez ce choix pour les graphiques photo, il n'y a pas de choix; PNG sera probablement toujours meilleur. Pour les graphiques où SVG est une option viable, SVG est la meilleure option avec un repli PNG / JPEG. PNG a de nombreux atouts, mais en termes d'évolutivité et de taille de fichier, il ne correspond souvent pas à SVG.

En utilisant l'un ou l'autre des moyens, vous devrez sacrifier la rétrocompatibilité ou l'amélioration progressive.

En les pesant les uns contre les autres, le PNG sera certainement pris en charge par plus de navigateurs que le SVG à l'heure actuelle, mais les résolutions des nouveaux appareils sont en constante augmentation, ce qui signifie que les PNG devront être servis sur la base d'une grande variété de résolutions différentes. (via Media Queries, JavaScript ou User Agent Sniffing) ou mis à l'échelle par les navigateurs, ce qui pourrait produire des résultats imparfaits.

En regardant ce que nous savons que l'avenir nous réserve; des résolutions toujours plus élevées, un support plus large et une utilisation plus large des SVG sur Internet; il est logique de construire pour ce qui s'en vient.

En général, les sites Web devraient être construits pour durer de nombreuses années; dans 5 ans, votre site Web magnifiquement rétrocompatible pourrait sembler étonnant pour les 2% d'internautes qui utilisent toujours d'anciens navigateurs, mais assez pauvres sur les navigateurs à jour avec des résolutions folles - c'est donc une pile de choix difficiles sur la façon de faire des compromis.


Vos options en novembre 2014

  1. PNG uniquement

    • Dans un souci de qualité, vous devrez servir au moins cinq versions différentes selon la taille et la résolution de l'écran - et c'est une estimation très conservatrice, vous pourriez vous retrouver avec 10 à 15 versions de la même image si vous vouliez être extrêmement approfondi. . Cela prend également un certain temps à mettre en œuvre.

    • Si vous choisissez de servir un seul graphique et que le navigateur le redimensionne, les résultats seront probablement moins que parfaits, et pourraient même être moches selon la quantité de mise à l'échelle.

    • Un grand nombre de requêtes multimédias pourraient alourdir inutilement le CSS et avoir un impact négatif sur les vitesses de chargement des pages.

    • Aura fière allure sur les anciens navigateurs et appareils, mais pas aussi bien sur les plus récents.

  2. SVG avec un seul remplacement PNG / JPEG / GIF

    • Vous pouvez utiliser des SVG partout et les faire revenir à un autre format pour les navigateurs qui ne prennent pas en charge les SVG. Le principal avantage est que vous n'avez besoin que d'un seul fichier pour toutes les différentes résolutions.

    • Si vous comprenez et acceptez que les utilisateurs de navigateurs obsolètes puissent vivre avec des graphiques à l'échelle imparfaite, vous n'auriez besoin que d'une autre version de chaque fichier au format PNG, JPEG ou GIF.

    • Cela prendrait un temps similaire à mettre en œuvre que les requêtes multimédias PNG uniquement - peut-être même moins, ce qui signifie qu'il serait probablement autour du même prix.

    • Aura fière allure sur tous les nouveaux appareils, avec des sacrifices faits sur les anciennes technologies.

  3. SVG avec plusieurs solutions de rechange PNG / JPEG / GIF en fonction de la résolution et de la taille de l'écran

    • Vous pouvez d'abord utiliser SVG, puis PNG dépendant de la résolution pour les navigateurs qui ne prennent pas en charge SVG. Ce serait l' option la plus complète, la plus rétrocompatible et la plus compatible, la plus cohérente et la plus coûteuse en temps.

    • Cela prendrait probablement autant de temps que 1 et 2 combinés, plus un petit supplément pour résoudre les problèmes.

    • Sera incroyable sur presque tous les appareils.


En résumé, je pense que cela dépend si vous recherchez une compatibilité ascendante ou une amélioration plus progressive, et combien de temps d' argent vous devez dépenser.

Dom
la source
1
Vous pourriez mentionner quelque chose au sujet de l' <picture>élément aidant avec différentes tailles d'image
Zach Saucier
15

SVG est évolutif, si vous avez un graphique vectoriel qui est un net avantage. Pour les graphiques en pixels, le PNG est meilleur. Un inconvénient est qu'Internet Explorer ne prend en charge SVG qu'avec la prochaine version 9 (avant avec plugin). Les navigateurs mobiles peuvent également avoir un support limité pour SVG.

EDIT : Comme le souligne ClemDesm, les anciennes versions d'IE ne prennent pas en charge le PNG entièrement transparent, car IE8 est pris en charge. Les fichiers PNG non transparents fonctionnent correctement. La réponse de Computerish a une excellente solution pour gérer les images vectorielles pour l'instant: conservez-les en SVG, mais exportez-les pour le Web en PNG. Je suis entièrement d'accord avec cette solution.

Mnementh
la source
-1 Svg il n'est toujours pas pris en charge au niveau mondial Je ne suggérerais pas l'utilisation si vous n'expliquez pas clairement où fonctionne et une alternative de repli dans le cas où cela ne fonctionne pas (le plus probable). Nous devons tenir compte des normes Web que nous essayons d'atteindre. Si le choix est pour le Web et pour PNG ou SVG, il doit toujours être PNG, jusqu'à ce que SVG soit pris en charge globalement par les navigateurs d'une génération plus ancienne. J'adorerais utiliser la perfection SVG, mais ce n'est pas encore une réalité.
Littlemad
Comme je l'ai écrit, IE n'a pas de support SVG (uniquement dans la future version 9 jusqu'à présent) et le navigateur mobile peut également manquer de support.
Mnementh
@Littlemad: le downvote est un peu exagéré car 1- la réponse nous dit qu'il n'est pas entièrement supporté (ok, pas tellement de détails mais, pourtant, il est dit et pas faux, ne mérite pas -1) 2- Canal alpha PNG n'est pas pris en charge dans IE6 et 7 non plus et pas un mot à ce sujet? :)
Shikiryu
@ClemDesm: Ah, bon indice, les anciens IE ne prennent pas complètement en charge les PNG transparents.
Mnementh
1
@Littlemad "n'est pas pris en charge dans de nombreux navigateurs récents" Cela semble être une conclusion erronée, car dans la référence liée, il n'y a qu'un seul navigateur, qui n'est pas capable de gérer SVG (IE8). Vous n'avez pas non plus besoin d'installer de plugins pour utiliser SVG (jamais vu cela, peut-être dans IE6). Ce que vous voyez en rouge sur la référence liée sont des parties de SVG, que vous n'utiliserez généralement pas (principalement des filtres ou d'autres effets). Les bases fonctionnent.
feeela
5

Utilisez certainement PNG pour un site Web. SVG n'est tout simplement pas suffisamment pris en charge et il a peu (voire pas) d'avantages significatifs par rapport à PNG pour une exportation aplatie. Cela dit, conservez toutes vos copies de travail en SVG.

Computerish
la source
1
Bonne solution pour conserver l'original en SVG et l'exporter en PNG pour le web. Si SVG est plus tard mieux supporté, vous pouvez le changer. Je recommanderais cette solution pour les images vectorielles.
Mnementh
2
"il a peu (voire pas) d'avantages significatifs par rapport à PNG" Comment manipulez-vous les PNG via CSS ou JavaScript? Comment les mettez-vous à l'échelle, sans perdre la résolution? Comment reliez-vous des parties d'une image (par exemple, un lien de pays sur une carte)? Les fichiers SVG sont généralement beaucoup plus petits que PNG (sauf pour les minuscules icônes).
feeela
3
SVG a beaucoup d'avantages sur PNG pour les illustrations vectorielles.
DA01
0

Je resterais avec PNG pour être du bon côté. SVG n'est toujours pas entièrement accepté par de nombreuses grandes sociétés Internet et navigateurs. Bien que les SVG soient évolutifs et soient des vecteurs, ils sont souvent inutiles, occupent plus d'espace et compliquent le site Web.

J'espère que cela a répondu à votre question :)

nicolos
la source
"prendre plus de place et trop compliquer"? Comment?
DA01 du
1
Je suis presque sûr que cela peut avoir un impact sur votre référencement car vos images peuvent ne pas apparaître sur Google et je ne suis pas sûr à 100%, mais il est souvent le cas que les SVG prennent plus de temps à charger
nicolos
2
Le temps de chargement est basé sur la taille du fichier, dont les SVG peuvent souvent être beaucoup plus petits. Et si la recherche d'images Google est importante pour le référencement de vos sites, oui, PNG pourrait être mieux, mais je pense que c'est plus une niche.
DA01
1
Ouais, je veux dire à la fin de la journée, il n'y a pas de bonne ou de mauvaise réponse. La taille du fichier dépend beaucoup de la complexité de votre image et oui votre choix dépend du cas d'utilisation. Je ne
faisais qu'énoncer
-1

Même si SVG n'est pas accepté à l'échelle mondiale et que certaines personnes ont un temps frustrant à mettre à l'échelle les fichiers PNG, j'ai toujours trouvé que la création d'une icône dans Adobe Illustrator fonctionne mieux pour augmenter ou réduire une quantité "raisonnable".

stancil21
la source
Adobe Illustrator autorise-t-il les fichiers pngs ou svg ou les deux ou quelle est la raison exacte pour nommer Illustrator ici? Et pourquoi pensez-vous que svg n'est pas globalement accepté?
Mensch