Pour les néophytes, on a vite fait de s’arracher les cheveux avec les différents formats d’image pour son site web.
JPG, PNG, SVG… (on ne met pas les GIF dans la liste, il ne faut pas exagérer)
Lequel choisir ? Y’en a-t-il un meilleur qu’un autre ? 🤔
Et d’ailleurs, connaissez-vous leurs avantages et inconvénients ?
Allez hop, on vous propose de balayer tout ça au crible.
Faut-il utiliser du JPG ou du PNG sur son site web ?
Autant mettre fin de suite au suspens : se demander s’il faut utiliser du JPG ou du PNG, c’est comme se demander s’il faut utiliser un tournevis ou un marteau.
Oui, vous avez deviné : ça dépend.
Le JPG (ou JPEG, « Joint Photographic Experts Group », c’est la même chose) est, pour faire simple, une méthode de compression. Il dispose d’un gros avantage : permettre de réduire le poids des images en éliminant ses informations inutiles sans sacrifier sa qualité globale. Et quand on sait que la vitesse de chargement sur les sites web est aujourd’hui capitale, les JPG possèdent tout d’un coup un fort intérêt…
En résumé, dès que vous utilisez des photographies sur votre site, mieux vaut opter pour du JPG.
Le PNG (pour « Portable Network Graphics ») a été créé à l’origine pour remplacer le GIF (qui, lui, est un format propriétaire). Son principal intérêt, c’est de pouvoir gérer les fonds transparents.
Il est donc particulièrement utile pour des logos ou pour des graphiques, sans compter que les lignes offrent un rendu assez précis, peu pixellisé.
Il est donc courant que ces deux typologies de format cohabitent sur les pages web, car ils ne répondent pas au même objectif.
Et le SVG dans tout ça ?
Excellente question.
Le SVG (« Scalable Vector Graphics ») est un format d’images vectorielles ; on vous épargne les différents détails techniques, mais toujours est-il que, comme son nom l’indique, il permet de créer des images qui peuvent être agrandies à l’infini.
Et c’est d’ailleurs là l’un de ses principaux avantages, car au contraire des formats tels que le JPG ou le PNG, les images en SVG peuvent bénéficier d’agrandissements sans aucune perte de qualité !
Faites le test avec un logo en PNG : si vous le redimensionnez, il va être tout pixellisé… Ce qui n’est pas le cas du SVG.
Vous pourriez vous dire qu’une image en SVG doit posséder un sacré poids pour gérer ce format vectoriel. Mais c’est tout le contraire : les éléments en SVG sont des fichiers assez petits en taille, ce qui rend leur utilisation d’autant plus préconisée pour les sites web.
En plus de ça, il s’agit de fichiers facilement modifiables (une même image peut donc subir des traitements différents) ou manipulables via des animations ou des transformations en CSS (changement de taille, de couleur…).
Bref, en un mot comme en cent, le SVG possède d’indéniables qualités… Mais à l’exemple du JPG et du PNG, il a des champs applicatifs bien précis.
Ainsi, le SVG est particulièrement utile pour les logos, les icônes et, dans une plus large mesure, les graphiques simples. Dit autrement, vous devriez prendre l’habitude d’utiliser certains éléments en SVG plutôt qu’en PNG.
Mais dès lors qu’on utilise des images ou des photographies plus complexes… Il vaut mieux recourir au PNG ou au JPG ! 😉
Exemples de sites en SVG :
