Images web : formats, compression et bonnes pratiques pour des médias optimisés

Pourquoi optimiser ses médias pour le Web ?

On a tendance à l’oublier, mais les images représentent souvent la majorité du poids d’une page web. Lorsqu’elles sont mal optimisées, elles peuvent considérablement ralentir le chargement d’un site… avec des conséquences bien réelles.

Une question de performance

Plus vos fichiers sont lourds, plus ils prennent de temps à s’afficher. Et chaque seconde compte :

• Au-delà de 3 secondes, un visiteur sur deux risque de quitter votre site.
• Google prend en compte la vitesse de chargement dans son classement des résultats.

Optimiser vos images, c’est donc gagner en rapidité et en fluidité, autant sur mobile que sur ordinateur.

Une meilleure expérience utilisateur

Des images bien calibrées s’affichent rapidement, sans “saut” de mise en page ou chargement progressif flou. C’est particulièrement important sur mobile, où les connexions sont parfois lentes, et où la taille de l’écran nécessite des images bien adaptées.

Un impact direct sur votre SEO

Depuis quelques années, Google prend en compte la qualité technique des pages via les Core Web Vitals. Parmi ces indicateurs :

• Le Largest Contentful Paint (LCP), qui mesure le temps d’affichage du plus grand élément visible (souvent une image)
• Le Cumulative Layout Shift (CLS), influencé notamment par les images sans dimensions définies

Des images bien optimisées permettent donc d’améliorer vos scores dans des outils comme PageSpeed Insights, Lighthouse ou GTmetrix avec, à la clé, un meilleur confort pour l’utilisateur… et un petit bonus pour votre référencement.

Même si Google confirme l’importance de ces métriques, leur poids reste modeste dans l’algorithme, surtout face à la qualité du contenu et à sa pertinence. Il s’agit plutôt d’un facteur départageur entre deux pages de valeur équivalente.

Réduire son empreinte carbone numérique

Enfin, alléger vos fichiers, c’est réduire la quantité de données transférées à chaque visite.
À l’échelle d’un site très fréquenté, cela peut représenter des gigaoctets économisés… et donc une empreinte carbone numérique plus faible.
C’est un petit geste pour la planète, mais un geste quand même.

Les formats d’images à privilégier (et à éviter)

Le choix du format d’image a un impact direct sur le poids du fichier, la qualité d’affichage, la compatibilité navigateur… mais aussi sur la visibilité de vos contenus lorsqu’ils sont partagés sur les réseaux sociaux.

JPEG, PNG, GIF : les classiques

Ces formats “historiques” sont encore les plus sûrs pour une compatibilité large.

• JPEG (.jpg) : idéal pour les photos ou visuels riches en couleurs. Compression avec perte mais bonne qualité d’image perçue si vous ne descendez pas en-dessous de 80% (de compression). Parfait pour : photographies, bannières, visuels à fort contraste.
  JPEG = Joint Photographic Experts Group
  
• PNG (.png) : format sans perte, plus lourd, mais utile pour gérer la transparence. Recommandé pour : visuels (ou éventuellement un logo) nécessitant un fond transparent.
  PNG = Portable Network Graphics
  
• GIF (.gif) : limité à 256 couleurs, encore utilisé pour de petites animations. Très peu efficace côté poids. À éviter pour les images statiques. Pour l’animation, préférez un format vidéo ou WebP animé.
  GIF = Graphics Interchange Format

WebP et AVIF : les formats modernes

Les formats modernes permettent vraiment un gain substantiel en termes de poids d’image.

• WebP (.webp) : compression plus performante que JPEG ou PNG, avec ou sans perte. Compatible avec tous les navigateurs modernes et de plus en plus de CMS.
  WebP = Web Picture
  
• AVIF (.avif) : encore plus léger que WebP, mais moins bien pris en charge (notamment sur iOS ou certaines plateformes).
  AVIF = AV1 Image File Format

