Choisir un format d'image était autrefois une affaire simple : JPEG pour les photos, PNG pour les graphiques, point final. Aujourd'hui, le tableau est plus nuancé — et plus gratifiant. Les formats modernes comme WebP et AVIF peuvent réduire le poids d'une image de moitié ou plus sans aucune perte de qualité visible, ce qui améliore directement la vitesse des pages, les performances de référencement et l'expérience de tous ceux qui naviguent avec une connexion lente.
Ce guide explique comment fonctionne réellement chaque grand format d'image web, où chacun excelle et comment choisir en toute confiance. Il s'adresse à toute personne qui publie des images sur le web — développeurs, designers, responsables marketing et e-commerçants — et se concentre sur des décisions concrètes plutôt que sur la théorie.
Commencez par deux questions
Presque chaque décision de format se résume à deux propriétés de votre image.
**S'agit-il d'une photographie ou d'un graphique ?** Les photographies (tons continus, dégradés, contours doux) se compressent bien avec les formats *avec perte* qui suppriment les détails que l'œil remarque à peine. Les graphiques aux contours nets, aux aplats de couleur et au texte — logos, icônes, captures d'écran, graphiques — ont besoin d'une compression *sans perte* ou d'un format vectoriel pour rester nets.
**Avez-vous besoin de transparence ou d'animation ?** Un logo placé sur différents arrière-plans a besoin d'un canal alpha. Un court clip en boucle a besoin de la prise en charge de l'animation. Ces exigences éliminent ou retiennent certains formats avant même que la taille de fichier n'entre en jeu.
Gardez ces deux réponses à l'esprit tout au long de notre passage en revue des formats.
Les formats d'image web en un coup d'œil
| Format | Compression | Transparence | Animation | Prise en charge des navigateurs | Idéal pour |
|---|---|---|---|---|---|
| JPEG (JPG) | Avec perte | Non | Non | Universelle | Les photographies lorsque la compatibilité compte |
| PNG | Sans perte | Oui (alpha) | Non | Universelle | Logos, icônes, captures d'écran, graphiques en aplat |
| WebP | Avec et sans perte | Oui (alpha) | Oui | Tous les navigateurs modernes | Un choix par défaut moderne pour photos et graphiques |
| AVIF | Avec et sans perte | Oui (alpha) | Oui | La plupart des navigateurs modernes | Efficacité maximale pour photos et images d'en-tête |
| SVG | Vectorielle (sans perte) | Oui | Oui | Universelle | Logos, icônes, illustrations qui doivent rester nettes à toute taille |
| GIF | Sans perte, 256 couleurs | 1 bit | Oui | Universelle | Animations simples héritées du passé |
JPEG (JPG) : le format photo universel
Le JPEG est le format photographique par défaut depuis trois décennies, et sa plus grande force est sa compatibilité universelle. Tous les navigateurs, systèmes d'exploitation, appareils photo et outils d'édition le lisent sans broncher.
Le JPEG utilise une compression avec perte : il supprime les détails à haute fréquence auxquels la vision humaine est la moins sensible, et stocke le reste de manière compacte. Avec des réglages de qualité élevés, la perte est invisible ; poussez la compression trop loin et vous obtenez des artefacts en blocs et des halos autour des contours.
Ses limites comptent autant que sa portée. Le JPEG ne gère pas la transparence, donc toute zone transparente devient un arrière-plan opaque, et il peine avec les contours nets et le texte. Utilisez le JPEG lorsqu'une photographie doit s'ouvrir partout sans aucun risque de compatibilité. Si vous avez des graphiques ou besoin de transparence, convertissez plutôt le JPG en PNG.
PNG : quand vous avez besoin de transparence ou d'un détail au pixel près
Le PNG est sans perte : il reproduit chaque pixel exactement tel qu'il a été enregistré, sans aucun artefact de compression. Cela en fait l'outil idéal pour les logos, icônes, captures d'écran, schémas et tout graphique aux contours nets ou comportant de grandes zones de couleur en aplat. Il prend aussi en charge la transparence alpha complète, de sorte que les images se posent proprement sur n'importe quel arrière-plan.
La contrepartie, c'est la taille de fichier. Pour les photographies, un PNG peut être plusieurs fois plus volumineux qu'un JPEG haute qualité équivalent. La règle de base est simple : PNG pour les graphiques et la transparence, pas pour les photos. Lorsqu'une photo en PNG ralentit une page, convertissez le PNG en JPG ou, encore mieux pour le web, convertissez le PNG en WebP. Pour aller plus loin, consultez JPG vs PNG.
WebP : le choix par défaut moderne et pratique
Le WebP, développé par Google, est le format vers lequel la plupart des sites devraient se tourner en premier aujourd'hui. Il prend en charge la compression avec et sans perte, la transparence alpha complète et l'animation — couvrant presque tous les cas d'usage dans un seul format. Google rapporte que les images WebP avec perte sont généralement 25 à 34 pour cent plus légères que des JPEG comparables, et que le WebP sans perte est habituellement environ 26 pour cent plus léger que le PNG.
La prise en charge n'est plus un obstacle : le WebP fonctionne dans tous les principaux navigateurs actuels, y compris Safari depuis la version 14. Pour l'immense majorité des audiences, vous pouvez servir directement du WebP, ce qui en fait un choix par défaut judicieux pour les photos comme pour les graphiques. Pour l'adopter, convertissez le JPG en WebP ou le PNG en WebP. Pour une explication plus complète, lisez Qu'est-ce que le WebP.
AVIF : le plus efficace, avec quelques compromis
L'AVIF est le format grand public le plus récent, bâti sur le codec vidéo AV1 de l'Alliance for Open Media. C'est le champion de l'efficacité : à qualité visuelle comparable, les fichiers AVIF font souvent environ la moitié de la taille d'un JPEG et sont nettement plus légers que le WebP. Il gère aussi la plage dynamique étendue (HDR), les gamuts de couleurs larges, la transparence et l'animation.
Il existe deux compromis concrets. L'encodage est plus lent et plus exigeant qu'avec le JPEG ou le WebP, ce qui compte pour les gros lots. Et bien que la prise en charge soit désormais large — Chrome, Firefox, Edge, ainsi que Safari 16.4 et versions ultérieures — elle reste légèrement en retrait par rapport au WebP, il est donc sage de prévoir une solution de repli. L'AVIF brille pour les grandes images d'en-tête et les pages riches en photos où chaque kilo-octet compte. Essayez-le en convertissant le JPG en AVIF ou le PNG en AVIF, et consultez Qu'est-ce que l'AVIF pour plus de détails.
SVG : pour tout ce qui doit rester net à toute taille
Le SVG est fondamentalement différent : c'est un format vectoriel, qui décrit des formes à l'aide de mathématiques plutôt que d'une grille de pixels. Un SVG reste parfaitement net à n'importe quelle taille, d'un favicon à un panneau d'affichage, tout en restant minuscule pour les graphiques simples. C'est le bon choix pour les logos, les icônes et les illustrations composées de formes et de lignes pleines.
Le SVG ne convient pas aux photographies, qui n'ont aucune géométrie nette à décrire. Mais pour les icônes d'interface et les éléments de marque, rien n'égale sa capacité à rester net à toute échelle et sa précision. Pour en savoir plus, lisez Qu'est-ce qu'un fichier SVG.
Un cadre de décision simple
En cas de doute, parcourez ces questions dans l'ordre :
- **S'agit-il d'un logo, d'une icône ou d'une illustration en aplat ?** Utilisez le SVG.
- **S'agit-il d'un graphique ou d'une capture d'écran, ou avez-vous besoin de transparence ou de contours au pixel près ?** Utilisez le PNG, ou le WebP sans perte pour des fichiers plus légers.
- **S'agit-il d'une photographie destinée à une audience moderne ?** Utilisez l'AVIF pour la plus petite taille, le WebP pour le meilleur équilibre entre taille et portée.
- **Doit-elle pouvoir s'ouvrir littéralement partout, y compris dans d'anciens logiciels ?** Utilisez le JPEG.
- **Est-elle animée ?** Utilisez le WebP ou, mieux encore, un véritable format vidéo comme le MP4 — pas le GIF.
Servir les formats modernes en toute sécurité
Vous n'avez pas à choisir un seul format pour tout le monde. L'élément picture du HTML permet au navigateur de choisir le meilleur format qu'il prend en charge : listez d'abord l'AVIF, puis le WebP, puis une solution de repli en JPEG ou PNG, et chaque visiteur ne télécharge qu'un seul fichier. Les navigateurs modernes reçoivent la version efficace et les plus anciens une solution de repli garantie, le tout sans aucun JavaScript.
Cela compte au-delà de l'esthétique. Les images constituent généralement la partie la plus lourde d'une page, si bien que le choix du format a un effet direct sur le Largest Contentful Paint, l'un des Core Web Vitals de Google, et donc à la fois sur l'expérience utilisateur et sur les performances de référencement. Des images plus légères et bien choisies font partie des optimisations de vitesse les plus rentables qui soient.
Comment convertir vos images existantes
Vous avez rarement besoin de tout réexporter de zéro. Pour moderniser une bibliothèque existante, convertissez sur place : JPG vers WebP, PNG vers WebP, JPG vers AVIF, ou PNG vers JPG pour une compatibilité maximale. Conservez vos masters originaux en haute qualité et générez les formats modernes à partir d'eux selon vos besoins.