Perdu dans le format d'image Web ?

La multiplicité des formats d'image sur le web transforme souvent l’acte de choisir en casse‑tête. Décryptage des principaux formats, leurs usages, leurs limites, pour sortir de l’approximation et optimiser les performances de votre site web.

Raster vs vectoriel : le point de départ

Avant de faire un choix sur le format : JPEG, PNG, AVIF, … il faut distinguer deux familles fondamentales :

• Raster (bitmap) : l’image est composée d’un quadrillage de pixels. Si on agrandit au-delà de sa définition, l’image se pixelise, se floute.
• Vectoriel : l’image est basée sur des formules mathématiques (traits, formes), ce qui permet un redimensionnement infini sans perte.

Les formats vectoriels (SVG, EPS, PDF, etc.) sont particulièrement adaptés aux logos, icônes, schémas, dessins : clarté à toute taille et échelle. Les formats raster couvrent tout le reste : photographies, images complexes, captures d’écran.

Ne jamais confondre les deux : on vous l’a déjà répéter 100 fois mais utiliser du JPEG pour un logo, c’est maaaal.

Les classiques : JPEG, PNG, GIF, SVG

Format JPEG / JPG (.jpg / .jpeg)

• Format lossy (avec perte) : plus au moins forte compression au détriment de la qualité pour alléger.
• Pas de transparence ni d’animation.
• Idéal pour les photographies, scènes riches en couleurs et textures.
• Limites : artefacts sur les zones contrastées, perte à chaque recompressions (un peu comme pour le format audio MP3).

Format PNG (.png)

• Deux variantes : PNG‑24 / PNG‑32 (true color + alpha) ou PNG‑8 (palette 256 couleurs).
• Format lossless (sans perte).
• Prise en charge de la transparence (alpha).
• Idéal pour logos, illustrations, images avec textes/traits nets.
• Déconseillé pour les grandes photos (taille de fichier souvent trop élevée).

Format GIF (.gif)

• Format ancien (un peu sur le déclin), palette très limitée (256 couleurs max).
• Supporte l’animation simple (frame par frame).
• Perd sa pertinence pour les images fixes (PNG ou WebP/AVIF surpassent).
• Limites : format très vieillissant, taille de fichier élevé surtout avec animation.

Format SVG (.svg)

• Format 100% vectoriel, écrit en code XML.
• Léger, évolutif, compatible CSS / animations / interactions JavaScript.
• Excellent pour logos, icônes, schémas dynamiques, animations.
• Limite : pas du tout adapté aux photographies réalistes ou dessin avec trop de détails.

Les nouveaux prétendants : WebP, AVIF, JPEG XL

But assez simple de ces nouveaux formats : réduire les temps de chargement sans sacrifier l’expérience visuelle.

Format WebP (.ebp)

• Lancé par Google, format moderne combinant compression lossy et lossless, transparence et animations.
• En pratique, WebP souvent 25–40 % plus léger que JPEG pour une qualité comparable.
• Bonne compatibilité navigateur aujourd’hui (mais pas totalement absolue sur les très anciens navigateurs).
• Décodage rapide, mais incapable de gérer certaines profondeurs de couleur (se limite souvent à 8 bits)

Format AVIF (.avif)

• Basé sur le codec vidéo AV1, encapsulé dans un conteneur HEIF.
• Compression plus efficace que WebP : fichiers 20‑30 % plus petits pour une qualité équivalente.
• Prise en charge de transparence, HDR, profondeurs de couleur plus grandes (10, 12 bits).
• Inconvénients : encodage/décodage coûteux en ressources & compatibilité moins universelle selon les navigateurs ou plateformes.

Format JPEG XL (.jxl)

• Format émergent, ambition de succéder à JPEG, en mieux.
• Forte compression, support des fonctionnalités avancées (HDR, compatibilité JPEG rétroactive).
• Limites : adoption encore faible assez (principalement disponible sur Safari).

Critères de choix : ce qu’il faut peser

Quand choisir un format plutôt qu’un autre ? Voici les critères concrets.

Critère	Impact	Ce qu’il faut trancher
Poids / compression	Vitesse de chargement, bande passante	Privilégier formats modernes (AVIF, WebP) quand possible
Qualité visuelle	Perte, artefacts, dégradation	Tester visuellement à différents niveaux de compression (par palier de 10/20%)
Compatibilité	Navigateurs, appareils	Prévoir une alternative vers JPEG/PNG ou servir des formats multiples si besoin
Transparence & animation	Besoin réel de ces fonctionnalités ?	Si oui, PNG, WebP, AVIF ; sinon, inutile
Coût de traitement	Encodage, décodage, CPU	AVIF peut demander plus de ressources pour servir ou manipuler
Écosystème & outils	Logiciels, CDN, plugins	Vérifier si vos outils de gestion d’images prennent bien en charge le format choisi

Bonnes pratiques & stratégie d’alternative

