Comment optimiser les images pour le web (sans perdre en qualité)

Pour optimiser une image pour le web sans perte de qualité visible, vous faites trois choses : la redimensionner à la largeur réelle à laquelle elle apparaît sur la page (vous avez rarement besoin de plus de 1600px de large), l'enregistrer en WebP, et la compresser à environ 80 % de qualité. En pratique, une photo de 4 Mo sortie du téléphone tombe à 150–250 Ko — plus de 15× plus petite — sans que l'œil perçoive de différence. L'ordre compte : d'abord redimensionner, ensuite compresser.

Pourquoi la vitesse compte (et pourquoi les images sont la cause principale)

Sur la plupart des sites que nous voyons, les images sont de loin l'élément le plus lourd à charger — plus lourd que tout le texte, le code et les polices réunis. Une page avec 6 à 8 photos de téléphone non optimisées peut peser 15–25 Mo. Sur un téléphone avec un signal faible, cela fait plusieurs secondes d'écran blanc, et le visiteur part avant de voir quoi que ce soit.

Google mesure cela via les Core Web Vitals — en particulier le LCP (le temps que met la plus grande image du haut de page à apparaître). Nous ne vous promettons aucune « première place sur Google », mais un site rapide est un vrai signal de classement et, surtout, retient les gens sur la page. La vitesse n'est pas cosmétique ; c'est la première chose qu'un client ressent.

Étape 1 : Redimensionner à la largeur réelle

L'erreur la plus fréquente : mettre une photo de 4000×3000px à un endroit où elle apparaît en réalité à 600px de large. Le navigateur la réduit à l'affichage, mais télécharge quand même le fichier entier. Inutile.

Règles de largeur simples :

Pour les écrans modernes (retina), vous pouvez exporter au double de la taille d'affichage — une photo affichée à 600px, vous l'exportez à 1200px. C'est tout, pas plus.

Étape 2 : Choisir le format WebP

WebP est le format standard en 2026 : il est pris en charge par tous les grands navigateurs (plus de 94 % des utilisateurs, selon les données de compatibilité rapportées par Tinify) et produit des fichiers 25–35 % plus petits qu'un JPEG à qualité visuelle égale. Pour les photos et la plupart des images d'un site vitrine, WebP est le choix correct et simple.

Il y a aussi l'AVIF, un format plus récent qui compresse encore mieux (fichiers 20–40 % plus petits que le WebP). Il est excellent pour les grandes images, mais s'encode beaucoup plus lentement et est plus difficile à manier à la main. Notre recommandation : restez au WebP si vous éditez vos photos manuellement. L'AVIF a du sens quand le site génère les formats automatiquement.

Une règle utile : JPEG/WebP pour les photos, PNG/SVG pour les logos, icônes et graphiques avec du texte. Le SVG est vectoriel — il reste net à toute taille et pèse quelques Ko.

Étape 3 : Compresser (là où est la magie)

La compression « avec pertes » jette des détails que l'œil ne remarque pas. À 80 % de qualité, la différence avec l'original est pratiquement invisible, mais le fichier chute nettement. En dessous de 60 %, vous commencez à voir des artefacts moches, surtout sur un ciel dégagé ou la peau.

Outils gratuits que nous utilisons et recommandons :

• Squoosh.app (Google) — ouvrez-le dans le navigateur, glissez la qualité et voyez la différence en direct. Gratuit, sans compte.
• TinyPNG / TinyJPG — glissez les photos, téléchargez-les compressées. Rapide pour de petits lots.
• ImageOptim (Mac) — installez-le et glissez les photos dessus.

Checklist rapide avant de mettre en ligne

• [ ] Largeur ne dépassant pas ~2× la taille d'affichage
• [ ] Format WebP (ou JPEG si un fallback est nécessaire)
• [ ] Qualité ~80 %, vérifiée visuellement
• [ ] Chaque fichier sous ~250 Ko (idéalement sous 150 Ko)
• [ ] Nom de fichier descriptif : `coiffure-cluj.webp`, pas `IMG_4821.jpg`
• [ ] Texte alternatif (alt) rempli — bon pour l'accessibilité et pour le SEO local

Compromis honnêtes

L'optimisation manuelle prend du temps. Pour 10 photos, c'est un jeu de 15 minutes ; pour une boutique de 300 produits, non. Là, vous avez besoin soit d'un flux automatique (le site génère le WebP au téléversement), soit du lazy loading (les images du bas ne se chargent qu'au défilement). Beaucoup de plateformes modernes le font d'emblée — mais pas toutes, et rarement bien configurées.

Il y a un autre vrai compromis : si vous exagérez la compression pour gagner quelques Ko, vous abîmez l'image. Un site rapide avec des photos moches ne vend pas. L'équilibre — pas l'extrême — est l'objectif.

Chez MPO Web Studio (une équipe à Cluj-Napoca, travaillant 100 % à distance dans toute la Roumanie) nous livrons des sites avec les images déjà optimisées et les formats générés automatiquement, pour que la page soit rapide sans que vous touchiez chaque photo. Si vous voulez voir à quoi ressemblerait votre site fait correctement, nous vous faisons une démo gratuite — écrivez-nous sur WhatsApp au wa.me/40750257140 et on démarre.