Accueil / Articles / Formats d’image pour le web : Comment allier qualité et rapidité ?

Formats d’image pour le web : Comment allier qualité et rapidité ?

Publié le 17 Mars 2025

Les images utilisées sur les sites web existent sous plusieurs formats, chacun ayant ses avantages et inconvénients. Dans cet article, nous allons passer en revue les formats d’images les plus couramment utilisés sur les sites internet.

Les formats dits “classiques”

Ces formats d’image matricielle se basent sur des pixels pour représenter une image.

Le format JPEG

Le Joint Photographic Experts Group (format JPEG) est l’un des formats les plus utilisés sur le web et en photographie numérique. Les travaux pour aboutir à ce format datent des années 1970-1980 pour une adoption définitive en 1992.

Ce format est conçu pour compresser les images en réduisant leur taille tout en maintenant une qualité correcte. La compression d’une image se fait avec perte des données de l’image.

Très répandu et largement utilisé à ce jour, ce format offre, en plus de la réduction de la taille, une prise en charge par l’immense majorité des navigateurs web, des logiciels et appareils. La qualité de l’image reste assez bonne à condition de ne pas trop forcer sur la compression (pas plus de 75 à 85%). Ce format est idéal pour les images contenant beaucoup de détails et/ou de nuances de couleurs.

En revanche, ce format d’image ne gère pas la transparence et n’est pas très adapté pour des images contenant du texte.

Le format PNG

Le Portable Network Graphics (format PNG) est un format d’image sans perte développé au milieu des années 1990 pour proposer une alternative au format GIF. Il s’agit d’un format largement utilisé dans le web qui, contrairement au JPEG, préserve chaque détail de l’image.

Ce format est idéal pour gérer la transparence sur des logos, des icônes, des illustrations, schémas, graphiques ou des images avec fond transparent. Le PNG prend en charge jusqu’à 16 millions de couleurs; en comparaison, le format GIF est limité à 256 couleurs.

En contrepartie, les fichiers PNG peuvent être lourds (en comparaison avec le JPEG) et ne gèrent pas les animations (comme c’est le cas sur le format GIF). Bien que le PNG puisse être utilisé sur des photos, on évite de l’utiliser pour des images complexes.

Le format GIF

Le Graphics Interchange Format (format GIF) est principalement utilisé pour des animations courtes avec des images simples avec peu de couleurs. Développé en 1987 par l’entreprise CompuServe, les fichiers GIF servaient au départ à afficher des images en couleurs sur des connexions à faible bande passante. Très populaire pour afficher des mèmes, des bannières ou des stickers, le GIF est très populaire également pour sa compression des images sans perte.

Le format GIF est compatible avec l’ensemble des navigateurs web et logiciels. Il offre d’excellentes performances pour des images simples et peut gérer une transparence partielle si elle reste simple (sans les ombres ou les flous).

Cependant, la palette des couleurs est limitée à 256 couleurs, ce qui en fait un mauvais candidat pour gérer des photos ou des images avec beaucoup de détails. Les GIF avec animation peuvent être assez volumineux en comparaison avec des formats plus récents comme le WebP par exemple.

Le format WebP

Le format WebP a été introduit par Google en 2010. Il réduit la taille des fichiers sans compromettre la qualité visuelle. Il peut être utilisé de plusieurs façons, en compression des images avec perte, en compression sans perte et pour des images animées en GIF.

Le format WebP offre une compression d’image très efficace. Les fichiers peuvent être jusqu’à 50% plus léger qu’un fichier JPEG ou PNG. La qualité des images est ajustable en choisissant l’option de compression avec ou sans perte et gère aussi la transparence. Il est un candidat idéal pour optimiser le chargement des pages web et améliorer son SEO.

Bien que ce format d’image soit très prometteur, il comporte quelques inconvénients. La compatibilité avec les navigateurs web n’est pas totale. Certains navigateurs comme Firefox ou Safari ne le gère que partiellement.

La puissance de calcul pour gérer la compression des fichiers est plus importante par rapport à des fichiers JPEG ou PNG. Pour des qualités d’images élevées, l’encodage peut être plus long.

Les formats vectoriels

Ces formats d’images se basent sur des formes et courbes mathématiques et sont plus adaptés pour des designs responsives.

Le format SVG

Le Scalable Vector Graphics (format SVG) est un format vectoriel créé en 1999 par le W3C et qui est basé sur l’interprétation d’un fichier XML. Le fichier XML va permettre de décrire des images en utilisant des formes géométriques, du texte et d’autres objets graphiques.

