Le générateur de Sprite est accessible sur l'onglet "Fonctionnalités gratuites".

Cette fonctionnalité va vous permettre de sélectionner toutes les images de fond de vos pages et de la combiner alors en un seul fichier image unique, ce qui permettra de réduire alors le nombre de requêtes HTTP vers vos page.

Les image de fond sont sélectionnées à partir du fichier combiné CSS, le plugin allant alors supprimer les appels des fichiers CSS originaux pour les remplacer par un appel unique vers ce "fichier unique d'images", ce fichier étant appelé un "sprite", puis en ajoutant des règles de positionnement CSS pour n'afficher qu'une partie de l'image combinée et simulant alors l'affichage de chaque image originale.

Le générateur de Sprite ne sélectionne que les images ayant :

• La propriété css "Background-repeat : no-repeat" (l'image n'est pas répétée)
• La propriété css "Background-position : left top" (l'image est affichée à partir du coin supérieur gauche) ou n'importe quelle propriété équivalente (par exemple : "background-position : 0 0")
• L'image doit avoir une taille inférieure ou égale à 50 pixels par 50 pixels.

Le générateur de Sprite a les options suivantes :

Sens de fabrication du sprite

Détermine ici si les images doivent être combinées verticalement ou horizontalement.

Colonnage

Habituellement, les images dans un sprite sont générés en une colonne unique ou une ligne unique.

Si cette option est sélectionnée, les images seront ajoutées en une ligne ou une colonne supplémentaires dès qu'une des tailles dépassent 2000 pixels (de large ou de haut suivant l'option choisie précédemment pour le sens de fabrication).

Exclure des images

Si une image n'est pas affichée correctement quand elle est intégré au sprite, vous pouvez alors l'enlever du processus de génération de celui-ci. Une image "incorrectement affichée" signifie ici que l'image n'est pas correctement positionnée ou encore que l'affichage fait apparaitre un "morceau" d'une autre image également existante dans le sprite.

En fait, n'importe quel affichage incorrect d'une image alors qu'elle a été incluse dans le sprite peut être considéré comme une image "incorrecte" que vous pouvez alors supprimer du sprite en la sélectionnant.

Astuce : utilisez l'outil de "Développement" de votre navigateur pour identifier l'image à exclure !

Inclure des image supplémentaires dans le Sprite

Certaines images peuvent éventuellement ne pas être sélectionnée par le générateur de Sprite (mais il est toujours possible qu'elles ne s'affichent pas correctement si elles y sont intégrées).

Par exemple, il est possible qu'une image n'a pas la propriété "Background-repeat : no-repeat" de déclarée mais occupe l'espace complet sur la page qui fait qu'elle n'est alors pas répétée (ce qui fait que la propriété est inutile et qu'elle n'a pas été déclarée). Cela peut également venir de la propriété "background-position : left top" qui n'a pas non plus été déclarée pour les mêmes raisons.

A partir de là, toutes les images ne rentrant pas exactement dans les critères de sélection du générateur de Sprite ne seront pas sélectionnées mais pourrait tout de même bénéficier de l'optimisation. Dans ce cas, il vous est possible d'ajouter ces images manuellement ici en les sélectionnant dans la liste déroulante vous indiquant les images qui ont été ignorées au départ.

Attention ! Utilisez cette dernière option avec précaution. Si vous n'êtes pas sur de ce que vous faites, il serait judicieux d'éviter d'ajouter une image qui a par défaut été ignorée.