WebP et AVIF : choisir les bons formats d'image pour son site

1 Accroche

Le format d'une image, ça change vraiment la donne

Tu as maintenant compris qu'une image trop lourde peut ralentir ton site. Mais une question arrive naturellement : « Comment faire pour avoir de belles images sans envoyer des fichiers énormes ? »

La réponse passe notamment par le choix du format. Tu connais probablement le JPEG et le PNG. Mais le WebP et l'AVIF sont aujourd'hui des formats importants lorsqu'on s'intéresse à la performance web. Le format choisi peut en effet avoir un impact sur le poids du fichier et donc sur la quantité de données que ton visiteur doit télécharger.

2 Ce que tu vas apprendre

À la fin de ce chapitre, tu sauras

✓ Pourquoi le format d'une image compte
✓ Ce qu'est le WebP
✓ Ce qu'est l'AVIF
✓ Quelles sont les principales différences entre les formats
✓ Comment choisir le bon format pour ton site

3 Le concept expliqué simplement

Un format d'image, c'est quoi ?

Un format d'image est une manière d'organiser et de stocker les informations d'une image. Et tous les formats ne sont pas aussi efficaces selon le type d'image et l'utilisation que tu en fais.

Le JPEG

Le JPEG est un format très répandu. Il convient particulièrement aux photographies et aux images contenant beaucoup de détails et de couleurs. C'est un format que tu retrouveras encore très souvent sur les sites web.

Le PNG

Le PNG peut être intéressant lorsqu'on a besoin de transparence ou d'une qualité particulière sur certains éléments graphiques. En revanche, il peut devenir lourd lorsqu'il est utilisé pour de grandes photographies. Il n'est donc pas forcément le meilleur choix pour toutes les images.

Le WebP

Le WebP est un format moderne conçu pour proposer une bonne qualité avec un poids généralement réduit. Il est aujourd'hui largement pris en charge par les navigateurs. L'objectif est simple : obtenir une image visuellement satisfaisante tout en limitant la quantité de données à télécharger.

L'AVIF

L'AVIF est un format plus récent qui peut permettre d'obtenir des fichiers très compacts tout en conservant une bonne qualité. Il peut donc être intéressant lorsqu'on cherche à optimiser davantage certaines images. Mais attention : plus moderne ne signifie pas automatiquement meilleur dans tous les cas.

💡 Analogie — Imagine quatre cartons pour transporter exactement le même objet. Certains sont énormes. D'autres sont parfaitement ajustés. Le contenu est identique, mais l'emballage change la place nécessaire dans le camion. Un format d'image joue en partie ce rôle. L'objectif est de transporter la même information visuelle avec le moins de données possible, tout en conservant une qualité satisfaisante.

Alors, quel format choisir ?

Il n'existe pas un format unique qui serait systématiquement le meilleur. Le choix dépend notamment du type d'image, du niveau de qualité recherché, du poids obtenu après compression, des fonctionnalités dont tu as besoin et de ton CMS et de ton système d'optimisation.

Pour une photographie, le WebP ou l'AVIF peuvent être de très bonnes options. Pour certains éléments nécessitant une transparence particulière, d'autres formats peuvent rester pertinents.

⚠️ Les pièges à éviter

✗ Penser que l'AVIF est automatiquement meilleur dans tous les cas
✗ Convertir toutes les images sans vérifier le poids obtenu
✗ Comparer uniquement les formats sans regarder la qualité visuelle
✗ Oublier de vérifier que ton CMS gère correctement le format choisi
✗ Croire qu'un format moderne suffit à lui seul à rendre un site rapide

4 Exemple concret

Une photographie en trois formats différents

Imagine que tu as une photographie destinée à une page d'accueil. Tu testes trois versions de la même image :

Format	Poids
JPEG	500 Ko
WebP	180 Ko
AVIF	130 Ko

Si la qualité visuelle reste satisfaisante, les formats modernes permettent ici de réduire fortement la quantité de données téléchargées. Passer de 500 Ko à 180 Ko représente déjà une réduction importante. Et la version AVIF à 130 Ko permet ici d'aller encore plus loin.

Mais attention : ces chiffres sont uniquement un exemple. Le résultat dépend de l'image, de ses dimensions, de son contenu et des paramètres de compression utilisés. Il ne faut donc pas considérer ces chiffres comme une règle universelle.

💡 À retenir — Le meilleur format n'est pas forcément celui qui produit le fichier le plus petit. C'est celui qui offre un bon compromis entre poids, qualité visuelle et compatibilité.

5 Comment le mettre en pratique

1

Identifie tes images importantes

Commence par les images qui apparaissent rapidement sur tes pages. Ce sont notamment les images visibles dès l'arrivée sur la page qui peuvent avoir un impact important sur le chargement initial.

2

Regarde leur format

Analyse quelques images de ton site. Tu peux trouver des fichiers JPEG, PNG, GIF, WebP ou AVIF. L'objectif n'est pas de tout modifier immédiatement. Commence par comprendre ce qui existe déjà.

3

Compare

Prends quelques images représentatives et convertis-les en WebP ou en AVIF. Compare ensuite le poids, la qualité et le rendu. Une image légèrement plus lourde mais visuellement parfaite peut parfois être préférable à une image très légère mais fortement dégradée.

4

Choisis le format adapté

Pour une photographie, le WebP ou l'AVIF peuvent être de très bonnes options. Pour certains éléments nécessitant une transparence particulière, d'autres formats peuvent rester pertinents. L'objectif n'est donc pas de remplacer systématiquement tous les formats existants.

5

Vérifie ton CMS

Ton CMS ou ton plugin d'optimisation peut parfois générer automatiquement des formats modernes. Cela peut te permettre d'optimiser tes images sans devoir convertir manuellement chaque fichier. Vérifie donc ce que ton système propose avant de commencer à tout faire à la main.

6

Contrôle le résultat

Ne juge pas uniquement le fichier sur ton ordinateur. Regarde également la qualité réelle affichée sur le site. Une image peut être légère et parfaitement correcte dans un cas, mais présenter des artefacts ou une dégradation visible dans un autre.

6 Le jargon de ce chapitre

Mini-lexique

Terme	Définition simple
JPEG	Format très courant, notamment pour les photographies
PNG	Format adapté à certains graphiques et à la transparence
WebP	Format d'image moderne conçu pour réduire le poids
AVIF	Format moderne permettant souvent une forte compression
Conversion	Transformation d'une image vers un autre format
Transparence	Possibilité d'avoir des zones sans arrière-plan visible
Compression	Technique permettant de réduire le poids d'un fichier

7 Quiz — Vérifie que tu as compris

Question 1/4

Question 1 — Quel est l'intérêt principal du WebP et de l'AVIF ?

A Permettre notamment de réduire le poids des images

B Créer des pages automatiquement

C Remplacer les liens internes

💡 Bonne réponse : A. Les formats modernes peuvent permettre d'obtenir des fichiers plus légers tout en conservant une qualité visuelle satisfaisante.

8 Et après ?

Tu sais maintenant qu'il ne suffit pas de réduire les dimensions ou le poids d'une image. Le format joue également un rôle important. Tu peux utiliser le WebP ou l'AVIF pour chercher un meilleur compromis entre qualité visuelle et poids du fichier.

Mais même avec des images parfaitement optimisées, tu n'es pas obligé de toutes les charger immédiatement. C'est justement le principe du lazy loading.

Chapitre suivant

Le lazy loading : charger les images au bon moment

Continuer →

Les formats d'image modernes (WebP/AVIF)