Tout sur les sprites CSS

Les sprites combinent plusieurs images dans un fichier unique, permettant d’améliorer la performance de votre site. Ils sont largement utilisés dans les animations complexes. Belle introduction par Chris Coyier.

Par

Cet article a été révisé et remis à jour plusieurs fois depuis sa première publication en 2007, la dernière révision date de janvier 2015.

Qu’est-ce que les sprites CSS ?

Avertissement: Il ne s’agit pas de gentilles fées qui écriraient les feuilles de style pour nous ( NdT : “sprites” signifie littéralement “lutins”), dommage, j’aurais bien aimé… En bref : les sprites CSS sont une façon de combiner plusieurs images dans un fichier image unique, permettant ainsi d’améliorer la performance de votre site en réduisant le nombre de requêtes HTTP.

En fait, ce nom est sans doute mal choisi puisqu’il s’agit de créer un grand fichier, mais l’histoire des sprites, qui remonte à 1975, devrait vous éclairer là-dessus. En résumé : le terme vient d’une technique utilisée essentiellement dans les jeux vidéo, l’idée étant que l’ordinateur pouvait aller chercher un graphique dans la mémoire, puis en afficher une partie seulement à chaque fois, ce qui était plus rapide que de devoir continuellement aller chercher des images.

Pour CSS, on s’appuie sur cette même théorie : aller chercher l’image une seule fois, et en utiliser des parties.

Pourquoi utiliser les sprites CSS ?

A priori, ça peut paraître contre-intuitif : mettre de petites images ensemble pour en former une grande, est-ce que ça ne va pas prendre plus de temps à charger ?

Prenons ces chiffres, tirés d’un exemple réel :

Image         Taille Fichier          Dimensions

Canada.png        1.95Kb              256 x 128
usa.png           3.74Kb              256 x 135
mexico.png        8.69Kb              256 x 147

Le total fait 14.38Kb, mais les trois réunis ensemble dans un fichier unique pèsent 16.1Kb… Ce n’est pas une différence énorme, mais il doit y avoir une bonne raison pour accepter cette augmentation !

Et en effet, il y a une bonne raison : même si le poids augmente légèrement, l’avantage est de ne faire qu’une seule requête HTTP. Les navigateurs limitent le nombre de requêtes simultanées, et de plus les requêtes font appel au handshaking (la poignée de main) qui prend un peu de temps. C’est pourquoi les sprites sont importants, pour les mêmes raisons qui font que la minification et la concaténation des fichiers CSS et JavaScript sont importantes.

Comment utiliser les sprites CSS ?

Voici un exemple, avec nos trois drapeaux regroupés en une image unique :

image

On utilise la même background-image sur plusieurs classes CSS et on fixe la position et la dimension de chaque classe de façon à n’afficher qu’une partie du sprite. Voici le code qui illustre ce concept :

//CSS
.flags-canada, .flags-mexico, .flags-usa {
  background-image: url(’../images/flags.png’);
  background-repeat: no-repeat;
}

.flags-canada {
  height: 128px;
  background-position: -5px -5px;
}

.flags-usa {
  height: 135px;
  background-position: -5px -143px;
}

.flags-mexico {
  height: 147px;
  background-position: -5px -288px;
}

Si vous pensez qu’il doit y avoir un moyen d’automatiser tout ça de façon à ne pas avoir à tout faire manuellement (création des sprites, ajustement avec la feuille de style), eh bien vous avez raison !

Générer des sprites avec Grunt, Gulp, Node

Si vous utilisez Grunt, Gulp, ou Node en général, css-sprite est un merveilleux package node qui crée des sprites à partir d’un dossier d’images. Il comprend des fonctionnalités très intéressantes telles que le formatage de sortie en PNG, JPG (ou les Data URI des deux) et la génération de feuilles de styles en CSS, LESS, Sass et Stylus.

Pour compiler les sprites via la console, installez css-sprite globalement :

//Shell
$ npm install -g css-sprite

Puis, pour générer les sprites et la feuille de style correspondante, faites :

//Shell
$ css-sprite ./output-directory/ ./input-directory/

Pour plus d’infos, reportez-vous au repo du projet sur Github.

Générer des sprites avec Compass

Il faut un peu plus de réglages et de maintenance pour le faire avec Compass, mais si vous utilisez déjà Compass cela s’intègrera bien à votre workflow.

Commencez par créer un dossier à l’intérieur de votre dossier images en lui donnant un nom correspondant aux sprites que vous y mettez. Assurez-vous que les images que vous convertissez en sprites sont des PNG et placez-les dans votre nouveau dossier. Je crée des sprites avec des drapeaux, donc j’ai nommé mon dossier drapeaux (flags) et j’y ai mis trois PNG.

Dans un nouveau fichier SCSS que j’ai nommé ‘flags.scss’ (le nom ici n’est pas important), les trois lignes qui suivent vont, dans l’ordre, importer les outils de fabrication de sprites de Compass, importer globalement les PNG à convertir en sprites (remarquez que le chemin n’inclut pas images/) puis générer le CSS pour les sprites. Faites bien attention à ce que le mot du milieu dans le statement @include doit correspondre au nom du dossier qui figure à la ligne précédente (ici : “flags”).

//SCSS
@import "compass/utilities/sprites";
@import "flags/*.png";
@include all-flags-sprites;