Et les animations ?
WebP (et AVIF) permettent aussi de créer des images animées, avec une qualité bien supérieure au GIF classique.
👉 Résultat : des animations plus fluides, avec des fichiers souvent 5 à 10 fois plus légers.
⚠️ Attention : certains réseaux sociaux ou outils d’emailing ne les prennent pas encore en charge.

Comparatif des principaux formats d’images bitmap

Type du fichier : 
image/webp
Taille du fichier : 51 Ko
Dimensions : 
1536 pixels par 1024

Type du fichier :
image/avif
Taille du fichier : 61 Ko
Dimensions :
1536 pixels par 1024

Type du fichier :
image/png
Taille du fichier : 2 Mo
Dimensions :
1536 pixels par 1024

Type du fichier :
image/jpeg
Taille du fichier : 350 Ko
Dimensions :
1536 pixels par 1024

👉 Pour gérer plusieurs formats (WebP, AVIF, JPEG), pensez à l’élément <picture>. Nous en parlons plus en détail dans la suite de l’article.

SVG : le format vectoriel

Le SVG (Scalable Vector Graphics) est un format vectoriel basé sur des formules mathématiques, contrairement aux formats bitmap (comme JPEG, PNG ou WebP) qui sont composés de pixels.
Résultat : le SVG ne pixelise pas, reste parfaitement net quelle que soit la taille, et reste très léger.

👉 Idéal pour : logos, icônes, pictogrammes, illustrations simples.
⚠️ Attention toutefois : la plupart des réseaux sociaux ne prennent pas en charge le SVG dans les aperçus (og:image). Prévoyez une version JPEG ou PNG pour les partages.

Bon à savoir : formats d’images et réseaux sociaux

Pour garantir une bonne visibilité de vos contenus sur les plateformes sociales, il est recommandé de :

• Utiliser des fichiers JPEG ou PNG pour les balises og:image (Open Graph)
• Respecter les dimensions minimales (ex. : 1200 × 630 px pour Facebook)
• Éviter les formats WebP ou SVG dans les métadonnées sociales, sauf si vous avez mis en place un fallback.

Les bonnes pratiques avant la mise en ligne

Avant même d’importer vos images dans votre site web, quelques réflexes simples peuvent faire toute la différence. Voici les étapes essentielles pour optimiser vos médias en amont.

Adapter les dimensions à l’usage (et à la densité d’écran)

Il est inutile (et contre-productif) d’importer une image de 4000 px de large si elle ne s’affiche qu’en 800 px sur votre site. Mais attention : sur les écrans haute définition (aussi appelés Retina, HiDPI, Super Retina…), une image peut paraître floue si elle n’a pas assez de détails.

La bonne pratique : prévoir une version 2× plus grande que la taille d’affichage prévue, pour les visuels importants.

Exemple concret :

Vous voulez afficher un logo en haut de votre page d’une largeur de 150 px à l’écran.

• Fournissez une image au format PNG de 300 px de large
• L’image sera affichée en 150 px (via HTML ou CSS)
• Résultat : un affichage parfaitement net, y compris sur un écran haute densité (iPhone, Galaxy, Pixel, etc.)

👉 Pour les images d’illustration dans un article, ou les visuels de second plan, vous pouvez rester à la taille normale pour éviter de surcharger inutilement vos pages.

Nettoyer ce qui ne sert à rien

Avant la mise en ligne, pensez à supprimer tout ce qui alourdit vos fichiers sans bénéfice visuel :

• Les métadonnées EXIF (informations de prise de vue, géolocalisation…)
• Les calques ou chemins vectoriels inutiles
• Les profils colorimétriques complexes : privilégiez le profil sRGB, standard pour le web

Ces éléments sont invisibles pour le visiteur… mais visibles dans le poids de votre fichier. La plupart des outils de compression peuvent les supprimer automatiquement.

Astuce : le HTML <picture> pour gérer les fallbacks

