Introduction à l’image : Les formats d’images pour le web

Bien adapter ses formats et optimiser ses images pour le web, est très important. Plus un fichier est lourd, plus il met de temps à être chargé. Votre page risque d’en payer les conséquences. Vous devez fournir un site rapide et performant à votre utilisateur pour éviter qu’il ne quitte votre site précipitamment. Vous devez également avoir en tête que les moteurs de recherche prennent en compte la vitesse et pénalisent les sites lors de l’indexation dans les résultats de recherche. Il est donc essentiel pour vous de faire attention à la taille et au format des images que vous publiez sur votre site web. Les formats d’image ont tous leurs caractéristiques qui leur sont propres. Nous allons nous intéresser aux formats qui sont adaptés au web.

▶ JPEG (.JPG OU .JPEG)

Les images au format JPEG (Joint Photographic Expert Group) sont très répandues sur le Web. C’est un format d’image compressé pour des images de type photographie qui peut comporter 16 millions de couleurs. Le format utilise un principe de compression sans perte, si les pixels ont la même couleur. Il peut également utiliser une compression avec perte et un taux de qualité paramétrable pour les couleurs très proches. Ce format ne gère pas les animations, ni la transparence.

▶ PNG (.PNG)

Le format PNG (Portable Network Graphics) est le plus récent de tous. Il a été créé pour contourner la licence existante sur le format GIF. Le PNG permet d’enregistrer des photographies sans perte de qualité, mais avec une taille du fichier très supérieure au JPEG. Ce format gère la transparence, mais il ne gère pas les animations. Le PNG existe en deux versions :

▶ PNG 8 bits : 256 couleurs

▶ PNG 24 bits : 16 millions de couleurs (autant qu’une image JPEG)

▶ GIF (.GIF)

Les images au format GIF (Graphics Interchange Format) peuvent contenir un maximum de 256 couleurs, ce qui rend ce format peu adapté pour les photographies. Néanmoins, le GIF conserve un certain avantage, il donne la possibilité de stocker plusieurs images dans un seul fichier ce qui permet la création d’animation. Ce format gère la transparence et les animations.

▶ SVG

Le format SVG est adapté aux images vectorielles. Il ne permet pas d’afficher des images aussi complexes que les formats précédents, mais il permet d’afficher des images que l’on peut déformer sans aucune perte de qualité. Ce format gère la transparence.

▶ MP4

La vidéo est une succession d’images fixes, alors le MP4 a entièrement sa place dans notre liste. C’est un format vidéo idéal pour le web. Très léger, il est parfait pour publier vos vidéos sur votre site ou vos réseaux sociaux.

Quelques formats d’images web nouvelles générations. Ce sont des alternatives de formats dédiés au Web, ils sont plus adaptés que les formats que nous connaissons, mais ils ne sont pas supportés par tous les navigateurs. Pensez toujours à vérifier la compatibilité de ces nouveaux formats.

▶ WebP

Créé par Google en 2010, le format WEbP à pour objectif de réduire la taille des images. La taille obtenue avec une image WebP est environ 30 % plus petite que celle obtenue à partir d’un fichier PNG ou JPEG avec la même qualité d’image. Il faut cependant vérifier la compatibilité avec les navigateurs existants.

▶ JPEG 2000

Créé par le groupe de travail Joint Photographic Experts Group ce format est une évolution du format JPEG. La compression est supérieure à celle d’un fichier JPEG avec une qualité d’image égale. Ce format ne supporte pas la transparence.

▶ JPEG XR

Créé par Microsoft ce format est aussi une évolution du format JPEG avec une compression supérieure à celle d’un fichier JPEG et une qualité d’image égale. Ce format supporte la transparence.

Petite astuce : TinyPNG est un outil en ligne qui permet de compresser des fichiers JPEG et PNG pour réduire leur taille. TinyPNG réduit la taille du fichier de base, l’effet est presque invisible à l’œil nu, mais apporte une grande différence dans la taille du fichier final qui peut être réduit de plus de 70 %.

Les quatre formats que j'utilise au quotidien : JPEG, PNG, SVG et le WebP