JPG, PNG, SVG ou WEBP, quel format d'image choisir pour son site web ?
Publié le 28 avril 2023
Un site web, c'est principalement du texte et des images. Il existe de nombreux types de fichiers pour les images alors lequel choisir ? Suivez notre guide complet pour connaître les avantages et les inconvénients de chaque format.
Les images se divisent en deux catégories
Les images matricielles (ou image bitmap)
Parfois identifiés sous l'appellation Raster, ce sont des fichiers dont l'image est composée de points (pixels) organisés selon un modèle matriciel, c'est à dire sous forme d'un tableau à deux dimensions : Largeur x Hauteur. Les fichiers bitmap ont une taille fixe exprimée en pixels. Quelques formats populaires de fichiers images matriciels :
- Le format JPG (Joint Photographic Experts Group) est couramment utilisé pour les photographies numériques et les images en ligne. Il utilise une méthode de compression avec perte pour réduire le poids du fichier, c'est-à-dire qu'il va supprimer des informations plus ou moins perceptibles selon le niveau de compression. Très populaire, il permet de stocker des images en haute qualité, en occupant un espace de stockage relativement faible. Le format JPG est plus léger que le PNG.
- Le format TIFF (Tagged Image File Format) est utilisé pour stocker des images de Haute Qualité. Contrairement au format JPG, il utilise un protocole de compression sans perte, ce qui signifie que la qualité de l'image n'est pas altérée par la compression. Le poids des fichiers TIFF reste important et ce format n'est pas adapté à une utilisation web.
- Le format GIF (Graphics Interchange Format) est parfois utilisé pour créer des animations courtes et des graphiques simples sur le Web. Il peut contenir plusieurs images ou images clés qui s'affichent successivement pour créer l'animation (Gifs animés). Les fichiers GIF ont une palette limitée à 256 couleurs et peuvent apparaître pixélisés, ou de qualité inférieure, lorsqu'ils sont agrandis. Du fait d'un poids relativement faible, le format reste bien adapté au web.
- Le format PNG (Portable Network Graphics) a été conçu pour remplacer le format GIF en offrant une compression sans perte, une palette de couleurs élargie à 16,7 millions et la prise en charge de la transparence progressive. Ce format produit des images de qualité mais les fichiers sont assez volumineux.
- Le format WEBP a été développé par Google. C'est un format relativement récent spécialement conçu pour accélérer l'affichage des pages web. Il permet un niveau de compression plus important que le format JPG pour une qualité de rendu généralement meilleure.
Compresser les images Bitmap pour le web
Le format matriciel est adapté aux photos et aux images complexes. Il est important de définir les dimensions d'une image Bitmap en fonction de la place qu'elle occupe sur la page. En effet, il n'est pas nécessaire d'utiliser une grande photo de 1920 x 1280 pixels si celle-ci est placée dans un petit cadre de seulement 320 x 240 pixels. En adaptant la taille de l'image au cadre, on réduit forcément le poids final du fichier. Avec ou sans perte de qualité, il est aussi possible de compresser une image Bitmap de manière à réduire son poids et augmenter ainsi la vitesse de chargement de la page. D’une image de 3 Mo, on peut assez facilement obtenir un fichier beaucoup plus léger de 200 Ko seulement. Sur Photoshop, la fonction « Enregistrer pour le web » ouvre une fenêtre qui inclue tout un tas d'options prévues à cet effet. Les réglages permettent notamment de visualiser les effets de la compression sur la qualité et de définir le meilleur équilibre entre les deux. Des outils en lignes comme www.iloveimg.com proposent des fonctions similaires.
Les images vectorielles
Les formats vectoriels utilisent des courbes et des formules mathématiques pour représenter l'image. Les vecteurs peuvent être mis à l’échelle à l’infini et sans perte de qualité. Ils conviennent particulièrement bien à l'affichage de logos, pictogrammes, icônes et aux images composées de formes géométriques simples mais sont inadaptés à l'enregistrement de photos. Quelques formats populaires de fichiers images vectoriels :
- Le format SVG (Scalable Vector Graphics) est utilisé pour l'affichage de graphiques et d'illustrations 2D sur des sites web. Il s'agit d'un format codé en XML sur un système de balisage; en plus de pouvoir être ouvert avec un logiciel de dessin vectoriel, un fichier SVG est aussi modifiable avec un simple éditeur de texte et peut être stylisé grâce à une feuille de style CSS. Le poids des images SVG est très faible, c'est un format très intéressant pour le web.
- Le format PDF (Portable Document Format) a permis la standardisation des documents numériques. Il s'agit d'un format universel de document qui peut contenir du texte, des images matricielles ou vectorielles. Un document peut être partagé au format PDF sur un site internet mais ce n'est pas un fichier image à proprement parler.
- Le format EPS (Encapsulated PostScript) permet de stocker toutes les caractéristiques vectorielles d’une image pour les rendre
exploitables sur des logiciels spécialisés comme Illustrator, Indesign ou CorelDraw. C'est un format destiné à l'édition plutôt qu'à l'affichage sur le web.
Choisir une image bitmap ou vectorielle ?
Le choix du format se fait selon l'usage. Dans le domaine de l'impression (journaux, magazines, affiches, plaquettes commerciales...) on utilise surtout du vectoriel et tout particulièrement le format PDF. Il permet d'imprimer des affiches de grandes tailles, sans perte de qualité, notamment au niveau des textes: avec des textes vectorisés, les lettres conservent des contours nets et précis, quel que soit la taille du support. Dans le domaine du numérique et de la communication web, les critères sont différents :
- Le poids du fichier est un élément important. Une page web doit s'afficher rapidement pour être bien référencée et pour ne pas dégrader l'Expérience Utilisateur (UX). Toutes les ressources qui composent la page d'un site internet doivent être optimisées et compressées, y compris les images.
- La qualité de l'image peut être réduite pour garantir une certaine vitesse de chargement. Contrairement au domaine du Print (impression) qui nécessite des images hautes définitions, le web recherche un équilibre entre vitesse de chargement et qualité de rendu.
- La nature de l'image permet d'orienter son choix. Si il s'agit d'un graphique ou d'une illustration composée de formes géométriques, le format vectoriel est de mise. Pour afficher une photo, opter plutôt pour du matriciel.
| Format | Logo/ Picto | Photo | Animation | Graphique |
|---|---|---|---|---|
| JPG | ★ (1/3) | ★★★ (3/3) | Pas adapté | ★★ (2/3) |
| TIF | ★ (1/3) | ★ (1/3) | Pas adapté | ★ (1/3) |
| GIF | ★★ (2/3) | ★ (1/3) | ★★ (2/3) | ★★ (2/3) |
| WEBP | ★★ (2/3) | ★★★ (3/3) | ★★ (2/3) | ★★ (2/3) |
| SVG | ★★★ (3/3) | Pas adapté | ★ (1/3) | ★★★ (3/3) |
| Pas adapté | Pas adapté | Pas adapté | Pas adapté | |
| EPS | Pas adapté | Pas adapté | Pas adapté | Pas adapté |
Conclusion
De manière générale, on utilise le format Bitmap pour les photos et des images vectorielles pour afficher des icônes, des logos ou des illustrations géométriques.
Pour les photos, le format JPG offre une excellente compatibilité avec l'ensemble des navigateurs web et des capacités de compression intéressantes. Pour optimiser la vitesse d'affichage des pages et disposer de meilleures performances SEO, le nouveau format WEBP préconisé par Google peut être utilisé.
Pour afficher un logo ou un pictogramme, c'est le format SVG qui offre les meilleurs résultats. Malgré un poids très faible, il garantit un affichage parfait dans toutes les résolutions.
Pour afficher de petites animations, le format GIF offre le meilleur rapport poids/qualité.