Pour utiliser les formats modernes sans casser l’affichage sur les anciens navigateurs ou outils non compatibles (réseaux sociaux, messageries…), vous pouvez utiliser l’élément HTML <picture> :

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description de l’image">
</picture>

💡 Le navigateur choisira automatiquement le format le plus adapté, et tombera en dernier recours sur l’image JPEG. Cela permet de gagner en performance tout en assurant une compatibilité maximale.

Outils de compression et de conversion d’images

Une fois vos images redimensionnées, il est essentiel de les alléger avant leur mise en ligne.
Cela passe par deux types d’outils :

• ceux qui compressent une image (sans changer son format) pour réduire son poids ;
• ceux qui exportent et convertissent vos images dans des formats plus performants comme WebP ou AVIF.

Voici une sélection d’outils, en ligne ou à installer, pour répondre à tous les besoins.

Outils dédiés à la compression

Idéals pour alléger vos fichiers existants sans changer leur format.

En ligne (rapide et sans installation)

• Squoosh
  ➤ Plateforme : navigateur (tous OS)
  ➤ Prix : Gratuit
  ➤ Formats : WebP ✅ – AVIF ✅
  Permet de compresser visuellement avec aperçu, et de convertir au besoin. Très flexible.
  👉 Un excellent outil pour tester différents réglages ou formats.
  
• TinyPNG / TinyJPG
  ➤ Plateforme : navigateur
  ➤ Prix : Gratuit (limité), versions payantes disponibles
  ➤ Formats : WebP ✅ – AVIF ❌
  Compression efficace et rapide, sans perte visible.
  👉 Très bon pour les utilisateurs non techniques.
  
• CompressJPEG / CompressPNG
  ➤ Plateforme : navigateur
  ➤ Prix : Gratuit
  ➤ Formats : WebP ❌ – AVIF ❌
  Un peu daté, mais utile pour des compressions rapides en lot.

Logiciels spécialisés (à installer sur son ordi)

• ImageOptim
  ➤ Plateforme : macOS
  ➤ Prix : Gratuit (open source)
  ➤ Formats : WebP ✅ – AVIF ❌
  Glissez-déposez vos images pour qu’elles soient compressées et nettoyées.
  👉 Idéal pour les utilisateurs Mac en quête d’efficacité.
  
• RIOT (Radical Image Optimization Tool)
  ➤ Plateforme : Windows
  ➤ Prix : Gratuit
  ➤ Formats : WebP ✅ – AVIF ❌
  Compression fine avec aperçu en temps réel, gestion des métadonnées.
  👉 Pour ceux qui veulent garder le contrôle sur chaque paramètre.

Logiciels graphiques avec options de compression et de conversion

Ces outils permettent à la fois d’éditer, de redimensionner, de convertir les formats (JPEG → WebP par ex.) et de choisir le niveau de compression à l’export.

• Affinity Photo
  ➤ Plateforme : Windows, macOS, iPadOS
  ➤ Prix : Environ 80 € (licence perpétuelle)
  ➤ Formats : WebP ✅ – AVIF ✅ (selon version)
  Export avancé avec contrôle qualité, dimensions, profils colorimétriques.
  👉 Un bon compromis entre puissance et accessibilité.
  
• GIMP
  ➤ Plateforme : Windows, macOS, Linux
  ➤ Prix : Gratuit (open source)
  ➤ Formats : WebP ✅ – AVIF ✅ (via plugin ou version récente)
  Moins intuitif, mais très complet.
  👉 Pour les utilisateurs à l’aise avec les logiciels libres.
  
• Adobe Photoshop
  ➤ Plateforme : Windows, macOS
  ➤ Prix : Abonnement à partir de 24 €/mois
  ➤ Formats : WebP ✅ (natif) – AVIF ❌ (plugin requis)
  Export “Enregistrer pour le web” ou “Exporter sous…” avec réglage fin.
  👉 Un standard pro, mais payant.

Optimisation avancée : responsive et lazy-loading

