By JCM Team on Sunday, 01 June 2014
Category: June

Citius Altius Fortius

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 :

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.

1 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 :

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 :

Les outils pour...

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

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.

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) :

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.

Leave Comments