Quelle compression choisir pour une image destinée au web?

Comprendre les types de compression: avec perte vs sans perte

Avant de choisir vos paramètres de compression, il est essentiel de comprendre les deux grandes familles de compression et leurs implications.

La compression sans perte (lossless) réduit le poids du fichier sans supprimer aucune donnée. Quand vous décompressez l'image, vous retrouvez exactement l'original, pixel pour pixel. Le format PNG utilise ce type de compression. L'avantage: qualité parfaite. L'inconvénient: réduction de poids limitée, généralement 20-50%.

La compression avec perte (lossy) supprime des données jugées peu perceptibles par l'œil humain. L'algorithme analyse l'image et élimine les variations subtiles que notre cerveau ne perçoit pas consciemment. Le format JPG est le plus connu. L'avantage: réduction massive du poids (jusqu'à 90%). L'inconvénient: perte irréversible d'informations.

La clé est que la compression avec perte, bien calibrée, produit des images visuellement identiques à l'original tout en étant 5 à 10 fois plus légères. C'est pourquoi elle est privilégiée pour le web.

Notre recommandation générale: compression avec perte pour les photos, compression sans perte pour les graphiques avec des contours nets (logos, textes, diagrammes).

Comparatif des formats: JPG, PNG, WebP, AVIF

Chaque format de fichier a ses forces et ses cas d'usage optimaux. Voici un comparatif détaillé pour vous aider à choisir.

Le JPG est le format historique pour les photographies. Il excelle dans la compression des images avec des millions de nuances de couleurs et des dégradés subtils. Pour une photo classique, c'est le choix le plus sûr avec une compatibilité universelle.

Le PNG brille pour les images avec des aplats de couleur, du texte et de la transparence. Un logo, une capture d'écran, une illustration vectorisée: le PNG préserve les contours nets sans artefacts. En revanche, pour les photos, il produit des fichiers 3 à 5 fois plus lourds que le JPG.

Le WebP, développé par Google, combine les avantages des deux. Il offre une compression avec perte supérieure au JPG (25-35% plus léger à qualité égale) ET supporte la compression sans perte et la transparence comme le PNG. C'est le format recommandé pour le web moderne.

L'AVIF, basé sur le codec vidéo AV1, pousse encore plus loin les performances: jusqu'à 50% plus léger que le WebP à qualité égale. Sa compatibilité est cependant plus limitée (Chrome 85+, Firefox 93+, Safari 16+).

Pour une compatibilité maximale, servez du WebP avec un fallback JPG/PNG. Pour les navigateurs récents uniquement, l'AVIF offre les meilleures performances.

Choisir le bon niveau de qualité JPG

Le format JPG permet d'ajuster finement le niveau de qualité, généralement sur une échelle de 0 à 100. Mais que signifient réellement ces chiffres?

Qualité 100%: aucune compression visible, fichier très lourd. Réservé à l'archivage, jamais pour le web. Une photo de 10 Mo en qualité 100% ne sera pas visuellement meilleure qu'en qualité 90%.

Qualité 90-95%: compression minimale, quasi invisible. Recommandé pour les images critiques (portfolio photographique professionnel, images produits luxe). Poids réduit de 30-50% par rapport à l'original.

Qualité 80-85%: le sweet spot pour le web. La différence avec l'original est imperceptible pour 99% des gens. Le poids est réduit de 60-80%. C'est le réglage par défaut de notre outil.

Qualité 70-75%: compression visible sur les détails fins et les dégradés. Acceptable pour les images secondaires, les vignettes, les aperçus. À éviter pour les images importantes.

Qualité inférieure à 70%: artefacts de compression visibles (blocs pixelisés, banding). Uniquement pour des cas extrêmes où le poids est critique et la qualité secondaire.

Notre conseil: commencez à 82% et ajustez selon le résultat. Certaines images tolèrent 75%, d'autres nécessitent 88%. Prévisualisez toujours avant de valider.

Compression selon le type d'image

Le type de contenu visuel détermine la stratégie de compression optimale. Voici les recommandations par catégorie.

Photos et images naturelles: format JPG ou WebP, qualité 80-85%. Les dégradés de couleurs et les textures organiques cachent bien les artefacts de compression. C'est le cas le plus favorable.

Graphiques et diagrammes: format PNG ou WebP sans perte. Les aplats de couleur uniformes et les lignes nettes ne tolèrent pas la compression JPG qui crée des artefacts autour des contours.

Logos et icônes: format PNG (avec transparence) ou SVG (vectoriel). Ces éléments sont souvent affichés en petit et nécessitent des bords parfaitement nets. Le SVG est idéal car infiniment scalable.

Captures d'écran: format PNG pour préserver le texte lisible. Si le poids est un problème, le WebP sans perte offre une compression légèrement meilleure.

Images avec texte superposé: format PNG ou WebP sans perte. Le texte sur une photo compressée en JPG devient flou et difficile à lire.

GIFs animés: format GIF (limité à 256 couleurs) ou WebP animé (meilleure qualité, poids réduit). Pour les animations complexes, envisagez le format vidéo (MP4, WebM).

Impact de la compression sur le SEO et les Core Web Vitals

Depuis 2021, Google intègre les Core Web Vitals dans son algorithme de classement. La compression des images impacte directement plusieurs de ces métriques.

Le LCP (Largest Contentful Paint) mesure le temps d'affichage du plus grand élément visible. C'est souvent une image (hero, bannière, produit). Une image lourde = un LCP dégradé = un moins bon classement Google.

Google recommande un LCP inférieur à 2,5 secondes pour une bonne expérience. Sur une connexion mobile moyenne, cela implique que votre image principale ne devrait pas dépasser 200-300 Ko.

Le CLS (Cumulative Layout Shift) est indirectement impacté. Des images sans dimensions explicites peuvent causer des sauts de mise en page lors du chargement. Compresser ne suffit pas: spécifiez toujours width et height en HTML.

PageSpeed Insights analyse spécifiquement vos images et indique celles qui sont mal optimisées. L'outil suggère les formats modernes (WebP, AVIF), le redimensionnement et la compression.

Notre recommandation: visez un score PageSpeed de 90+ sur mobile. Les images bien compressées sont souvent la clé pour y arriver.

Stratégie de compression pour différentes pages

Toutes les pages de votre site n'ont pas les mêmes exigences. Adaptez votre stratégie de compression au contexte.

Page d'accueil: compression agressive. C'est votre vitrine, elle doit charger en moins de 3 secondes. L'image hero peut être grande (1920px) mais doit peser moins de 150-200 Ko.

Pages produits e-commerce: qualité élevée (85-90%). Les visiteurs veulent voir les détails du produit. Proposez un zoom qui charge une version haute résolution à la demande.

Articles de blog: compression standard (80%). Les images illustrent le propos sans être le focus principal. Elles peuvent être plus légères.

Galeries photos: vignettes très compressées (70-75%) + originaux en haute qualité chargés au clic. L'utilisateur ne charge que ce qu'il veut voir en détail.

Landing pages: compression maximale sans dégradation visible. Chaque Ko compte car ces pages doivent convertir rapidement. Testez jusqu'où vous pouvez aller.

Backoffice / admin: compression minimale. Ces images ne sont vues que par quelques utilisateurs internes. Privilégiez la rapidité d'upload.

Outils et workflow de compression efficace

Un bon workflow de compression vous fait gagner du temps et garantit des résultats cohérents. Voici les outils et méthodes recommandés.

Notre outil en ligne est idéal pour les compressions ponctuelles ou par lot. Aucune installation, interface intuitive, traitement local (confidentialité). Parfait pour les créateurs de contenu et les petits sites.

Pour les développeurs, les outils CLI comme Squoosh CLI, imagemin ou Sharp (Node.js) permettent d'automatiser la compression dans le pipeline de build. Les images sont optimisées automatiquement à chaque déploiement.

Les plugins CMS (ShortPixel, Imagify, EWWW pour WordPress) compressent les images à l'upload. Pratique mais attention: certains appliquent des réglages trop agressifs par défaut.

Les CDN d'images (Cloudinary, Imgix, ImageKit) optimisent à la volée selon l'appareil du visiteur. Idéal pour les sites à fort trafic avec des besoins dynamiques.

Workflow recommandé: 1) Redimensionner à la bonne taille, 2) Compresser au format optimal, 3) Vérifier la qualité, 4) Uploader. Ne jamais recompresser une image déjà compressée.

Tests et validation de la compression

Après compression, validez toujours le résultat avant publication. Voici les vérifications essentielles.

Comparaison visuelle: affichez l'original et la version compressée côte à côte. Zoomez à 100% sur les zones de détails (visages, texte, motifs). Si vous voyez une différence nette, augmentez la qualité.

Vérification du poids: le fichier atteint-il votre objectif? Pour une image web standard, moins de 100 Ko est idéal, moins de 200 Ko est acceptable.

Test multi-écrans: les artefacts de compression sont plus visibles sur les écrans haute résolution (Retina, 4K). Testez sur différents appareils si possible.

Calcul du ratio: divisez le poids original par le poids compressé. Un ratio de 5:1 à 10:1 est excellent. Au-delà de 15:1, vérifiez attentivement la qualité.

Test en conditions réelles: chargez la page avec vos nouvelles images sur une connexion mobile (ou simulée). Le temps de chargement est-il satisfaisant? Les images s'affichent-elles rapidement?

Notre outil affiche ces métriques automatiquement: gain de poids, prévisualisation comparée, format de sortie. Tout ce dont vous avez besoin pour valider en un coup d'œil.

How to do it in 3 steps

Frequently asked questions