CSS Sprites: valent-ils la peine?
Je ne peux pas m'empêcher de me demander si les sprites CSS sont beaucoup trop utilisés.
Premièrement, si je colle toutes mes images dans un seul fichier, cela crée énormément d'espace vide. Je sais, cela ne devrait pas rendre un fichier image trop volumineux, mais Sprite.png par lui-même sera généralement plus gros que ( small1.png + small2.png ... + [en-têtes http pour toutes ces connexions individuelles] ).
Deuxièmement, tous les attributs d'image individuels susceptibles de rendre un fichier image intrinsèquement petit ou compressible sont perdus sur Sprite.png . Par exemple, une image en niveaux de gris coincée dans un non-niveau de gris Sprite.png n'est plus en niveau de gris.
Troisièmement, tous ces blocs CSS s’additionnent. Si ce qui suit est tout ce que vous avez à ajouter à votre démodé _<img src=small1.png>_ pour le transformer en Sprite ...
_#small1 { background:url(Sprite.png) n n; height:n; width:n; } id=small1 height=n width=n
_... alors 12 sprites sont égaux à 1 Ko (et changent) de charge utile supplémentaire - au-delà des images elles-mêmes. Avant de dire "big deal!", Souvenez-vous que nous parlons ici de petites images avec Sprite, et 1KB est significatif, relativement parlant. En outre, CSS peut se faufiler sur vous .
En fait, c’est mon post-scriptum: L’optimisation n’est-elle pas idiote?
Je ne dis pas que les sprites ne devraient pas être utilisés. Je pense simplement qu'il doit y avoir plus que cela: "une demande est toujours meilleure que beaucoup". Surtout quand vous avez HTTP Keepalive et un serveur Web et un système de fichiers bien optimisés. Et tout bien considéré, à quoi sert-il de mettre l’accent sur des détails aussi mondains, alors qu’il ya sûrement beaucoup d’inefficacités beaucoup plus importantes à prendre en compte dans une application Web?
TLDR; Cela dépend mais je pense que cela en vaut la peine.
Il n’est pas toujours vrai qu’une requête soit meilleure que d’autres, mais lorsque les sprites sont utilisés correctement, son optimisation vaut généralement la peine.
Pourquoi y a-t-il un espace vide? Vous pouvez très bien vous en tirer avec un pixel de remplissage entre les éléments d'un Sprite. Et rappelez-vous que l'enregistrement réel avec un Sprite se produit lorsqu'il est mis en cache. Il s'agit donc d'un fichier mis en cache une fois, puis utilisé sur plusieurs pages, par opposition à plusieurs images d'arrière-plan demandées et mises en cache à différents moments du parcours de l'utilisateur.
En ce qui concerne les optimisations d'image, c'est vrai, mais peut-être que si vous avez assez d'images en niveaux de gris, vous considérerez deux fichiers Sprite?
Les sprites ne doivent pas être utilisés pour du contenu devant figurer dans un élément <img>, cela n'a aucun sens sur le plan sémantique. Les sprites doivent être utilisés lors du style d'autres éléments, de sorte que background-url soit toujours nécessaire.