Icônes générées par CSS ou images

Question

Un design sans image (utilisant CSS pour générer des icônes) se chargera-t-il plus rapidement qu'un design traditionnel basé sur des images ?

NOTE : Je comprends parfaitement la flexibilité de pouvoir changer la couleur, la taille, etc. d'une icône. Quelques changements au fichier CSS sont beaucoup plus efficaces, mais je ne suis pas sûr du temps de chargement.

Le contexte : Je cherche à terminer un projet pour un client qui est un design sans image utilisant CSS pour générer les icônes de page, qui était une exigence du projet pour réduire le temps de chargement sur les appareils mobiles. Normalement, j'aurais simplement découpé les icônes dans un sprite d'image et je n'aurais pas eu à me soucier du temps de chargement puisque le navigateur n'aurait eu à charger et à mettre en cache qu'une seule image.

Gracias.

Answer 1

Oui, si les icônes du site peuvent être générées entièrement en CSS (relativement efficace), elles se chargeront plus rapidement que les images. Le hic, c'est que la plupart des icônes sont beaucoup trop complexes pour être générées à l'aide de CSS. Dans certains cas, les CSS pourraient devenir si complexes que les problèmes de maintenance associés à la gestion d'un code complexe sur plusieurs navigateurs pourraient l'emporter sur les avantages. Mais en général, si vous pouvez le faire en CSS sans avoir à vous plier en quatre, c'est de l'optimisation - et dans le scénario que vous décrivez, cela pourrait bien être digne d'intérêt l'optimisation.

Answer 2

Je ne pense pas que la question soit de savoir si c'est plus rapide ou non, mais plutôt de savoir si c'est une bonne idée ou non. Je ne sacrifierais pas la souplesse d'utilisation des images en transformant tout en pur CSS. Vous garantissez la compatibilité entre navigateurs avec les images, ce que CSS3 ne peut pas faire. De plus, les images sont plus faciles à entretenir.

Answer 3

Pensez-y de cette façon la taille de l'icône css (la taille du code nécessaire pour produire une icône) est un avantage et l'autre avantage majeur est les hits du serveur. pour chaque icône image il y a un hit ce qui signifie qu'il y a un temps d'attente, un temps de téléchargement, et un temps de rendu, bien que ce soit seulement en millisecondes le temps d'attente et le temps de téléchargement sont directement proportionnels à la charge de votre serveur.

Dans ce cas, une icône css3 permet non seulement de gagner du temps et de la bande passante, mais aussi de réduire le nombre de hits sur votre serveur, car le fichier css ne se télécharge qu'une seule fois et contient toutes les déclarations de style pour l'ensemble du site.

Les avantages sont énormes à choisir une icône css. Mais il y a des cas où une icône css n'est pas suffisante, alors c'est au développeur de choisir entre une icône css ou une image en fonction des besoins.