Rendu du navigateur Sprites CSS

Question

Nous savons tous que les images de sprites CSS sont très utiles pour réduire le nombre de demandes, etc., mais qu'en est-il des performances du navigateur qui rend la page avec plusieurs éléments en utilisant une grande image en arrière-plan?

Answer 1

sur les machines plus lentes équipées de navigateurs plus anciens (comme IE6 / IE7), vous pouvez constater une baisse importante des performances lorsque vous utilisez de très grandes images plusieurs fois sur une seule page. C'est encore plus grave lorsque vous utilisez des sprites pour: survoler les états.

Vous devez modérer votre tentation en poussant tous vos sprites vers une image énorme - réfléchissez aux éléments qui font partie de l'interface utilisateur website / webapp et mettez-les dans un seul fichier de sprite (ceux-ci seront affichés tout le temps pendant la navigation). . Ensuite, essayez de regrouper les images-objets du site Web dans des images spécifiques à une section de site Web et utilisez-les au besoin. Inconvénient: le temps de chargement est légèrement plus long (demandes HTTP supplémentaires), mais l'expérience de l'utilisateur lors de l'affichage / du défilement de la page sera bien meilleure.

Answer 2

Vous devez équilibrer les choses. Si vous parlez d'une image qui comprendra par exemple 1000 sprites, le CSS sera énorme. De plus, il y a très peu de chance que vous utilisiez tous ces sprites dans la même page.

Answer 3

Comme nous pouvons en juger par notre expérience YouTube, cela ne pose pas de gros problèmes.

Espérons que le navigateur mette en cache une image en mémoire et l'utilise ensuite pour restituer la sortie partout où cette image est nécessaire.

Answer 4

Vous pouvez enregistrer un nombre important de requêtes HTTP en consolidant vos images dans un ou plusieurs sprites composites et en utilisant CSS pour afficher de manière sélective des parties de ce dernier dans votre page Web. Maintenant que les principaux navigateurs ont suffisamment évolué pour prendre en charge les arrière-plans et le positionnement CSS, de plus en plus de sites adoptent cette technique de performance. En fait, certains des sites les plus fréquentés du Web utilisent des sprites CSS pour enregistrer les requêtes HTTP.

Avec des millions d’utilisateurs, Yahoo! et AOL mettent tout en œuvre pour améliorer l'expérience de l'utilisateur. AOL.com et Yahoo.com utilisent tous deux des sprites CSS pour enregistrer de nombreuses requêtes HTTP pour leurs interfaces complexes. Les deux sites utilisent des sprites CSS pour afficher de manière sélective des icônes dans leurs répertoires de services, et Yahoo! utilise des sprites ailleurs aussi.

Un autre avantage des sprites CSS réside dans le fait que la taille de fichier de l'image combinée est souvent inférieure à celle des images individuelles, même en ajoutant des espaces entre les images. La taille plus petite des images-objets est due à la surcharge des tableaux de couleurs multiples et des informations de formatage requises par des images séparées. Pour maximiser l'accessibilité et la convivialité, les images-objets CSS sont mieux utilisées pour les icônes ou les effets décoratifs.