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

Pourquoi optimiser ses médias pour le Web ?

On a ten­dance à l’oublier, mais les images repré­sentent sou­vent la majo­ri­té du poids d’une page web. Lorsqu’elles sont mal opti­mi­sées, elles peuvent consi­dé­ra­ble­ment ralen­tir le char­ge­ment 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 visi­teur sur deux risque de quit­ter votre site.
• Google prend en compte la vitesse de char­ge­ment dans son clas­se­ment des résultats.

Opti­mi­ser vos images, c’est donc gagner en rapi­di­té et en flui­di­té, autant sur mobile que sur ordinateur.

Une meilleure expérience utilisateur

Des images bien cali­brées s’affichent rapi­de­ment, sans “saut” de mise en page ou char­ge­ment pro­gres­sif flou. C’est par­ti­cu­liè­re­ment impor­tant sur mobile, où les connexions sont par­fois lentes, et où la taille de l’écran néces­site des images bien adaptées.

Un impact direct sur votre SEO

Depuis quelques années, Google prend en compte la qua­li­té tech­nique des pages via les Core Web Vitals. Par­mi ces indicateurs :

• Le Lar­gest Content­ful Paint (LCP), qui mesure le temps d’affichage du plus grand élé­ment visible (sou­vent une image)
• Le Cumu­la­tive Layout Shift (CLS), influen­cé notam­ment par les images sans dimen­sions définies

Des images bien opti­mi­sées per­mettent donc d’améliorer vos scores dans des outils comme PageS­peed Insights, Ligh­thouse ou GTme­trix 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, sur­tout face à la qua­li­té du conte­nu et à sa per­ti­nence. Il s’agit plu­tôt d’un fac­teur dépar­ta­geur entre deux pages de valeur équi­va­lente.

Réduire son empreinte carbone numérique

Enfin, allé­ger vos fichiers, c’est réduire la quan­ti­té de don­nées trans­fé­rées à chaque visite.
À l’échelle d’un site très fré­quen­té, cela peut repré­sen­ter des giga­oc­tets éco­no­mi­sés… et donc une empreinte car­bone numé­rique plus faible.
C’est un petit geste pour la pla­nète, mais un geste quand même.

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

Le choix du for­mat d’image a un impact direct sur le poids du fichier, la qua­li­té d’affichage, la com­pa­ti­bi­li­té navi­ga­teur… mais aus­si sur la visi­bi­li­té de vos conte­nus lorsqu’ils sont par­ta­gés sur les réseaux sociaux.

JPEG, PNG, GIF : les classiques

Ces for­mats “his­to­riques” sont encore les plus sûrs pour une com­pa­ti­bi­li­té large.

• JPEG (.jpg) : idéal pour les pho­tos ou visuels riches en cou­leurs. Com­pres­sion avec perte mais bonne qua­li­té d’i­mage per­çue si vous ne des­cen­dez pas en-des­sous de 80% (de com­pres­sion). Par­fait pour : pho­to­gra­phies, ban­nières, visuels à fort contraste.
  JPEG = Joint Pho­to­gra­phic Experts Group
  
• PNG (.png) : for­mat sans perte, plus lourd, mais utile pour gérer la trans­pa­rence. Recom­man­dé pour : visuels (ou éven­tuel­le­ment un logo) néces­si­tant un fond trans­pa­rent.
  PNG = Por­table Net­work Graphics
  
• GIF (.gif) : limi­té à 256 cou­leurs, encore uti­li­sé pour de petites ani­ma­tions. Très peu effi­cace côté poids. À évi­ter pour les images sta­tiques. Pour l’animation, pré­fé­rez un for­mat vidéo ou WebP ani­mé.
  GIF = Gra­phics Inter­change Format

WebP et AVIF : les formats modernes

Les for­mats modernes per­mettent vrai­ment un gain sub­stan­tiel en termes de poids d’image.

• WebP (.webp) : com­pres­sion plus per­for­mante que JPEG ou PNG, avec ou sans perte. Com­pa­tible avec tous les navi­ga­teurs 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 (notam­ment sur iOS ou cer­taines pla­te­formes).
  AVIF = AV1 Image File Format