Contrairement aux formats d’images précédents (JPEG, PNG, WebP), le SVG stocke les images sous forme de formules mathématiques. L’avantage de ce procédé est de permettre à une image de s’adapter à n’importe quelle taille sans perte de qualité.

Comme il s’agit d’un format basé sur du texte, le SVG peut être édité avec un simple éditeur de texte et même être généré dynamiquement avec un langage de programmation (comme du Python, du Javascript, etc…). La taille des fichiers est en général très réduite car on ne stocke que des formules au lieu de stocker une grille de pixels. De plus le SVG est compressible, ce qui réduit encore plus la taille du fichier.

Le format SVG peut être stylisé avec du CSS comme on le ferait avec du HTML. Des animations sur les images peuvent aussi être réalisées. Il est également manipulable avec du Javascript.

Tous les navigateurs modernes prennent en charge ce format.

Les inconvénients du SVG vont se situer au niveau du type d’images utilisées et de la manipulation des fichiers. Pour des images trop complexes (avec beaucoup de formes et de détails) il n’est généralement pas recommandé d’utiliser le SVG, mais plutôt de s’orienter vers des formats comme le JPEG ou le PNG. Le fichier SVG d’une image trop complexe est souvent plus lourd que pour un format PNG par exemple.

Écrire un fichier SVG implique de manipuler du XML et demande certaines connaissances de base. Il existe aujourd’hui des logiciels qui permettent de créer des fichiers SVG très facilement comme Figma ou Adobe.

Les autres formats vectoriels

Il existe d’autres formats d’images vectoriels comme le AI (Adobe Illustrator) , le CDR ou le DXF, mais ils ne sont pas compatibles pour le web.

Les formats d’images modernes

Le format AVIF

Créé en 2019 par AOMedia, le AV1 Image File Format (format AVIF) est un format d’image compressé qui offre une meilleure qualité et un poid plus petit que les formats JPEG, PNG et WebP.

Basé sur le codec AV1 (Alliance for Open Media Video 1), il est conçu pour compresser efficacement les fichiers tout en conservant une haute qualité des images.

Un fichier AVIF peut être jusqu’à 50% plus léger qu’un JPEG et 30% plus léger qu’un fichier WebP, tout en ayant une qualité similaire voire meilleure en comparaison avec le WebP. Ce format est compatible avec la transparence et les animations.

L’AVIF supporte le HDR (High Dynamic Range). En pratique, cela se traduit par un affichage des images avec une précision et une plage de couleurs plus élevées en comparaison avec des formats JPEG ou PNG. En termes d’affichage et de qualité, c’est un format idéal et plus adapté aux écrans d'aujourd'hui.

Ce format très prometteur corrige une grande partie des problèmes rencontrés avec les formats vus précédemment. Toutefois, la compatibilité de l’AVIF reste encore limitée. Tous les navigateurs ne le prennent pas encore en charge. De même au niveau logiciel, certains visionneurs d’images ou logiciels d’éditions ne le supportent pas encore. A terme, ce format devrait être universellement adopté.

A noter également que le temps d’encodage d’un fichier AVIF est plus long que pour du JPEG ou du WebP.

Le format HEIF

Développé en 2015 par MPEG (Moving Picture Experts Group), le High Efficiency Image Format (format HEIF) permet de stocker des images en haute qualité avec une taille réduite. L’objectif de ce format est de remplacer le JPEG tout en ajoutant la gestion du HDR, de la transparence et des animations.

C’est un format très adapté pour l’affichage sur smartphone ou pour du stockage d’images. Un fichier HEIF peut stocker plusieurs images. C’est ce que l’on retrouve notamment sur les live photos d’Apple.

Comme pour l’AVIF, le format HEIF n’est pas encore universellement adopté. Bien que supporté par Apple, Android et Windows, le HEIF n’est pas encore supporté par tous les navigateurs web de manière native. De plus, HEIF exploite un codec breveté (le HEVC) et qui peut nécessiter des licences payantes pour être utilisé.

L’encodage des fichiers AVIF peut être assez long en fonction du fichiers et de la nature de l’image à traiter.

Quel format d'image choisir ?

Nous espérons que vous avez trouvé cette revue des formats d’imagé instructive. Pour le web en 2025, le WebP est un bon choix en termes de modernité, de fonctionnalité et de performances. L’AVIF et le HEIF plus récents sont en cours d'adoption et devraient prendre le relais à terme.

Conclusion

Nous espérons que vous en avez appris plus sur les formats d'image. Vous trouverez dans cette rubrique d'autres articles sur Docker et la conteneurisation ou les design patterns et plein de tutoriels dans la rubrique Tutoriels.