Même si la plupart des gens ont l'ADSL, cela continue d'être utile d'optimiser ses images pour le web afin qu'elles soient le moins lourd possible en octet. Cela permet aux gens accédant au site via la 3G ou le satellite de ne pas passer leur forfait là-dedans¹⁾ et rend l'affichage plus fluide y compris sur les grosses connexions. Quel est l'intérêt d'avoir l'ADSL si on voit les images se charger lentement ? Mais certains sites oublient cette règle simple. Essayons de faire mieux !

Quel est le “bon poids” pour une image ?

• Pour une image très grande (comme un fond d'écran), 100 ko est un gros maximum à ne pas dépasser. Et faire moins, bien moins (50 ko) est encore mieux.
• Pour une image moyenne, comme une illustration pour un article, 10-20 ko est l'idéal ; on peut aller jusqu'à 50ko.
• Pour les petites images (vignettes, boutons, barres de décoration) il faut rester en dessous de 10ko. En général ces images font 1 ou 2 ko.

On considère que pour un affichage toujours fluide, la somme des images d'une page devrait rester en dessous de 100ko (en fait, la page complète ne doit peser que 100 ko au max à charger). C'est une règle difficile à suivre quand on teste avec une connexion adsl de bonne qualité, on ne se rend pas compte que ça rame déjà pour certains.

Mais comment y arriver ?

Une image de 1200*700 pixels pèse plus lourd qu'une image de 800*600. Faire une image plus petite en hauteur et largeur est la façon la plus simple de réduire son poids.

Sous Gimp, allez dans Image/Echelle et taille de l'image, faites varier la largeur ou la hauteur, en laissant la chaîne sur le côté des valeurs (afin de garder le ratio).

On peut aussi jouer sur la résolution, mais ce n'est pas ce qui fait le plus varier le poids ; si l'image est à 75 dpi, mettre une résolution plus basse peut faire gagner quelques octets, rarement plus.

Il existe trois formats principaux d'images pour le web : jpg, gif et png.

Le jpg est le format permettant de gagner le plus d'octet, mais il a deux limitations : il ne supporte pas la transparence et ne gère pas les animations. Pour la plupart des images, c'est pas un souci.

Le png gère la transparence, ce qui le rend très utile pour les boutons et certaines bannières, mais il est aussi plus lourd que le jpg. C'est un format d'image qui préserve plus d'informations.

Le gif gère aussi la transparence et permet de faire des animations (les gifs animés). Suivant les images, il est parfois plus ou moins intéressant que le png.

Avec un peu de pratique, on arrive à optimiser une image dans n'importe quel format, mais les réglages automatiques de Gimp suffisent déjà à gagner des ko simplement en changeant le format de l'image.

Sous Gimp, exportez en jpg, compressez à 55, puis dans les options avancées, cochez optimiser, et faire varier le curseur de l'adoucissement. Toutes les autres options doivent être décochées. L'image perdra légèrement en netteté mais restera très lisible. Une image de 1 299px*675px, faisant 158ko à la base, a été ainsi amené à 86ko (sans changer sa taille en pixel).

Il existe des logiciels avec des algorithmes de compressions assez efficaces. Une fois que vous avez accompli les actions au dessus, vous pouvez ajouter un coup de moulinette.

• https://imagify.io/ n'est malheureusement pas libre et demande un enregistrement pour bénéficier de leurs services, avec une limitation dans le nombre d'images uploadés tant qu'on ne paie pas, mais… ils sont extrêmement efficaces.
• https://imageoptim.com/ est open source… Mais uniquement sous Mac.
• Le script https://github.com/sapegin/picturebeaver fonctionne sous Windows.
• Sous Linux, nous manquons actuellement de solutions libres et d'une qualité finale équivalente à Imagify ; cependant, Imagemagick arrive à de bons résultats, parfois équivalent à Imagify (suivant les images).

Voici une commande en console qui transforme tout un lot d'image en une version compressée :

for i in *.jpg ; do a="${i%%.*}" ; echo $a ; convert ./$i -resize 800x600  -strip -quality 50 $a"min.jpg" ; done

Plus d'explications pour ceux qui n'ont pas l'habitude :

• for i in *.jpg : “pour tout ce qui se finit par .jpg” : changer le nom de l'extension si besoin.
• do a=“${i%%.*}” : créé une variable du nom de l'image sans son extension.
• echo $a : affiche le nom de l'image, ce qui permet de suivre la progression du script.
• convert ./$i : va convertir chaque image suivant les paramètres qui suivent :
  • -resize 800×600 : redimensionner en 800×600 pixels, ce qui suffit la plupat du temps pour le web,
  • -strip -quality 50 : diminue la qualité de 50%. Si vous voyez trop d'artefact, restez à 70. Plus le nombre est petit, plus l'image sera compressée, au détriment de la qualité.
  • $a“min.jpg” : le nom de l'image finale composé de son nom d'origine (variable $a) suivi de min.jpg. Cela indique aussi de convertir l'image en jpg.