Et les ani­ma­tions ?
WebP (et AVIF) per­mettent aus­si de créer des images ani­mées, avec une qua­li­té bien supé­rieure au GIF clas­sique.
👉 Résul­tat : des ani­ma­tions plus fluides, avec des fichiers sou­vent 5 à 10 fois plus légers.
⚠️ Atten­tion : cer­tains réseaux sociaux ou outils d’emailing ne les prennent pas encore en charge.

Comparatif des principaux formats d’images bitmap

👉 Pour gérer plu­sieurs for­mats (WebP, AVIF, JPEG), pen­sez à l’élément <picture>. Nous en par­lons plus en détail dans la suite de l’article.

SVG : le format vectoriel

Le SVG (Sca­lable Vec­tor Gra­phics) est un for­mat vec­to­riel basé sur des for­mules mathé­ma­tiques, contrai­re­ment aux for­mats bit­map (comme JPEG, PNG ou WebP) qui sont com­po­sés de pixels.
Résul­tat : le SVG ne pixe­lise pas, reste par­fai­te­ment net quelle que soit la taille, et reste très léger.

👉 Idéal pour : logos, icônes, pic­to­grammes, illus­tra­tions simples.
⚠️ Atten­tion tou­te­fois : la plu­part des réseaux sociaux ne prennent pas en charge le SVG dans les aper­çus (og:image). Pré­voyez une ver­sion JPEG ou PNG pour les partages.

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

Pour garan­tir une bonne visi­bi­li­té de vos conte­nus sur les pla­te­formes sociales, il est recom­man­dé de :

• Uti­li­ser des fichiers JPEG ou PNG pour les balises og:image (Open Graph)
• Res­pec­ter les dimen­sions mini­males (ex. : 1200 × 630 px pour Facebook)
• Évi­ter les for­mats WebP ou SVG dans les méta­don­né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 dif­fé­rence. Voi­ci les étapes essen­tielles pour opti­mi­ser vos médias en amont.

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

Il est inutile (et contre-pro­duc­tif) d’importer une image de 4000 px de large si elle ne s’affiche qu’en 800 px sur votre site. Mais atten­tion : sur les écrans haute défi­ni­tion (aus­si appe­lés Reti­na, HiD­PI, Super Reti­na…), une image peut paraître floue si elle n’a pas assez de détails.

La bonne pra­tique : pré­voir une ver­sion 2× plus grande que la taille d’affichage pré­vue, pour les visuels importants.

Exemple concret :

Vous vou­lez affi­cher un logo en haut de votre page d’une lar­geur de 150 px à l’écran.

• Four­nis­sez une image au for­mat PNG de 300 px de large
• L’image sera affi­chée en 150 px (via HTML ou CSS)
• Résul­tat : un affi­chage par­fai­te­ment net, y com­pris sur un écran haute den­si­té (iPhone, Galaxy, Pixel, etc.)

👉 Pour les images d’illustration dans un article, ou les visuels de second plan, vous pou­vez res­ter à la taille nor­male pour évi­ter de sur­char­ger inuti­le­ment vos pages.

Nettoyer ce qui ne sert à rien

Avant la mise en ligne, pen­sez à sup­pri­mer tout ce qui alour­dit vos fichiers sans béné­fice visuel :

• Les méta­don­nées EXIF (infor­ma­tions de prise de vue, géolocalisation…)
• Les calques ou che­mins vec­to­riels inutiles
• Les pro­fils colo­ri­mé­triques com­plexes : pri­vi­lé­giez le pro­fil sRGB, stan­dard pour le web

Ces élé­ments sont invi­sibles pour le visi­teur… mais visibles dans le poids de votre fichier. La plu­part des outils de com­pres­sion peuvent les sup­pri­mer automatiquement.

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

Pour uti­li­ser les for­mats modernes sans cas­ser l’affichage sur les anciens navi­ga­teurs ou outils non com­pa­tibles (réseaux sociaux, mes­sa­ge­ries…), vous pou­vez uti­li­ser 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 navi­ga­teur choi­si­ra auto­ma­ti­que­ment le for­mat le plus adap­té, et tom­be­ra en der­nier recours sur l’image JPEG. Cela per­met de gagner en per­for­mance tout en assu­rant une com­pa­ti­bi­li­té maxi­male.

Outils de compression et de conversion d’images