Une image bien compressée, c’est bien. Mais une image bien servie, au bon moment et à la bonne taille, c’est encore mieux. C’est là qu’interviennent deux notions clés : l’adaptation aux écrans (responsive) et le chargement différé (lazy-loading).

Servir la bonne taille d’image selon l’écran

Sur un smartphone ou un écran 4K, vos visiteurs n’ont pas les mêmes besoins. Pour éviter de charger une image trop lourde sur mobile (ou trop floue sur Retina), on utilise des techniques comme :

srcset et sizes dans le HTML

Ces attributs permettent au navigateur de choisir la bonne version de l’image selon :

• la taille de l’écran
• la densité de pixels (1x, 2x, etc.)

<img 
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(max-width: 768px) 100vw, 800px"
  alt="Description de l’image">

Le navigateur télécharge uniquement la version adaptée à l’écran de l’utilisateur. Résultat : un site plus rapide, sans compromis sur la qualité.

Comment est géré le srcset dans les CMS ?

• WordPress intègre automatiquement srcset pour toutes les images ajoutées via l’éditeur, dès lors que plusieurs tailles sont générées (thème ou plugins).
• Shopify prend en charge le srcset via ses balises d’image Liquid ({{ image | img_url: '800x' }}…), surtout dans les thèmes modernes.
• Joomla! ne l’intègre pas automatiquement, mais des extensions comme JCH Optimize ou ImageRecycle peuvent le gérer.
• Drupal propose une gestion fine via le module “Responsive Images”.
• Prestashop ne gère pas srcset nativement, mais certains thèmes le prennent en charge.
• CMS headless ou sites statiques (Gatsby, Next.js, etc.) gèrent srcset via leurs générateurs d’image.

Charger les images uniquement quand c’est utile (lazy-loading)

Plutôt que de charger toutes les images dès l’arrivée sur la page, on peut différer leur chargement jusqu’à ce qu’elles soient visibles à l’écran. C’est le principe du lazy loading.

Attribut HTML loading="lazy"

C’est aujourd’hui la méthode la plus simple : il suffit d’ajouter loading="lazy" à vos balises <img> :

<img src="photo.jpg" alt="…" loading="lazy">

👉 Cela permet de réduire le temps de chargement initial, surtout sur les pages longues avec beaucoup d’images (articles, fiches produits, portfolios…).

Comment est géré le lazy-loading dans les CMS ?

• WordPress active automatiquement loading="lazy" depuis la version 5.5, sauf pour la première image visible.
• Shopify utilise également le lazy-loading par défaut sur la majorité de ses thèmes récents.
• Joomla!, Drupal, Prestashop ou Ghost peuvent l’activer via des modules, thèmes ou personnalisation HTML.
• Sur un site statique ou un CMS sur mesure, vous pouvez simplement ajouter l’attribut loading="lazy" dans vos balises <img> (prise en charge native par tous les navigateurs modernes).

👉 Quel que soit votre CMS, il est fortement recommandé de vérifier que le lazy-loading est bien actif, surtout sur les pages longues ou riches en médias.

Bon à savoir

• Le lazy-loading ne remplace pas l’optimisation des images : une image trop lourde mettra toujours du temps à se charger, même en différé.
• Le srcset et le lazy-loading peuvent être combinés pour un maximum d’efficacité.

Conclusion

Optimiser vos images pour le web n’est pas une tâche réservée aux experts. Avec les bons formats, des outils adaptés et quelques bonnes pratiques, vous pouvez considérablement réduire le poids de vos pages, accélérer le chargement de votre site et offrir une meilleure expérience à vos visiteurs, quel que soit leur appareil.

C’est aussi un geste pour votre référencement, vos conversions… et même l’impact environnemental de votre site.

Alors, avant de cliquer sur “Importer une image”, pensez à :

• choisir le bon format (WebP, AVIF, JPEG…)
• redimensionner intelligemment
• compresser sans excès
• et profiter des options de chargement intelligent (srcset, lazy-loading, etc.)