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 ? Les sprites CSS permettent d’optimiser la bande passante. 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êtes 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. En effet, au lieu d’appeler une balise <img> pour chaque image dans le code HTML, <img src= »img/image-1.jpg » alt= » »> <img src= »img/image-2.jpg » alt= » »> <img src= »img/image-3.jpg » alt= » »> on en appelle plus qu’une seule qui contient toutes les images, comme le montre l’exemple ci-après. <img src= »img/sprite.jpg » alt= » »> Dans cette exemple toutes les images des icônes et de leur état au survol sont regroupées dans un seul fichier. Toutefois, attention de ne pas tomber dans le piège classique de la production d’un méga sprite CSS si énorme qu’il […]

Comment fixer un footer en bas de page est une question qui m’est fréquemment posée en formation. Il existe plusieurs techniques pour réaliser cela. Nous allons nous intéresser à deux […]