Quel format d’image pour vos contenus : GIF JPG PNG SVG ?

Le contenu de votre site doit être illustré si vous ne souhaitez pas voir vos visiteurs zapper vos articles à la vitesse lumière. En effet, aussi intéressant que soient vos textes, ils doivent être accompagnés d'illustrations afin d'aérer la lecture. Il serait dommage de la rendre plus monotone qu'elle ne devrait être. En format d'image, vous avez le choix : GIF JPG PNG SVG. Comment choisir quel format intégrer dans vos pages et pour quelles occasions ? Petit guide rapide.

GIF : le format des graphiques

GIF est pour Graphic Interchange Format. Il y a la version fixe et vous connaissez aussi la version animée. Dans tous les cas, chaque GIF contient une palette d'un maximum de 256 couleurs. C'est assez peu pour rendre toute une palette photographique. 256 couleurs, cela veut dire que seules quelques couleurs principales sont conservées. Toutes les nuances disparaîtront au profit de la couleur la plus approchante.

Pour cette raison évidente, le GIF n'est donc pas conseillé pour afficher une photographie. En particulier si elle est en couleurs avec énormément de nuances. Puisque dans ce cas, vous les perdriez.

Par contre, le GIF est tout indiqué pour des éléments ne contenant que peu de couleurs tels que des pictogrammes ou des graphiques où chaque détail sera rendu avec précision.

Vous avez aussi la version animée qui correspond à une suite d'images qui tournent en boucle (une boucle de généralement une poignée de secondes). Ce format étant très populaire pour illustrer par exemple, un état d'esprit, une humeur, ou la réaction à un événement particulier (le fameux "moi quand...").

JPG (ou JPEG) : le roi de la photo

Le format JPG peut embarquer des millions de couleurs. Pour cette raison, il est très utilisé en photo. Il y a de très fortes chances que votre appareil photo numérique enregistre les photos directement dans ce format.

De plus, il possède un paramètre de compression qui va de 0% (très forte compression) à 100% (aucune compression). Lorsque vous utilisez un logiciel de traitement d'images, lors d'une sauvegarde en JPG, il vous est probablement demandé de choisir la compression souhaitée. Une forte compression résulte en une image moins belle ou plutôt moins précise. La beauté est une affaire de goût ! Et un poids allégé, alors qu'une faible compression rendra une image plus précise. Et donc un poids plus conséquent.

PNG : le couteau suisse

Le format PNG (pour Portable Network Graphics) est apparu bien plus tard que le GIF ou le JPG, à la fin des années 90. Il a été créé en toute urgence pour remplacer le GIF qui embarque un algorithme de compression propriétaire. L'ayant-droit avait pour projet de demander avec raison des royalties.

C'est donc un format ouvert pour ne plus avoir le problème potentiel des royalties, mais également capable d'embarquer des millions de couleurs avec une compression sans perte. La contrepartie est que pour les photos, il est probable que leur poids soit plus important que la même image en JPG.

De plus, ce format est moins répandu que ses copains et pas forcément accepté par tous les logiciels et toutes les plateformes. Bien qu'aujourd'hui n'importe quel navigateur internet est normalement capable de le traiter correctement.

SVG : vecteur de possibilités

Le SVG (Scalable Vector Graphics) est un format bien différent des 3 autres. Puisqu'il s'agit comme son nom l'indique d'un format vectoriel. En gros, au lieu de contenir une suite de pixels, le format décrit des formes et des couleurs. Qu'elles soient basiques (carré, disque) ou carrément plus sophistiquées.

Cette définition est un texte formaté en XML, qu'il est donc possible de modifier à volonté avec n'importe quel éditeur de texte. Et, a fortiori, il est donc tout à fait possible de modifier un SVG facilement par programmation, en particulier en Javascript, ce qui est beaucoup plus compliqué avec les autres formats.

Puisque le SVG est une définition, nous venons de voir, il est donc un format sans perte et qu'il est possible de zoomer à l'infini sur une partie d'image sans jamais dégrader son apparence.

Ce format est donc tout indiqué pour les logos, les pictogrammes et bien évidemment, vous l'aurez deviné, tout ce qui est cartographie.

Conclusion

Nous venons de parcourir ensemble les formats graphiques les plus courants que l'on peut trouver sur le web. Pour vos illustrations, dans votre logiciel de traitement d'images ou de dessin préféré, lorsque vous faites "Enregistrer", il peut être difficile de choisir quel format choisir.

Voici une petite synthèse, qui nous l'espérons vous aidera à y voir plus clair. N'oubliez pas que même si l'ADSL, la fibre, la 4G sont désormais bien répandues, ceci n'empêche pas de bien travailler tout de même le poids des pages et en particulier des illustrations.

TypeCouleursDestination conseillée
GIFBitmap sans perte256Pictogrammes, graphiques, logos
Animation
JPGBitmap avec perteMillionsPhotos
PNGBitmap sans perte256 ou illimitéesDu pictogramme à la photo détaillée
SVGVectoriel sans perteIllimitéesLogos, graphiques, pictogrammes
Obtenir de nouveaux articles de blog par email: