I. Introduction▲
Si l'on prend l'exemple d'une image réactive, la méthode traditionnelle utilise deux images associées, une image standard et une image survolée, que nous appellerons « couple d'images ». Présents en grand nombre dans une page Web, ces couples entraînent une augmentation significative du nombre de requêtes HTTP de votre navigateur, influant directement sur le temps de chargement :
- la méthode traditionnelle demande deux requêtes pour un couple d'images ;
- un sprite équivaut à une seule et unique requête, peu importe le nombre d'images.
L'utilité des sprites CSS ne s'arrête pas là. Outre le gain en vitesse d'exécution, cette technique trouve également un rôle majeur dans l'esthétique d'affichage.
Lorsque vous appliquez un :hover sur une balise contenant une image dans le but d'en faire apparaître une autre au survol, il y a un délai de quelques millisecondes (selon votre navigateur et votre connexion) nécessaire au chargement de l'image survolée. Cela s'apparente à un petit scintillement assez désagréable à l'œil…
II. Fonctionnement du sprite CSS▲
La méthode traditionnelle utilise simplement la propriété CSS background-image. Avec l'utilisation d'un sprite CSS, on utilisera plutôt la propriété background couplée à un background-position pour déplacer la zone de l'image que vous voulez faire apparaître grâce aux coordonnées des axes X et Y.
La partie visible est l'icône « poubelle », cette partie est déterminée via CSS avec la propriété background-position. La taille de la partie visible dépendra des propriétés width et height que vous appliquerez aux balises contenant les images, soit par un sélecteur générique (#div_conteneur a, #div_conteneur span) ou par leurs class/id respectifs (#div_conteneur .a, #div_conteneur .b, etc.).
III. Créer votre sprite▲
Les plus expérimentés en PAO (Publication Assistée par Ordinateur) pourront créer leur propre sprite avec un logiciel de retouche d'image tel que Photoshop, Gimp, Paint Shop Pro et même… Paint !
Et si vous ne savez pas les utiliser, pas de panique ! Il existe des outils en ligne très simples qui vous permettent de générer vos propres sprites gratuitement :
- Sprite Generator vous permet de combiner vos images fournies (depuis une archive ZIP) en une seule image. Une multitude de propriétés personnalisables vous sont proposées : redimensionnement, qualité d'image, options du CSS généré… Ceci afin de vous faciliter la tâche ;
- Sprite Creator vous permet quant à lui de créer à l'aide de votre souris la « zone visible », une fois cette zone définie à la volée, le CSS est généré comprenant ses données de positionnement ainsi que sa taille. Pratique ;
- Stitches est incontestablement l'outil le plus complet de cette sélection. Il vous permettra de faire au moins autant que Sprite Generator et Sprite Creator, le tout par simple drag and drop sur une interface intuitive, et en HTML5 s'il vous plait !
IV. Configurer un sprite CSS▲
Nous allons prendre pour exemple les icônes de réseaux sociaux se trouvant en pied de page (footer) du site de Netmacom qui utilise bien évidemment cette technique.
Et voici le CSS associé :
#footer2Social a{
background-image: url("images/footer_sprite_social.png");
background-repeat: no-repeat;
display: block;
float: left;
height: 16px;
overflow: hidden;
text-indent: 20px;
width: 16px;
}
#footer2FaceBook:hover{
background-position: 0 -16px;
}
#footer2Twitter{
background-position: -23px 0;
}
#footer2Twitter:hover{
background-position: -23px -16px;
}
#footer2Google{
background-position: -67px 0;
}
#footer2Google:hover{
background-position: -67px -16px;
}
#footer2Rss{
background-position: -45px 0;
}
#footer2Rss:hover{
background-position: -45px -16px;
}IV-A. Comprendre ce CSS▲
Ce cas illustre parfaitement bien l'utilisation la plus courante du sprite CSS. On se sert du sélecteur #footer2Social a pour appliquer les propriétés communes qu'auront tous les liens se trouvant dans leur parent commun.
On trouve dans ce parent la propriété background-image qui contient le lien du sprite. Ainsi qu'un display:block; transformant le lien qui est un élément inline en élément block. Cette transformation a pour but de définir une dimension à l'aide de width et height à cet élément, représentant ainsi la partie visible.
Ensuite on appelle chaque lien à l'aide de son identifiant (ex. : #footer2Twitter) en lui appliquant un background-position. La première valeur numérique représente l'axe des X, la seconde l'axe des Y. Ils peuvent être aussi bien positifs que négatifs, tout dépend de la position de vos images sur votre sprite.
On réalise un doublon en rajoutant cette fois la pseudoclasse :hover à la suite de chaque identifiant. Ceci a pour conséquence de rendre « actives » uniquement au survol les propriétés CSS que contiennent ces sélecteurs.
On n'a plus qu'à changer les valeurs de background-position (dans notre cas il ne s'agit que de l'axe Y).
#footer2FaceBook n'est pas défini explicitement dans le CSS, c'est normal. La position du background est attribuée nativement par les navigateurs dans le cas où on ne spécifie pas de position, par défaut il s'agit de (0, 0). #footer2FaceBook a donc logiquement hérité du positionnement implicite de #footer2Social a !
V. Les sprites CSS : une utilisation courante▲
Les sprites CSS sont très répandus comme l'atteste notre sélection, qui regroupe les plateformes Web les plus fréquentées sur la toile :
Les sprites ont notamment été utilisés lors de notre intégration des maquettes de la boutique Numericable.
VI. Conclusion▲
Pour terminer sur cet article, qui vous permettra de rendre vos pages Web plus rapides à se charger, voici une liste des avantages et des inconvénients à utiliser cette technique.
VI-A. Points positifs▲
- Utiliser les sprites est incontournable pour les personnes qui souhaitent se lancer dans l'optimisation des performances de leur site Internet. En utilisant les sprites, on réduira le nombre de requêtes serveur.
- Adieu le JavaScript, le couple img.src="monimage.gif"; (préchargement des images) + onmouseover (l'effet de survol) n'a qu'à bien se tenir !
- Cette technique est dite « naturelle » car elle fait appel au (X)HTML et au CSS. Votre code mieux présenté, mieux structuré et plus accessible gagnera également en visibilité. On y retrouve tous les avantages d'une bonne pratique d'intégration Web répondant au standard W3C.
VI-B. Points négatifs▲
- En fin de compte, la tâche est loin d'être agréable ; elle nécessite une certaine minutie pour déplacer vos zones visibles avec la propriété background-position, elle sollicitera également votre patience, car les positions seront nombreuses.
- La technique des sprites CSS n'est utile que pour des images à but décoratif, pour les images porteuses d'information (ex : article), il faut impérativement utiliser la bonne vieille balise <img alt="" /> car elle contient un attribut très important pour l'accessibilité, à savoir alt.
- La quête de performances oblige certains webdesigners à pousser à l'extrême leur optimisation. Ils regroupent en une seule image l'intégralité de leurs images décoratives et certaines structures rendent cette tâche très difficile. Car autant comprendre le fonctionnement du sprite CSS et l'employer dans les circonstances les plus courantes est relativement facile, autant il est difficile de trouver une solution dans certains cas particuliers, car cette technique reste malheureusement limitée (ex. : gestion d'un contenu textuel à hauteur variable avec icône en sprite en tant que « lettrine »).
Et vous, utilisez-vous les sprites CSS ?
VI-C. Remerciements▲
Cet article a été publié avec l'aimable autorisation de Kévin Pinto. L'article original (Réduire ses requêtes HTTP avec les Sprites) peut être vu sur le blog Netmacom.
Nous tenons à remercier ClaudeLELOUP pour sa relecture attentive de cet article.