Il n’est pas rare d’utiliser de nombreuses petites vignettes disséminées sur une page. Un menu de navigation dont les titres seraient des images (générées automatiquement par SPIP, tant qu’à faire) contient une floppée de petites images.

Chacune de ces images provoque un appel individuel au serveur Web, ce qui ralentit leur chargement (il vaut mieux charger une « grosse » image que la somme des « petites » images qui la composent) et augmente le travail du serveur.

Ce plugin permet, de manière aussi simple que possible, de regrouper plusieurs vignettes en une seule « grande » image (qui les contient toutes), que l’on affiche à la place de chaque petite vignette. Un style intégré au code permet d’afficher la bonne partie de la grande image (celle qui correspond exactement à la vignette).

Par exemple, je réalise un menu de navigation sur mon site en transformant chaque titre de rubrique en image (image typographique) ; chaque titre est réalisé en deux versions : le texte en noir, et le texte en blanc (pour la rubrique active et pour le survol de toutes les rubriques). J’ai 9 rubriques principales, plus le lien « Accueil du site » ; je génère donc 20 petites images typographiques. Un visiteur charge donc 20 petits fichiers différents.

En utilisant le plugin « Créer Sprites CSS », je regroupe automatiquement ces 20 vignettes dans un seul « gros » fichier, et c’est lui que j’affiche à la place de chaque image initiale, avec un astuce CSS qui permet d’afficher exactement la partie de l’image dont j’ai besoin. Le visiteur charge désormais un unique fichier au lieu de 20.

Pour regrouper différentes images en un unique fichier, il faut les faire passer par le filtre |filtre{nomsprite.png}. nomsprite.png est choisi par le webmestre :
— en utilisant plusieurs noms, on peut ainsi fabriquer différents sprites, soit dans le corps d’une même page, soit entre pages différentes (par exemple un sprite qui changerait pour chaque article),
— la terminaison choisie pour le fichier (ici .png) détermine le format final du sprite.

Voici par exemple comment je réalise mon menu de navigation principal :

Le principe est le même à chaque fois : je prends mon texte, je le transforme en image typographique, puis je le fais passer par |sprite{navigation.png}. Toutes ces images typographiques seront regroupées et remplacées par un seul « gros » fichier : navigation.png.

Ailleurs dans le corps de ma page, j’ai trois vignettes explicatives. Initialement, ce sont trois <img src="monfichier.png" alt="" /> insérés dans mes squelettes. Pour les regrouper sous forme d’un sprite, je transforme le code ainsi :

Ces trois images sont désormais regroupées automatiquement dans un unique fichier, boutons.png.

J’effectue, enfin, la même opération pour réunir de petites vignettes de prévisualisation des documents joints de chaque article (mon site, très graphique, a souvent plus de 20 photographies associées à chaque article). De cette façon, au lieu de charger 20 (jusqu’à 100) petites vignettes, je n’en charge plus qu’une grande.

Notez bien :
— Ce plugin est relativement rudimentaire, mais il répond parfaitement à mes besoins, et je l’utilise en production.
— Son fonctionnement est assez particulier par rapport aux habitudes des sprites CSS : il prend des images insérées dans le document, et les transforme en images « vides » (transparentes) de mêmes dimensions, et applique le sprite global en background CSS. Il n’est pas destiné à traiter des images qui seraient déjà dans des background CSS. (Mon idée étant qu’il est avant tout destiné à traiter des images générées par SPIP, et de telles images sont assez rarement utilisées dans des feuilles de style.)
— Attention : le nom que vous choisissez détermine le fichier final. Si vous utilisez plusieurs fois le même nom pour des choses différentes (sur des pages différentes), vous écraserez le fichier d’une page par l’autre. Faites attention au nom que vous choississez.
— Les images PNG transparentes deviendront des fond de CSS, que MSIE 6 gère mal (alors qu’il gère bien les PNG transparents affichés en tant qu’images).
— La méthode retenue n’est pas vraiment adaptée pour gérer des images qui changent souvent (ne serait-ce que parce que le sprite conserve son nom, même si on change son contenu).

Attention

Une particularité de SPIP fait que le calcul de l’image ne se fait que dans le cas d’un squelette inclus, où dans le cas où un administrateur connecté calcule la page au moins une fois (les boutons d’administration provoquant la fonction nécessaire).

L’usage « simple » de cette fonctionnalité fait qu’en général, cela ne pose pas de gros problème, puisqu’une fois que l’image a été calculée, il n’est plus nécessaire de la recalculer.

La difficulté viendra du cas où :
• des « sprites » différents sont créés automatiquement pour chaque page du site, et qu’il n’est donc pas envisageable que l’administrateur recalcule toutes ces pages une par une ;
• ces « sprites » ne sont pas calculés dans des squelettes inclus.

Dans ce cas, il est possible d’insérer

dans le squelette pour provoquer correctement le calcul des sprites.