Plus vite, plus haut, plus fort... L'idéal olympique devient le nôtre dès qu'il s'agit de nos sites internet ou de ceux de nos clients. C'est une des raisons pour lesquelles, nous les confions aussi volontiers à des outils du type de GTMetrix afin de nous assurer que nous faisons tout, pour le mieux. Et la liste des améliorations retournées par l'outil est à la hauteur, en général, des efforts à fournir. Ça ne manque jamais, dans le haut de la liste on trouve "Optimize images". Pour autant l'optimisation des images, fait partie des améliorations les plus faciles à apporter à son site web.

Avant de commencer et étayer notre sujet, voyons si nous pouvons discerner l'essentiel :

Comparaison des qualités relatives

Je sais que je n'ai plus mes yeux de 20 ans, mais moi, je ne vois pas de différence, nous avons là quatre images, trois formats différents, tous concernent une image de 259 x 173 pixels, l'image présente beaucoup de détails. La plus lourde pèse 29 Ko, la plus légère 5,3 Ko. Avant de voir ce que l'on peut faire pour améliorer notre score, voyons déjà ce dont nous disposons.

Il n'y a pas que la taille qui compte.

Globalement et à moins d'être vraiment retors, sur le web, il y a trois types d'images couramment utilisés :

• JPEG (Joint Photographics Expert Group) :  16,8 millions de couleurs, pas de transparence, type de compression 'lossy' ¹.
• PNG (Portable Network Graphics) : plus de 16,8 millions de couleurs, gestion de la transparence, type de compression 'lossless' ¹.
• GIF (Graphics Interchange Formats) : 256 couleurs, gestion de la transparence, gestion d'animation, type de compression 'lossless', requiert normalement le paiement d'une licence à Unisys.

Les autres formats (TIFF, BMP...) sont devenus plus rares. En ce qui concerne le format PNG, le format 64 bits a complètement repoussé le PNG 8 bits aux oubliettes.

¹ Il existe deux types de compression dans la gestion d'images, celui garanti sans perte de qualité: 'lossless', celui avec perte de qualité 'lossy'. Plus l'on manipule un fichier JPG (type lossy), plus on peut perdre de la qualité de l'image. On peut recopier avec compression un fichier PNG ou un fichier GIF autant de fois que souhaité sans dégradation quelconque.

La technologie utilisée par chaque standard a ses spécificités techniques, mais engage de fait aussi des comportements différents, tant lors de la compression des images, que lors de leur décompression et donc de leur affichage. Si l'on en croit le benchmark réalisé par Jackson Duncan, on obtient des écarts relativement importants :

• le temps de compression (une seule fois à la création) est 20 fois plus rapide pour un PNG utilisant l'option fastcompression que sans cette option et est sensiblement le même que pour le format JPG.
• le temps de décompression (chaque affichage) d'un format JPG est 3,5 fois plus rapide qu'un format PNG équivalent.
• le format PNG (en nuance de gris) est deux fois plus rapide que le format PNG  couleur.

Gagner de la bande passante

Je sais, il n'y a pas que la taille qui compte, mais quand même... Ce serait bien de commencer par tailler dans le vif du sujet (si j'ose m'exprimer ainsi). Globalement pour gagner de la taille finale, sans artefact, nous disposons de quelques moyens :

• Découper l'image (crop), pour commencer. On n'y pense pas toujours, mais inutile d'avoir une image de 1680px x 1024px, si seule la partie centrale de 400 x 220 intéresse vos visiteurs. Sans rien faire, le poids de votre image va déjà être divisée par 15 ou 20.
• Changer l'échelle (crunch), va probablement également nous permettre de gagner beaucoup sans forcément nuire à la qualité. Il faut être là, prudent, cela va dépendre pour beaucoup de l'image à présenter, mais des outils comme PhotoShop ou the Gimp, sont parfaitement équipés pour 'dégraisser' votre image en changeant son ratio d'affichage. La réduction de taille sans perte de qualité peut grandement économiser la bande passante. Le principe est de transformer une image disons de 400 x 192 (116 Ko) en 80 x 38 (6Ko). Avec un peu de chance on peut la réagrandir (légèrement) avec des effets de CSS sans trop de pixellisation.
• Compresser l'image, sans changer ses dimensions cette fois. Cela nécessite quelques outils, mais comme nous pouvons le voir dans la comparaison des quatre dragons du début, le changement de poids n'induit pas forcément un changement de qualité.

Les outils pour...

Là, ce n'est pas ce qui manque. Petit tour d'horizon, rapide :