Une fois vos images redi­men­sion­nées, il est essen­tiel de les allé­ger avant leur mise en ligne.
Cela passe par deux types d’outils :

• ceux qui com­pressent une image (sans chan­ger son for­mat) pour réduire son poids ;
• ceux qui exportent et conver­tissent vos images dans des for­mats plus per­for­mants comme WebP ou AVIF.

Voi­ci une sélec­tion d’outils, en ligne ou à ins­tal­ler, pour répondre à tous les besoins.

Outils dédiés à la compression

Idéals pour allé­ger vos fichiers exis­tants sans chan­ger leur format.

En ligne (rapide et sans installation)

• Squoosh
  ➤ Pla­te­forme : navi­ga­teur (tous OS)
  ➤ Prix : Gra­tuit
  ➤ For­mats : WebP ✅ – AVIF ✅
  Per­met de com­pres­ser visuel­le­ment avec aper­çu, et de conver­tir au besoin. Très flexible.
  👉 Un excellent outil pour tes­ter dif­fé­rents réglages ou formats.
  
• TinyPNG / Tiny­JPG
  ➤ Pla­te­forme : navi­ga­teur
  ➤ Prix : Gra­tuit (limi­té), ver­sions payantes dis­po­nibles
  ➤ For­mats : WebP ✅ – AVIF ❌
  Com­pres­sion effi­cace et rapide, sans perte visible.
  👉 Très bon pour les uti­li­sa­teurs non techniques.
  
• Com­press­J­PEG / Com­pressPNG
  ➤ Pla­te­forme : navi­ga­teur
  ➤ Prix : Gra­tuit
  ➤ For­mats : WebP ❌ – AVIF ❌
  Un peu daté, mais utile pour des com­pres­sions rapides en lot.

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

• Ima­geOp­tim
  ➤ Pla­te­forme : macOS
  ➤ Prix : Gra­tuit (open source)
  ➤ For­mats : WebP ✅ – AVIF ❌
  Glis­sez-dépo­sez vos images pour qu’elles soient com­pres­sées et net­toyées.
  👉 Idéal pour les uti­li­sa­teurs Mac en quête d’efficacité.
  
• RIOT (Radi­cal Image Opti­mi­za­tion Tool)
  ➤ Pla­te­forme : Win­dows
  ➤ Prix : Gra­tuit
  ➤ For­mats : WebP ✅ – AVIF ❌
  Com­pres­sion fine avec aper­çu en temps réel, ges­tion des méta­don­nées.
  👉 Pour ceux qui veulent gar­der le contrôle sur chaque paramètre.

Logiciels graphiques avec options de compression et de conversion

Ces outils per­mettent à la fois d’éditer, de redi­men­sion­ner, de conver­tir les for­mats (JPEG → WebP par ex.) et de choi­sir le niveau de com­pres­sion à l’export.

• Affi­ni­ty Pho­to
  ➤ Pla­te­forme : Win­dows, macOS, iPa­dOS
  ➤ Prix : Envi­ron 80 € (licence per­pé­tuelle)
  ➤ For­mats : WebP ✅ – AVIF ✅ (selon ver­sion)
  Export avan­cé avec contrôle qua­li­té, dimen­sions, pro­fils colo­ri­mé­triques.
  👉 Un bon com­pro­mis entre puis­sance et accessibilité.
  
• GIMP
  ➤ Pla­te­forme : Win­dows, macOS, Linux
  ➤ Prix : Gra­tuit (open source)
  ➤ For­mats : WebP ✅ – AVIF ✅ (via plu­gin ou ver­sion récente)
  Moins intui­tif, mais très com­plet.
  👉 Pour les uti­li­sa­teurs à l’aise avec les logi­ciels libres.
  
• Adobe Pho­to­shop
  ➤ Pla­te­forme : Win­dows, macOS
  ➤ Prix : Abon­ne­ment à par­tir de 24 €/mois
  ➤ For­mats : WebP ✅ (natif) – AVIF ❌ (plu­gin requis)
  Export “Enre­gis­trer pour le web” ou “Expor­ter sous…” avec réglage fin.
  👉 Un stan­dard pro, mais payant.

Optimisation avancée : responsive et lazy-loading

