Les sprites CSS sont une technique mise au point pour économiser de la bande passante en réduisant le nombre de requêtes HTTP. Plutôt que de charger plusieurs images distinctes, l’idée est de les regrouper dans un seul fichier, certes légèrement plus lourd, mais téléchargé qu’une seule fois. La solution la plus souvent utilisée pour les intégrer consiste à appeler l’image en background. Mais saviez-vous qu’il existe d’autres méthodes pour utiliser les sprites CSS ?
En premier lieu, la question que l’on doit se poser avant d’utiliser la méthode des sprites CSS est « est-ce vraiment utile ? ». La réponse est oui ! De toute évidence depuis que Google a clairement exprimé que la vitesse d’affichage d’un site est l’un des critères important pour le positionnement dans les pages de résultats. Ainsi il est toujours utile de mettre en place des solutions capables d’économiser de la bande passante, en commençant par optimiser le poids desdites images. Enfin, en réduisant le nombre de requête HTTP. Et c’est exactement l’objectif des sprites.
En quoi réside la méthode des sprites CSS ?
La solution consiste à regrouper dans un seul fichier plusieurs images originellement séparées. Ainsi, on obtient une seule image à télécharger plutôt qu’une multitude. De ce fait, on réduit le nombre de requêtes HTTP et par ricochet on accélère l’affichage de la page. Ensuite, il suffit d’appeler l’image là où on en a besoin et de la positionner sur le sprite souhaitez en la faisant glisser.
Toutefois, attention de ne pas tomber dans le piège classique de la production d’un méga sprite CSS si énorme qu’il mettrait trop de temps à se charger. C’est pourquoi on évite de regrouper toutes les photos d’illustration dans un même fichier. Par conséquent les sprites CSS sont généralement réservés pour de petites images, comme des bibliothèques d’icônes par exemple.
Le background-image, technique classique d’intégration des sprites CSS
Lorsqu’on aborde la technique des sprites, la solution la plus souvent envisagée est l’usage de la propriété background-image. Il faut reconnaître que c’est la méthode la plus simple et la plus rapide à mettre en place. Alors, en quoi consiste-t-elle ?
Pour commencer il est nécessaire de se reposer sur une structure HTML (ici une <div>) à laquelle on applique l’image en arrière-plan grâce à la propriété background-image (cf. le code CSS).
<div class="bg-sprite">
<!--Ici sera injecté via le CSS l'image contenant les sprites-->
</div>Ensuite il faut annuler la répétition de l’image via la propriété background-repeat associée à la valeur no-repeat. Puis, grâce à la propriété CSS background-position, on déplace l’image de fond en jouant sur les axes X et Y jusqu’au sprite souhaité. Notons qu’il est tout à fait possible d’utiliser des valeurs négatives si nécessaire. Enfin, pour que l’arrière-plan soit visible, on applique une hauteur et une largeur sur la balise conteneur.
.bg-sprite{
background-image: url(../img/sprite-social-icons-final.png);
background-repeat: no-repeat; /*pas de répétition de l'image*/
background-position: -57px 0; /*position sur l'axe X et Y de l'image*/
height: 49px; /*hauteur de la div*/
width: 49px; /*largeur de la div*/
/*options de déco facultatives*/
transition: all 1s ease 0s; /*transition pour animer au passage de la souris*/
filter: drop-shadow(2px 2px 2px #000); /*ajoute une ombre sous l'image*/
}Un survol de souris pour parfaire l’ensemble
Notons que les sprites CSS sont très souvent utilisés pour réaliser un effet de survol sans que l’on ait besoin de deux images distinctes. Comme précédemment l’astuce consiste à déplacer l’image de fond sur ses axes X et Y afin de se positionner sur le sprite de remplacement au moment du survol de la souris. De ce fait la pseudo-classe :hover est alors nécessaire.
.bg-sprite:hover {
background-position: -57px -64px; /*on se positionne sur le sprite souhaité au survol de la souris*/
}En revanche si l’intégration de sprites est facile à mettre en œuvre grâce à l’usage d’un backgroud, elle a néanmoins un inconvénient majeur. Les sprites css sont appelés en image de fond et non dans une balise . Or les images de fond sont très mal référencées, voire carrément ignorées par les moteurs de recherche.
Des sprites CSS avec une balise img c’est possible !
Alors comment réaliser un sprite CSS tout en utilisant une balise et ainsi bénéficier d’un meilleur référencement pour nos illustrations ? Découvrons ensemble les trois autres techniques.
La première consiste à utiliser les propriétés CSS margin (top, right, bottom ou left) en nous inspirant du background-position. En d’autres termes en jouant de nouveau sur les axes X et Y. Mais commençons par construire notre structure HTML. Encore une fois elle repose sur une balise jouant le rôle de conteneur.
<div class="margin-sprite">
<img src="img/sprite-social-icons-final.png" alt="Social icon Linkedin">
</div>Notons toutefois que la différence majeure entre le code ci-dessus et le précédent est la présence de la balise <img>. Comme mentionné plus haut les images de premier plan sont bien mieux référencées dans les moteurs de recherche, pour peu qu’on remplisse convenablement l’attribut alt. Et c’est là tout l’intérêt d’utiliser une balise <img> plutôt qu’une image de fond.
Des dimensions pour notre conteneur
Comme précédemment, il est important de définir des dimensions height et width sur la balise qui reçoit la balise <img>. Toutefois, comme l’image qui contient nos sprites à de fortes chances d’être plus grande que les limites fixées, il est alors nécessaire d’appliquer la propriété CSS overflow associée à la valeur hidden. L’objectif est de rogner tout ce qui dépasse du conteneur. Enfin, on peut, si on le souhaite, ajouter comme précédemment un effet d’ombrage sous les sprites grâce au duo filter et drop-shadow().
.margin-sprite {
height: 49px; /*hauteur de la div*/
width: 49px; /*largeur de la div*/
overflow: hidden; /*permet de rogner tout ce qui dépasse du cadre*/
/*options de déco facultatives*/
filter: drop-shadow(2px 2px 2px #000); /*ajoute une ombre sous les sprites*/
}Les marges extérieures comme outil de positionnement ?
Deuxième étape, positionner l’image sur le sprite désiré. Toutefois impossible d’utiliser la propriété background-position vue que nous sommes dans une balise <img>. En revanche les propriétés margin (left et top) vont nous permettre de déplacer ladite l’image respectivement sur les axes X et Y. Une fois de plus il est possible d’utiliser des valeurs négatives si nécessaire.
.margin-sprite img {
margin-top: 0px; /*positionne l'image sur l'axe Y*/
margin-left: -114px; /*positionne l'image sur l'axe X*/
/*options de déco facultatives*/
transition: all 1s ease 0s; /*transition pour animer*/
}Enfin, sous condition que les sprites le permettent, on peut réaliser un effet de survol.
.margin-sprite:hover img {
margin-top: -64px;
}Object-fit et object-position pour des sprites CSS plus « moderne ».
Plutôt que d’utiliser les margin intéressons-nous à des propriétés CSS plus récentes. Ainsi object-fit et object-position ont été développées pour manipuler justement les balises <img> ou <video>. La première propriété est en quelque sorte l’équivalent d’un « background-size », alors que la seconde ressemble à un « background-position ».
De nouveau nous allons utiliser une balise comme réceptacle de l’image. Ainsi le code HTML et CSS vont être similaires à l’astuce précédente.
<div class="object-position-sprite">
<img src="img/sprite-social-icons-final.png" alt="Facebook icon">
</div>.object-position-sprite {
height: 49px;
width: 49px;
overflow: hidden;
filter: drop-shadow(2px 2px 2px #000);
}Un positionnement qui rappelle le background-position
Quant à la méthode de positionnement du sprite, bien qu’un peu différente elle va néanmoins se rapprocher du background-position utilisé dans la première solution. Dans cet exemple le sprite nécessaire se trouve en position 0 0 sur l’axe des X et des Y. En revanche, au survol de la souris, seule la valeur de l’axe Y est modifiée.
.object-position-sprite img {
object-position: 0 0; /*l'image reste en position initiale sur l'axe X et Y */
/*options de déco facultatives*/
transition: object-position 1s ease 0s; /*transition pour animer*/
}
.object-position-sprite:hover img {
object-position: 0 -64px; /*position sur l'axe X et Y de l'image*/
}Remarquons que nous n’avons pas besoin de la propriété object-fit pour que cela fonction. Elle sera toutefois nécessaire dans la dernière technique.
Et si nous sortions du cadre ?
Toutes les astuces précédemment abordées ont en commun une balise jouant le rôle de conteneur pour l’image. Mais il est possible de réaliser un sprite CSS uniquement sur une balise <img> en combinant object-fit et object-position.
<img class="object-fit-sprite" src="img/sprite-social-icons-final.png" alt="Pinterest icon">.object-fit-sprite {
object-fit: none; /*la valeur est à none pour que l'image s'affiche dans ses dimensions initiales*/
object-position: -171px 0; /*position sur l'axe X et Y de l'image*/
height: 49px; /*hauteur de l'image*/
width: 49px; /*largeur de l'image*/
/*options de déco facultatives*/
transition: all 1s ease 0s;
filter: drop-shadow(2px 2px 2px #000);
}
.object-fit-sprite:hover {
object-position: -171px -64px; /*position sur l'axe X et Y de l'image*/
}Une approche légèrement différente
Dans cette solution la hauteur et la largeur du cadre sont fixées directement sur la balise <img>. Nul besoin d’un conteneur, ni de la propriété overflow. En effet, object-fit rogne tout ce qui est hors cadre. D’autre part, en fonction de la valeur associée, object-fit définit comment l’image s’adapte aux dimensions définies sur la balise <img>. Cela fonctionne un peu comme la propriété background-size sur les images de fond. Dans notre exemple la valeur associée est none, puisque nous souhaitons garder la taille d’origine de l’image.
En dernier lieu la propriété object-position permet de positionner l’image sur le sprite choisi en agissant sur l’axe X et Y. Exactement comme le précédent exemple. Il est bien entendu possible de réaliser un effet de survol, d’ajouter une ombre et d’animer tout cela.
Voilà, vous voici armé de quatre solutions pour créer de superbes sprites CSS et ainsi réduire les requêtes HTTP de votre site web.
Découvrez un exemple complet avec code HTML et CSS sur codepen.
Retour vers la page d’accueil du blog.