• Photoshop : l'outil d'Adobe est décliné en 36 versions et prix différents. Disponible désormais sur le cloud, gros investissement financier et technique.
• The Gimp (Gnu Image Manipulation Program) : le même ou presque, en gratuit, par le monde libre, on aime ou on déteste, gros investissement technique à prévoir, beaucoup de add-ins gratuits pour faire tout (et n'importe quoi).
• JCE Image Manager : pour un coût modique et faire directement dans Joomla! le plus gros de ce dont vous avez besoin.
• Save For Web : l'outil de dégraissage par excellence. Un même add-in pour Photoshop et the Gimp qui permet de définir vos règles de sauvegardes de fichiers compressés. Indispensable.
• Riot (Radical Image Optimization Tool) : définit les règles de compression pour passer de plus de 20 formats d'entrée à GIF, PNG ou JPG en visualisant, l'avant - après. Permet de traiter selon les mêmes règles en mode batch un nombre illimité de fichiers, répertoire par répertoire à une vitesse fulgurante. A noter que Riot se base sur une personnalisation de l’algorithme optiPNG.
• optiPNG : recommandé par GTMetrix lui-même, c'est tout dire, mais réservé à un usage de passionné, rébarbatif à souhait (fonctionne sous DOS en mode commande, pour rajeunir les vieux crabes !). Note : c'est pas une critique, j'en fait parti.
• PNGOut : recommandé également par GTMetrix, même remarques que pour optiPNG. Cette fois-ci, il y a une interface visuelle, mais c'est juste pour la frime. Résultats plus que sérieux.
• jpegTran : encore un outil propulsé par GTMetrix, tout aussi efficace que les deux précédents et tout aussi peu convivial, même s'il est d'apparence graphique, mais les images en sortie... difficile de faire mieux.
• tinyPNG : est également un excellent outil accessible directement sur le net ou par un composant pouvant être installé dans Photoshop. Ne fonctionne, comme son nom l'indique, que pour compresser les fichiers PNG.

Et maintenant on fait quoi ?

On commence par réfléchir, au cas par cas. Hélas, il n'y a pas de solution générique toute prête.

• Vous avez besoin d'animation, pas de problème le meilleur choix c'est le format GIF.
• Vous avez besoin de transparence, voire de transparence à plusieurs niveaux, pas d’ambiguïté non plus, choisissez PNG.
• Vous avez besoin de qualité photographique, pareil, le meilleur choix est JPEG.
• Maintenant il y a tout le reste. Que des cas particuliers :
  • Vous faites de la documentation et avez besoin de copies d'écran avec du texte, le PNG (lossly) permet une compression intéressante tout en restant lisible. Mais du JPG en vignette avec un zoom peut être une solution efficace.
  • Pour un catalogue d'images, du JPG fortement compressé et réduit avec un effet de zoom en mouseover est une solution peu coûteuse et satisfaisante.
  • Reprendre de l'existant et faire du traitement de masse s'effectue assez facilement avec Riot, par exemple en mode batch, reste ensuite à modifier le contenu des articles, si vous avez choisi de changer de type de format.

Nous venons de parler deux fois de solutions d'économies basées sur des vignettes et un effet de zoom. Ce genre d'effet peut être réalisé de deux manières, en utilisant une seule image agrandie avec un ratio variable, comme avec le code CSS ci-après par exemple, ou en utilisant deux images, une vignette très réduite, accompagnée de l'image d'origine qui est visualisée par bribes au survol de la première. Il y a un grand nombre d'outils disponibles dans le JED basés sur ce principe. Très efficace pour libérer de la place sur la page et donner un confort d'utilisation aux utilisateurs, mais hors sujet dans le cas qui nous préoccupe : le gain de bande passante. Il faudrait que l'image d'origine ne soit chargée qu'au moment du survol par la souris et en cas de besoin seulement pour satisfaire à notre préoccupation et je n'ai trouvé aucun plugin qui réponde à cette demande.

Pour un effet de zoom sans surcoût et très efficace, on peut se contenter d'une classe CSS comme (par exemple) :

img.zoom:hover {

  -moz-transform: scale(2.0);

  -webkit-transform: scale(2.0);

  -o-transform: scale(2.0);

  -ms-transform: scale(2.0,2.0);

  -webkit-transition: all 500ms ease-in-out;

  -moz-transition: all 500ms ease-in-out;

  -o-transition: all 500ms ease-in-out;

  transition: all 500ms ease-in-out;

  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);

  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);

  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5);

  position: relative;

  z-index: 50;

  margin: 0 -60px 27px 80px;

}

L'effet est radical sans augmentation aucune de bande passante, au contraire, puisque l'idée est de compresser l'image d'origine et de la réduire. Il est on ne peut plus simple de réécrire la même classe avec un facteur d'agrandissement de 1,5 de 3 ou plus, scale(1.5), scale(3.0)  en fonction des besoins.

 Pour ceux qui veulent vraiment tout savoir, les dragons de la présentation étaient respectivement de gauche à droite  (tous en 259 x 173 px) :

• format JPG sauvegarde normale ratio de compression naturel, conservation de qualité de 80% poids : 16, 0 Ko
• format GIF sauvegarde normale poids 28,7 Ko
• format PNG sauvegarde normale ratio de compression maximal de 9 poids : 25,9 Ko
• format JPG sauvegardé par Riot avec un taux de qualité conservé de 60% poids 5,35 Ko

Pour la petite histoire, il y avait également (non présentée pour des raisons de place) une sauvegarde "save for web" prise à partir de GIMP, en format JPG donc avec un taux de qualité de 80% et d'un poids final de 10,2 Ko.