Une image bien com­pres­sée, c’est bien. Mais une image bien ser­vie, au bon moment et à la bonne taille, c’est encore mieux. C’est là qu’interviennent deux notions clés : l’adaptation aux écrans (res­pon­sive) et le char­ge­ment dif­fé­ré (lazy-loa­ding).

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

Sur un smart­phone ou un écran 4K, vos visi­teurs n’ont pas les mêmes besoins. Pour évi­ter de char­ger une image trop lourde sur mobile (ou trop floue sur Reti­na), on uti­lise des tech­niques comme :

srcset et sizes dans le HTML

Ces attri­buts per­mettent au navi­ga­teur de choi­sir la bonne ver­sion de l’image selon :

• la taille de l’écran
• la den­si­té 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 navi­ga­teur télé­charge uni­que­ment la ver­sion adap­tée à l’écran de l’utilisateur. Résul­tat : un site plus rapide, sans com­pro­mis sur la qualité.

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

• Word­Press intègre auto­ma­ti­que­ment srcset pour toutes les images ajou­tées via l’éditeur, dès lors que plu­sieurs tailles sont géné­rées (thème ou plugins).
• Sho­pi­fy prend en charge le srcset via ses balises d’image Liquid ({{ image | img_url: '800x' }}…), sur­tout dans les thèmes modernes.
• Joom­la ! ne l’intègre pas auto­ma­ti­que­ment, mais des exten­sions comme JCH Opti­mize ou Ima­ge­Re­cycle peuvent le gérer.
• Dru­pal pro­pose une ges­tion fine via le module “Res­pon­sive Images”.
• Pres­ta­shop ne gère pas srcset nati­ve­ment, mais cer­tains thèmes le prennent en charge.
• CMS head­less ou sites sta­tiques (Gats­by, Next.js, etc.) gèrent srcset via leurs géné­ra­teurs d’image.

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

Plu­tôt que de char­ger toutes les images dès l’arrivée sur la page, on peut dif­fé­rer leur char­ge­ment jusqu’à ce qu’elles soient visibles à l’écran. C’est le prin­cipe du lazy loa­ding.

Attribut HTML loading="lazy"

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

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

👉 Cela per­met de réduire le temps de char­ge­ment ini­tial, sur­tout sur les pages longues avec beau­coup d’images (articles, fiches pro­duits, portfolios…).

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

• Word­Press active auto­ma­ti­que­ment loading="lazy" depuis la ver­sion 5.5, sauf pour la pre­mière image visible.
• Sho­pi­fy uti­lise éga­le­ment le lazy-loa­ding par défaut sur la majo­ri­té de ses thèmes récents.
• Joom­la !, Dru­pal, Pres­ta­shop ou Ghost peuvent l’activer via des modules, thèmes ou per­son­na­li­sa­tion HTML.
• Sur un site sta­tique ou un CMS sur mesure, vous pou­vez sim­ple­ment ajou­ter l’attribut loading="lazy" dans vos balises <img> (prise en charge native par tous les navi­ga­teurs modernes).

👉 Quel que soit votre CMS, il est for­te­ment recom­man­dé de véri­fier que le lazy-loa­ding est bien actif, sur­tout sur les pages longues ou riches en médias.

Bon à savoir

• Le lazy-loa­ding ne rem­place pas l’optimisation des images : une image trop lourde met­tra tou­jours du temps à se char­ger, même en différé.
• Le srcset et le lazy-loa­ding peuvent être com­bi­nés pour un maxi­mum d’efficacité.

Conclusion

Opti­mi­ser vos images pour le web n’est pas une tâche réser­vée aux experts. Avec les bons for­mats, des outils adap­tés et quelques bonnes pra­tiques, vous pou­vez consi­dé­ra­ble­ment réduire le poids de vos pages, accé­lé­rer le char­ge­ment de votre site et offrir une meilleure expé­rience à vos visi­teurs, quel que soit leur appareil.

C’est aus­si un geste pour votre réfé­ren­ce­ment, vos conver­sions… et même l’impact envi­ron­ne­men­tal de votre site.

Alors, avant de cli­quer sur “Impor­ter une image”, pen­sez à :

• choi­sir le bon for­mat (WebP, AVIF, JPEG…)
• redi­men­sion­ner intelligemment
• com­pres­ser sans excès
• et pro­fi­ter des options de char­ge­ment intel­li­gent (srcset, lazy-loa­ding, etc.)