Réduire ses requêtes HTTP avec les Sprites CSS

:salut:

Shakuro vous propose un article sur l'optimisation des requêtes HTTP dans une page Web en utilisant les sprites.

Citation:

---

À ne surtout pas confondre avec la célèbre marque de soda, un sprite CSS est une technique employée par un grand nombre de webdesigners consistant à réunir plusieurs images en une seule. Cela a pour conséquence de réduire significativement la charge de travail de votre navigateur et d'augmenter ainsi la vitesse de chargement de votre site Internet.

---

:fleche: Réduire ses requêtes HTTP avec les Sprites CSS.

N'hésitez pas à faire part de vos remarques et commentaires concernant cet article.

:merci:

Article simple à comprendre et accessible :ccool:, surtout au niveau des points positifs / négatifs.

J'ajouterai qu'il ne faut pas oublier de réduire au maximum le poids de ses sprites générés. On peut encore gagner jusqu'à 70% au niveau du poids du fichier sprite regroupant les icônes. (J'utilise pngquant pour les passer en 8-bit et Trimage (un équivalent d'imageoptim pour ceux qui sont sur MAC) pour les compresser encore un maximum.)

Concernant l'outil pour avoir les propriétés CSS (background, width, height, etc) à partir de l'emplacement de l'icône dans le sprite, j'utilise Spritecow qui propose un petit outil supplémentaire pour les écrans rétina.

D'ailleurs, en parlant d'écran rétina, je suis surpris que ça ne soit pas abordé dans l'article. C'est ce point qui m'a fait changer de méthode de chargement des images à but décoratif.
En effet, avant j'avais pour habitude de transformer mes images en base64 et les mettre dans le fichier CSS gzippé. Cela fait 10% de plus en poids, mais il y avait plus d'avantages à mes yeux pour utiliser ça.
Mais depuis qu'on a des rétina et d'autres qui vont suivre (chrome pixel), les images doivent avoir un affichage particulier comparé aux écrans "traditionnels" et l'utilisation des sprites CSS se prêtent mieux au jeu que l'encodage en base64 des images

Article simple et accessible en effet, mais pas assez complet à mon goût, sur plusieurs points :

1. utilisation des web-fonts pour toutes les icônes mono-couleur. C'est le cas de pas mal d'icônes dans le sprite exemple pour la maquette Numericable. Personnellement j'utilise assez massivement Font-Awesome, mais ce n'est qu'une font parmis tant d'autres. Les énormes avantages par rapports aux Sprites CSS sont :
   1. possibilité de les utiliser comme lettrines,
   2. si la font est scalaire, possibilité de les utiliser à n'importe quelle taille sans dégradation de la qualité,
   3. toutes les couleurs peuvent être utilisées : pas besoin de dupliquer les icônes (1 par couleur) comme avec Sprite,
   4. et bien sûr, l'utilisation est infiniment plus simple (il suffit de coller un content avec le code Unicode de l'icône qui va bien dans sa classe CSS et c'est fini !)
2. Pour répondre aux contraintes d'accessibilité il est possible de définir des balises masquées sur les images sans "alt". Personnellement j'utilise la classe CSS suivante sur un span que je mets à l'intérieur de mes balises images sans attribut alt :
   Code:

   ---

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   /**  * Ne pas afficher un élément à l'écran, tout en le positionnant à l'intérieur d'un autre...  * L'utilisation de cette classe permet notament de fournir une alternative textuelle non affichée pour des composants  * graphiques, types icônes, utilisés dans des liens. Les liseuses d'écran vont lire le contenu de la balise (span, ...)  * alors qu'elle en sera pas affiché à l'écran.  */ .o-invisible { position:absolute; top:-5000px; left:-5000px; overflow:hidden; width:1px; height:1px; }

   ---

Même s'il est toujours bon de connaître les fondamentaux (et merci à cet article de les rappeler), il existe maintenant des frameworks qui font le sale boulot à notre place (j'avoue, je ne savais pas que des gens faisaient encore leurs sprites "à la main"). Jetez un oeil à compass par exemple (par contre il faut écrire ses styles en sass). http://compass-style.org/

Salut,

Merci pour cet article, très instructif pour comprendre comment fonctionnent les sprites.

J'ai juste une petite question à propos des coordonnées :

Si j'ai bien compris, le coin haut-gauche de l'image est la position (0, 0), puisque elle est implicite pour l'affichage de l'icone Facebook. Dans ce cas pourquoi a-t-on des coordonnées négatives pour les autres ? Pour l'axe des X, on se déplace sur la gauche, donc a priori je m'attendais à avoir une abscisse positive. Ce n'est pas le cas et je ne comprends pas pourquoi :aie:

Edit : d'ailleurs, si j'ouvre l'image dans un éditeur, je place ma sélection dans le coin haut-gauche (0, 0 donc), et si j'étire jusqu'à l'icone de Google grise, j'ai bien une sélection de 67 * 16 px.

Bonjour à tous et merci pour vos remarques constructives :ccool:

J'avais déjà connaissance de Font-Awesome que je recommande également d'utiliser. En ce qui me concerne je l'utilise rarement et même pour mes icônes, c'est purement esthétique, et je fais allusion aux contours "en dents de scie" des icônes.
En effet étant considérés comme des fonts, ils sont donc logiquement sujets aux mêmes type de lissage que nos textes, des lissages bien différents d'un navigateur à l'autre (sans blague ? ...) et il en va de paire avec les OS qui proposent des paramétrages plus ou moins poussés sur la le lissage des fonts.

Pour un exemple de navigateur sur Chrome le lissage est bien moins défini que sur Firefox. Et IE9 applique un floue plus important sur les textes que IE7, donc les versions aussi ne sont pas épargnés.
Mais c'est vraiment l'unique point négatif que je trouve à cette méthode, autrement je ne peux que la conseiller pour une très bonne optimisation.

Citation:

---

Envoyé par Jarodd

Si j'ai bien compris, le coin haut-gauche de l'image est la position (0, 0), puisque elle est implicite pour l'affichage de l'icone Facebook. Dans ce cas pourquoi a-t-on des coordonnées négatives pour les autres ? Pour l'axe des X, on se déplace sur la gauche, donc a priori je m'attendais à avoir une abscisse positive. Ce n'est pas le cas et je ne comprends pas pourquoi

---

Très bonne remarque ! Et puisque les images valent mille mots :
http://img15.hostingpics.net/pics/26...ionSprite1.jpg

Considère simplement la zone rouge comme étant la zone "négative".
Pour afficher l'icone google rouge on déplacera le sprite vers la gauche autrement dit dans la zone négative. D'où les valeurs négatives sur l'axe des abscisses.
That's All :)

En effet c'est plus clair, je n'avais pas compris que c'est l'image qu'on bougeait, et non le curseur à partir du point (0, 0) :oops:

Merci pour les précisions !