La compression des images

 La compression des images

Introduction

La compression d’image est une étape cruciale en design graphique, web, et photographie. Elle permet de réduire la taille des fichiers tout en conservant une qualité visuelle acceptable. Que ce soit pour accélérer le chargement d’un site web, économiser de l’espace ou préparer des fichiers à l’impression.

La compression d’image est un processus qui permet de réduire la taille d’un fichier image en limitant le nombre d’informations qu’il contient, tout en essayant de conserver un rendu visuel proche de l’original.

Il existe deux grands types de compression :

Type de compression Description Qualité Exemple
Avec perte (lossy) Supprime des données pour réduire la taille Peut dégrader l’image JPG, WEBP, GIF
Sans perte (lossless) Réduit la taille sans supprimer d’informations Qualité inchangée PNG, TIFF, SVG

Compression avec perte (lossy)

Ce type de compression enlève des détails visuels que l’œil humain remarque peu, comme des variations subtiles de couleurs ou de texture.

Avantages :

  • Fichiers très légers
  • Idéal pour le web, les réseaux sociaux, ou les archives volumineuses

    Inconvénients :

  • Perte de qualité irréversible
  • Artéfacts visibles si trop compressé

Exemples :

  • .JPG : parfait pour les photos (réduction par niveaux de détails)
  • .WEBP : meilleure compression avec bonne qualité
  • .GIF : couleurs limitées, mais léger

 Compression sans perte (lossless)

Cette méthode conserve toute la qualité originale. Aucune donnée n’est supprimée : l’image peut être reconstruite à l’identique.

 Avantages :

  • Qualité intacte
  • Idéal pour les illustrations, icônes, logos

 Inconvénients :

  • Fichiers plus lourds
  • Moins adaptés au web mobile

 Exemples :

  • .PNG : gère la transparence, parfait pour les interfaces
  • .TIFF : utilisé pour la photo professionnelle et l’impression
  • .SVG : format vectoriel compressé sans perte

Comment fonctionne la compression ?

Compression JPEG (avec perte) :

  • Divise l’image en blocs de pixels (généralement 8×8)
  • Applique une transformation mathématique (DCT)
  • Supprime les fréquences peu visibles
  • Résultat : fichier plus léger, mais parfois flou ou « pixellisé »

Compression PNG (sans perte) :

  • Repère les motifs répétés (comme les zones de couleur unie)
  • Les encode de manière plus efficace (algorithmes comme DEFLATE)
  • Résultat : fichier plus compact, sans perte

Cas pratiques

Besoin Format conseillé Compression
Photo sur un site web JPG / WEBP Avec perte
Logo sur fond transparent PNG / SVG Sans perte
Illustration simple SVG Sans perte
Animation légère GIF / Lottie Avec perte (GIF), vectoriel (Lottie)
Impression haute qualité TIFF / PDF Sans perte

Outils pour compresser des images

  • Web :
  • Logiciels :
    • Adobe Photoshop (export « Save for Web »)
    • ImageOptim (macOS)
    • FileOptimizer (Windows)

 Bonnes pratiques

  • Ne compresse pas une image déjà compressée plusieurs fois
  • Choisis le bon format en fonction du type d’image
  • Vérifie toujours la qualité après compression
  • Pour le web : vise des images < 500 Ko si possible
  • Utilise des formats vectoriels pour les éléments graphiques simples

 Conclusion

La compression des images est un équilibre entre qualité visuelle et performance. Bien maîtrisée, elle permet de rendre un site plus rapide, un fichier plus léger, et une impression plus nette. Il est donc essentiel de choisir le bon format, la bonne méthode de compression et le bon outil pour chaque situation.

 

Les formats

Les Formats

Formats vectoriels 

Idéal pour logos, illustrations, cartes, impression haute qualité

Format Description Avantages Utilisation courante
.SVG (Scalable Vector Graphics) Format web-friendly XML Léger, lisible par les navigateurs, interactif Web, icônes, illustrations
.AI (Adobe Illustrator) Format natif Illustrator Puissant pour l’édition vectorielle Identité visuelle, print
.EPS (Encapsulated PostScript) Ancien format vectoriel standard Compatible avec de nombreux logiciels Logos, documents professionnels
.PDF (Portable Document Format) Peut contenir vecteurs et images Parfait pour impression et partage Affiches, flyers, rapports

Formats pour animation / vidéo

Pour le motion design, la vidéos, les transitions

Format Usage Particularités
.MP4 Vidéo Léger, universel
.MOV Vidéo (Apple) Haute qualité
.GIF Animation simple Sans son
.Lottie (.json) Animation vectorielle web Ultra léger, interactif

Formats d’impression classiques 

Compatibilité imprimeur, sécurité, respect des marges

Format Description
.PDF/X Variante pour impression professionnelle (normes ISO)
.PDF/A Archivable, sans dépendances externes
.PDF Polyvalent : images, vecteurs, textes

Formats bitmap.

Ils constituent des images de pixelisées et sont communément appelés format matriciel. Idéal pour photos, textures, visuels détaillés

Format Description Avantages Utilisation courante
.JPG / .JPEG Format compressé (avec perte) Léger, universel Photos, web
.PNG Bitmap compressé (sans perte) Gère la transparence Web, interfaces, logos
.GIF Supporte l’animation simple Léger, animé Mèmes, icônes animés
.TIFF / .TIF Format haute qualité Sans perte, très détaillé Impression, scan
.WEBP Nouveau format Google Très compressé, bonne qualité Web (images rapides)

 Formats d’édition ou de projets 

On les appelle souvent les fichiers source, ils sont modifiables pour retouches et collaboration

Format Logiciel associé Description
.PSD Photoshop Calques, effets, haute qualité
.INDD InDesign Mise en page, magazines, livres
.XD Adobe XD Design UI/UX
.Figma / .FIG Figma UI/UX collaboratif, cloud
.SKETCH Sketch App (Mac) Design UI, apps
.CDR CorelDRAW Alternative à Illustrator

Formats interactifs ou 3D

Pour web interactif, design produit, rendu 3D

Format Usage Particularités
.GLTF / .GLB 3D web Léger, standard web
.OBJ / .FBX Modélisation 3D Pour jeux, animation
.HTML / .CSS / .JS Interfaces Pour le design web interactif

Résumé rapide par usage

Usage Formats recommandés
Logo SVG, AI, EPS, PDF
Affiche / Print PDF, TIFF, AI
Site web SVG (icônes), PNG, JPG, WEBP
Animation web GIF, Lottie (JSON), MP4
UI/UX Figma, XD, Sketch
Réseaux sociaux PNG, JPG, MP4
Photo HD / impression TIFF, PSD, JPG haute qualité