svg vs jpg vs png
Bonjour tout le monde,
Je pensais à quelque chose tout à l'heure entre deux cafés, et j'ai longtemps cogité là dessus par la suite.
Que pensez vous des différents formats d'images à l'heure actuelle ? Et quand les utilisez vous ?
Bon on ne parle pas de la base ici, on sait que jpg = image/photo, png=transparence etc.
Mais par exemple, on a un pack d'icones, qu'on définit avec des background position (et donc des sprites), vous pencheriez plutôt pour du png ou du svg ?
Pour ma part, j'ai tendance à mettre du SVG un peu partout (motifs répétés, background en dégradé, icons, logo etc), et après divers tests (avec optimisation des images via photoshop, grunt etc), il s'avère que le .svg est un format très bien reconnu (malgre la viewbox qui me casse les c... coudes) et plus léger à charger, même en sprite, que le png
4 réponses
J'allais faire un roman mais on va la faire simple haha
JPG : pour tout ce qui est couleurs dépassant grosso modo 2^16 couleurs sans transparence. D'où les phrases "jpeg pour les photos" car les photos sont des représentation de la vie réel avec donc des millions de couleurs.
PNG : pour les images avec transparence MAIS AUSSI pour les images sans transparence avec peu de couleurs : motifs, fond dégradé, aplat d'image, dessin
il faut toujours se rappeler du rapport qualité / poids. Un dégradé en JPG pèsera souvent plus lourd que un dégradé en PNG, malgré qu'il n'y ai pas de transparence le PNG est mieux car il y aura souvent entre 256 couleurs et 2^16.
Technique simple, vérifier le poids et la qualité en JPG et PNG sur Photoshop en faisant : enregistrer pour le web. CTRL (ou cmd) + ALT + S
SVG : alors lui il est parfait pour du vectoriel autrement dit; des images censées pouvoir s'adapter à des tailles diverses, voilà pourquoi il est apprécié quand il s'agit de pack d’icônes, car une "loupe" sur mobile n'aura pas la même taille qu'une "loupe" sur iMac Retina de M** ... Oups je me suis emporté.
Il est aussi bien pour les illustrations, car pareil, une illustration est souvent pris pour de multiples usages : print, web, multimédia quoi, donc il doit être adaptables.
Pour savoir qui est le plus léger entre PNG et SVG je pense que cela dépendra beaucoup, non pas de couleurs, mais des formes dans l'image, car rappelons le :
le PNG est en ensemble de couleurs
le SVG est en ensemble de TRAITS / PATHS
Donc ça ne pèse pas le même poids en fonction de la complexité de l'image. Il n'y a pas de science exacte je dirais, il faut juste adapté au besoin, le SVG qui est de plus en plus compatible partout n'est pas TOUJOURS la meilleurs solutions, il faut voir les besoins du projets et bien éditer ses fichiers.
"some SVG editors may store metadata" - il ne faut pas négliger ça qui rends aussi le svg souvent plus lourd.
Le web devenant de plus en plus multi-support-device, je pense que le SVG va s'incruster de plus en plus en effet. Pour les icônes intéressé vous aussi au typo, ça se fait de plus en plus de mettre des icônes dans des typos pour justement ajuster la taille comme on veut, les typos sont plus ou moins fait en vectoriel aussi mais là c'est un autre sujet.
Voilà.
Je connais pas assez le svg pour te répondre mais forcément du coup j'aurais tendance à utiliser le png pour mes sprites.
Faudrait que je m'y mette du coup ce topic va m'interessé ! :)
some SVG editors may store metadata , en parlant de data, d'après toi/vous, est il interessant de convertir nos images (svg et png) en base64 ? Je ne parle même pas de jpg car la code généré fera 64k lignes de long
ça dépend des besoins, par exemple dans les newsletter c'est intéressant car comme les images s'affichent même si la personne n'a pas cliqué sur "afficher les images".
ça dépend si tu préfère une page à rallonge ou plus de requêtes, car mine de rien ça pèse en k.o les base64 de certaines images donc des fois c'est moins intéressant surtout que les images ça se charge en asynchrone plus ou moins. Dans site mobile par exemple ou une app mobile sur cordova ça peut être intéressant par exemple.
Personnellement j'évite car c'est illisible, j'utilise rarement des petites images. Je l'ai fait une fois pour un projet mais je sais plus pourquoi c'était important, je crois que c'était une bannière html et qu'il fallait limiter un max les requête, il fallait que tout tienne dans la page html : js, css, image, all inline quoi.