tags: tuto compression

Guide de compression d’images

Objectifs:
Ce document est un guide à destination de toute personne souhaitant apprendre à compresser des images numériques à l’aide d’outils simples et gratuits, en ligne ou hors ligne.

Le but de ces techniques est de réduire au maximum le poids des images que l’on décide de publier en ligne, afin de réduire le volume des données des pages y faisant appel (et donc leur temps de chargement), ainsi que l'espace disque nécessaire à leur stockage.

En ligne

Dithering

• Dither it!
  • différents presets de palettes (par exemple Black & White)
  • options
    • Image size : pas de possibilité de définir de taille personalisée pour le moment, juste des presets (320px, 640px, 1080px, 1280px)
    • Algorythm : différents algorythmes de compression (FloydSteinberg par défaut)

Compression

Multi formats

• Squoosh
  • outils tout en un
  • preview avant / après
  • réglage de qualité pour le format JPG
  • option de dithering

JPG/PNG

• TinyJPG / TinyPNG
  • 20 images à la fois, différences quasi-imperceptibles à l’œil nu (sauf cas de dégradés de couleurs par exemple)

SVG

• SVGOMG
  • inputs : ficher SVG Open SVG ou code SVG Paste Markup
  • nombreuses options de réglages

Hors-ligne

GIMP 2.10

Les réglages qui suivent permettent d’obtenir une image tramée en noir et blanc avec pixels visibles (dithered). Pour obtenir d’autres effets, libre à vous de modifier les réglages de Palettes et de Tramage de l’étape 4.

1. Télécharger et installer la dernière version de GIMP (compatible GNU/Linux, OS X, Microsoft Windows)

2. Ouvrir votre image JPG ou PNG dans Gimp Fichier > Ouvrir…
   Si la fenêtre suivante s’ouvre, laissez Mode de rendu > Colorimétrie relative puis cliquer sur Convertir
   

3. Réduire la taille de l’image jusqu'à la dimension souhaitée Image > Échelle et taille de l’image… Laisser les liens chaînés pour ne pas déformer l’image

   • Taille de l’image > Largeur : 1024px (par exemple). La hauteur s’adapte automatiquement
   • Résolution : 72dpi. La Résolution en X et en Y doit rester identique
   • Qualité > Interpolation : Cubique (par défault)
   • Mise à l’échelle
     
   • Recadrer si besoin Image > Taille du canvevas…
     • nécessaire si l'on souhaite par exemple que son image respecte un certain ratio (16:9, 4:3, 3:2, 2:1, etc.). Dans l'image ci-dessous, le ratio est égale à 4:3 (1024:768 = 4:3 = 1.333)
     • peut aussi se faire après l’étape 4
       

4. Modifier le mode le l’image Image > Mode > Couleurs indexées…

   • Palette : Utiliser une palette noir et blanc (1-bit)
   • Tramage > Tramage des couleurs : Floyd-Steinberg (normal)
   • Convertir
     

5. Exporter Fichier > Exporter sous…

   • Nommer votre fichier comme bon vous semble, par exemple image-dithered-b&w-1024w
   • Choisir ou créer le dossier de destination
   • Cliquer sur Sélectionner le type de fichier (en bas de la fenêtre) pour afficher tous les formats d’exports possibles
   • Sélectionner Image PNG
   • Exporter
     
   • un nouvelle fenêtre s’ouvre : laissez les paramètres par défaut (voir image ci-dessous)
   • Exporter

6. Compresser votre image à l’aide de TinyPNG
   • Sélectionner ou glisser-déposer votre fichier (20 fichiers à la fois maximum)
   • Attendre que la compression s’effectue
   • Télécharger votre fichier compressé, 1 par 1 ou tous en-même temps en cliquant sur Download All
   • Remplacer votre précédant fichier (non compressé) par celui que vous venez de télécharger (compressé, ou tinyfied)

---

Glossaire

Image vectorielle

Image constituée d’objets géométriques individuels (segments de droite, arcs de cercle, courbes de Bézier, polygones, etc.), définis chacun par différents attributs (forme, position, couleur, remplissage, visibilité, etc.) et auxquels on peut appliquer différentes transformations.

• Formats (les plus communs) :
  • SVG : format vectoriel universel, affichable directement dans le navigateur
  • AI : format vectoriel du logiciel Adobe Illustrator

Les notions de pixels, de définition et de résolution ne s’appliquent pas à une image vectorielle.

Image matricielle (ou bitmap)

Image constituée d’une matrice de points colorés, c’est-à-dire d’un tableau, d’une grille, où chaque case possède une couleur qui lui est propre et est considérée comme un point (les fameux pixels).

• Formats (les plus communs, tous affichables dans le navigateur) :
  • JPEG/JPG : adapté pour les photographies et les images complexes, ne permet pas la gestion de la transparence, compression avec perte (lossy compression)
  • PNG : adapté pour tout le reste, dont les images en couleurs indéxées, permet la gestion transparence
  • GIF : adapté pour les images animées et/ou en couleurs indéxées, limité à 256 couleurs, gère également la transparence, compression sans perte (lossy compression)
• Définition : nombre de pixels composants une image matricielle, soit le nombre de pixels qui la composent en hauteur et en largeur.
  exemple : 200px par 450px, abrégé en « 200 × 450 »
• Résolution : nombre de pixels par unité de longueur (point par pouce = ppp, ou dot per inch = dpi en anglais)
  exemples : 72dpi (pour le web), 144dpi (écrans Retina), 300dpi (pour l’impression)
• Mode : modèle mathématique destiné à représenter la couleur par des grandeurs auxquelles on peut associer des nombres
  • RVB (RGB en anglais) : synthèse additive, adapté pour l’écran et le web. Valeurs entre 0 et 255.
    exemple : rgb(255, 0, 0) = rouge
  • CMJN (CMYK en anglais) : synthèse soustractive, adapté pour l’impression. Valeurs entre 0 et 100.
    exemple : cmyk(0, 100, 100, 0) = orange
  • Nivaux de gris (Greyscale en anglais) : image en noir et blanc (avec toutes les valeurs de gris entre)
  • Couleurs indexées (Indexed colors en anglais) : seulement certaines couleurs définies seront utilisées (peut importe leur nombre). Moins il y a de couleurs, moins le fichier pesera lourd à la fin.
    exemple : image en bichromie jaune et noir

---

Pour aller plus loin…

Image numérique

• Wikipédia, Image numérique

Compression d’images

• La compression des images numériques (support de cours PDF)
• Wikipédia, Diffusion d’erreur (Dither)
• Olivier Losson, Traitement d’images – Compression d’images (cours théorique, principes mathématiques avancés)

Low-tech numérique

• Low-tech Magazine, How to build a low-tech website
• Gauthier Roussilhe, Éco-conception, le brouillard à venir [3/4]
• GreenIT, Pour une low-tech numérique