1. Multi‑formatServir AVIF (ou WebP) quand le navigateur le supporte (vérifier sur https://caniuse.com/), sinon remplacer par les classiques JPEG/PNG.

   <picture>
       <source srcset="image.avif" type="image/avif">
       <source srcset="image.webp" type="image/webp">
       <img src="image.jpg" alt="…">
   </picture>

2. Compression progressive / quality stepsNe pas toujours viser “qualité maximale” à 100%,  bien choisir un point d’équilibre entre qualité et compression.

3. Lazy loading + placeholders légersAfficher d’abord une version basse résolution ou SVG flouté, puis charger l’image finale.

4. Optimiser les dimensions avant téléversementNe pas utliser une image avec des grandes dimensions pour une zone d’affichage limitée. Ex: un JPG de 4000×3000px si la zone d’affichage est seulement de 800×600px.

5. Metadonnées, icc, profils colorimétriquesLes retirer si non nécessaires (souvent non utilisées côté Web) pour alléger au maximum le fichier.

6. Test sur navigateurs / appareils réelsUn faux artefact ou image cassée sur un navigateur utilisé par votre audience ne fait pas bon effet.

7. Surveiller les stats Google Core Web Vitals LCP, CLS, FID : les images mal optimisées sont souvent au cœur des scores faibles.

Cas concrets & chiffres

• Une étude académique en 2023 montre que, comparés au JPEG compressé, WEBP et AVIF réduisent le temps de chargement de page de 21 % et 15 % respectivement, selon navigateurs testés.
• AVIF atteint une compression jusqu’à 50 % plus performante que JPEG, et 20‑30 % mieux que WebP.
• En compression lossy, AVIF offre environ 10 % de meilleur ratio qualité/poids que WebP selon les configurations.
• Mais même si AVIF compresse mieux, WebP est plus rapide à décoder et mieux supporté actuellement, d’où l’usage recommandé du fallback.

Usage des images dans un cadre de sobriété numérique : optimiser

Optimiser les images pour alléger les pages n’est pas une action à la marge. C’est un levier assez déterminant pour réduire l’empreinte environnementale des sites web. Quelques pratiques utiles :

1. Supprimer ce qui ne sert à rien

Chaque image non essentielle est un poids mort. Bannir les visuels décoratifs inutiles, surtout les “background full HD”. Un site sobre n’a pas besoin d’illustrer chaque bloc avec une image JPEG 2 Mo en 4000 pixels.

2. Servir la bonne taille pour le bon usage

Utiliser le responsive (srcset, sizes) pour éviter de livrer la version desktop à un mobile. Et surtout : jamais d’image en 2× ou 4× par défaut, sauf cas avéré de besoin (écran HD, zoom fonctionnel).

3. Encodage AVIF par défaut (quand possible)

Compression très efficace à qualité visuelle quasi identique. Moins de kilo‑octets transférés, moins d’énergie consommée, moins de CO₂. WebP en plan B. JPEG avec bonne compression seulement en dernier recours pour compatibilité vieux navigateur.

4. Supprimer les métadonnées et profils couleurs inutiles

EXIF, ICC, thumbnails embarqués… pas de valeur ajoutée pour afficher sur un site web. Des outils comme ImageOptim (pour Mac) ou Squoosh font ça très bien.

5. Lazy‑load intelligent

Ne pas charger les images hors‑écran avant que l’utilisateur ne les atteigne. Avec l’attribut loading="lazy" natif bien supporté par les navigateur modernes, le bénéfice est très important.

6. Éviter le carrousel (ou alors, 1 image visible max)

Le “carousel” de 5 slides en 1920×1080, souvent ignoré par l’utilisateur ? À éviter absolument. Ou au minimum, chargement différé slide par slide avec du lazy loading pour les images masquées.

7. SVG systématique pour les éléments UI

Icônes, logos, motifs : vectoriel, sans pixel à charger, souvent en ligne dans le code = zéro requête.

8. Auditer & mesurer

Outils comme EcoIndex, Kastor, Website Carbon Calculator ou outil maison pour quantifier l’impact réel. Parce qu’on ne réduit pas ce qu’on ne mesure pas.

Bonus : les CDN comme Cloudinary, Imgix, ImageKit, Uploadcare gèrent tout cela automatiquement (reformatage, responsive, compression AVIF/WebP), sans complexité supplémentaire côté dev.

En bref

Pour usage courant

• Pour les images complexes ou photo réalistes : AVIF, alternative WebP ou JPEG avec niveau de compression appropriée.
• Pour logos/icônes/textes nets : SVG (vectoriel) ou PNG/AVIF si dessin complexe & transparence.
• Pour animations légères : WebP animé ou GIF, selon compatibilité et taille.
• Toujours tester sur les navigateurs cibles.
• Utiliser la technique <picture> ou des services CDN qui gèrent la conversion à la volée.

Pour usage focus sur la sobriété

• Supprimer toutes les images non indispensables (oui il faut faire des choix).
• Préférer WebP (ou AVIF) systématiquement.
• Servir des images vraiment redimensionnées au contexte (mobile, desktop, écran HD).
• Nettoyer les métadonnées inutiles.
• Activer loading="lazy" partout.
• Utiliser SVG pour tout élément UI réutilisable.
• Mesurer l’impact dans les pages en testant avec outil EcoIndex, GreenFrame, https://kastor.green/ etc.