Voici un exemple de résultat avec Compass, à partir de notre fichier flags :

See the Pen North American Flags Compass by Flip Stewart (@flipstewart) on CodePen.

C’est un procédé assez simple de génération de sprites CSS, mais il comporte quelques inconvénients :

  • Le CSS généré n’inclut pas les largeurs et hauteurs des sprites.
  • Il n’y a pas de classes partagées entre les sprites ; l’image de background est appliquée à chaque classe.

Générer des sprites avec ImageMagick

ImageMagick peut être utilisé pour créer une feuille de style depuis la console avec les commandes suivantes :

//Shell
convert *.png -append sprites.png # append vertically
convert *.png +append sprites.png # append horizontally

Cette commande prendra tous les fichiers PNG sélectionnés globalement (avec *) et les concatènera en un fichier unique, mais elle ne créera pas de feuille de style. Si vous utilisez ImageMagick pour créer vos sprites, vous serez intéressés par la section suivante à propos de Sprite Cow.

Utiliser Sprite Cow avec vos sprites

image

Sprite Cow est un outil en ligne vous permettant de générer une feuille de style correspondant à vos sprites. Il ne réalise pas le sprite, il ne fait que vous aider à trouver les valeurs dont vous avez besoin pour l’utiliser (largeur, hauteur, background-position de chaque partie du sprite). Il est compatible avec les images 2x et offre une interface très simple pour indiquer quelles parties du sprite constituent chacune des images pour lesquelles créer le CSS dont vous avez besoin.

Générer des sprites avec Spritepad

image

Spritepad est une autre solution en ligne, vous permettant de créer des sprites. Vous uploadez les images individuelles, vous les positionnez comme vous le souhaitez, et le CSS est mis à jour en temps réel. Quand vous avez terminé, vous téléchargez l’image et vous copiez le CSS dans votre projet.

Générer des sprites avec SpriteMe

SpriteMe est un bookmarklet (vous enregistrez sa page dans vos favoris) qui génère un sprite à partir de ce qu’il trouve sur la page en cours. Donc en gros, vous développez sans sprites, puis à la fin vous réunissez ce que vous avez produit en un grand sprite. Vous trouverez ici un workflow qui explique la façon dont ça fonctionne.

Horizontal ou vertical ?

Une option serait ni l’un ni l’autre. Les compacter en une grille, la plus réduite possible. La dimension des images impacte la quantité de mémoire utilisée, donc plus la taille est réduite, moins vous en utiliserez. Si vous faites vous-même l’agencement de votre sprite, Sprite Cow vous aidera pour la génération du CSS.

Si, pour la simplicité, vous choisissez l'une ou l'autre des méthodes que nous venons de décrire, une façon de faire est de repérer la largeur et la hauteur maximales de vos images. Si la largeur maximale est supérieure à la hauteur maximale, la feuille de sprites devrait être organisée à l’horizontale, et à la verticale dans le cas contraire. Si vous utilisez un outil de génération de sprites, il fera en général ce choix pour vous.

Dans certains cas, il peut être malin d’organiser les choses en diagonale. Cela permet d’utiliser un sprite dont les largeur et hauteur sont inconnues, ce qui est assez cool !

image

Ceci dit, une autre solution dans ce cas est d’utiliser un pseudo-élément.

Alternatives

Il existe des alternatives aux sprites qui, comme on peut s’y attendre, ont leurs avantages et inconvénients.

Data URI

Les data URI vous permettent d’intégrer les données de l’image directement dans la feuille de style. Cela évite des requêtes HTTP supplémentaires pour les images, et ça rend donc le même service que les sprites — positionnement en moins.

Icon Fonts

Les fontes-icônes sont semblables aux sprites puisque’elles réalisent la même chose : combiner des images multiples dans une requête unique.

SVG

Les images SVG peuvent elles aussi être combinées en sprites et utilisées comme système d’icônes. C’est une approche légèrement différente cependant, qui utilise la syntaxe et les atouts de SVG. Il vous faudra malgré tout penser à un système de fallback car SVG n’a pas un support aussi ancien que les background-images de CSS (qui n’ont aucun problème de compatibilité).

Grunticon et iconizr offrent des solutions de fallback si vous travaillez avec les sprites SVG.

Utiliser img et object-position

Robin Rendle a écrit un bon article sur cette technique intelligente.

Exemples

Mozilla Developer Network utilise des sprites pour passer d’un état à l’autre de l’onglet de navigation en haut de page.

image

Mailchimp utilise des sprites (background-image SVG) pour les divers états de ses navigations latérales.

image

Mapbox utilise une icon font pour ses petites icônes à travers tout le site, mais des sprites de haute résolution pour les logos de presse et de médias sociaux.

image

Intéressé par CSS ? Retrouvez une liste des meilleurs articles et ressources du web.

Article sur le même thème dans la Cascade :

Animer avec les sprites SVG, par Sarah Drasner


Ressources complémentaires en anglais

Ressources complémentaires en français


original paru le dans CSS-Tricks.

Sur l’auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l’auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter, Google+.

NdT : CSS-Tricks est un site ressource d’une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d’articles, de vidéos, de forums, de ressources diverses (jetez un coup d’oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C’est aussi une source d’inspiration pour vos propres designs.

Traduit avec l’aimable permission de CSS-Tricks et de l’auteur.
Copyright CSS-Tricks © 2009.