29/09/2016 Une mosaïque d'images pour réduire le nombre de fichiers

Pour tout adepte de l' écoconception web, la réduction du nombre de fichiers transférés est un incontournable.

Les fichiers CSS ? On les concatène en un seul. Idem pour les fichiers JavaScript.

Les images quant à elles sont les fichiers les plus lourds (vidéos exceptées). Réduire leur nombre a un impact direct sur les performances.

Sprites CSS

Quand il s'agit d'images liées au graphisme du site (pictogrammes, textures), il est de bon ton de se tourner vers les sprites CSS. Les intégrateurs web utilisent souvent cette technique. Elle consiste à rassembler en une seule image plusieurs pictogrammes. Chaque pictogramme sera affiché en extrayant la portion correspondante de la grosse image. En guise d'exemple, voici celui de Google (82 images en une seule) :

On parle bien ici de réduire le nombre de fichiers images, et non pas le nombre d'images.

Une mosaïque

En tant qu'éco-concepteur web, je m'évertue à réduire drastiquement le nombre de fichiers images sans pour autant que le site devienne un désert visuel.

En cherchant ce juste équilibre, m'est venu l'idée d'une mosaïque. En voici la première réalisation :

Cette mosaïque figure en page d'accueil du site mlegouis.fr (comédien) et contient 100 images de spectacles.

À la différence des sprite CSS, ici, l'image est affichée en entier.

Le fichier image est créé en amont, grâce à la bibliothèque GD.

Pseudo-mosaïque

On pourrait tout aussi bien afficher une mosaïque à la volée à partir de 100 vignettes :

Pour qu'elle ressemble à la mosaïque du paragraphe précédent (c'est-à-dire carrée et sans filets intérieurs), on cantonnerait ces 100 vignettes à un conteneur de 300x300 et le tour serait joué.

<div> <img src="img1.jpg" /> <img src="img2.jpg" /> <!-- ... --> <img src="img99.jpg" /> <img src="img100.jpg" /> </div>

J'emploie volontairement le conditionnel, car y a-t-il un seul développeur assez inconscient pour afficher d'un coup 100 images sur une page web ?

Gain de performances

Déjà, il faut savoir qu'une image de 300x300 pèse 4 fois moins lourd que 100 vignettes de 30x30. On compare pourtant la même superficie (90000 pixels).

	Mosaïque	Vignettes
Nb de requêtes	1	100
Poids total	34,71 Ko	148,17 Ko
Temps chargement	0,554 s	1,987 s

Une mosaïque éco-conçue est plus rapide à charger, car plus légère et nécessitant moins de requêtes. Elle s'affichera sans peine sur smartphone.

Interactions avec les tesselles

Dans le jargon de la mosaïque, une tesselle, c'est l'élément constitutif (un petit carré en marbre, en pierre, en terre). Une tesselle est un peu à la mosaïque ce que l'atome est à la matière.

Autant les tesselles d'une vraie mosaïque sont distinctes les unes des autres (reliées par un enduit), autant les vignettes d'une mosaïque en image sont fondues dans la masse. On ne les différencie que visuellement.

Il est pourtant possible d'interagir avec chaque vignette de l'image grâce à la balise HTML <map> qui permet de définir des zones cliquables sur une image.

<img id="mosaique" src="mosaique.jpg" usemap="#zones-cliquables" /> <map id="zones-cliquables"> <area data-id="1" title="Cityzen Kane" href="popup()" shape="rect" coords="0,0,30,30" /> <!-- .. --> <area data-id="100" title="Opéra trottoir" href="popup()" shape="rect" coords="270,270,300,300" /> </map>

Grâce au code ci-dessus, cliquer sur une vignette ouvre en popup la fiche du film ou de la pièce correspondante.

Administrabilité

Dans le cas du site mlegouis.fr, le webmaster choisit dans son back-office les images à faire figurer dans la mosaïque. Il peut régénérer cette dernière aussi souvent qu'il le souhaite.