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

Lorsque vous exportez / enregistrez des images avec un arrière-plan transparent destinées à des sites Web, dois-je les enregistrer au format PNG ou SVG? Pourquoi?

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

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.

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.

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.

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 :)

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".