est le seul avantage de l'utilisation de Sprites CSS Image Sprites qu'il existe moins de demandes HTTP?
ou y a-t-il d'autres avantages?
Il y a également un moyen facile de détimer quelle zone d'un sprite à montrer?
5 Réponses :
Comme vous l'avez dit, l'un des principaux avantages est de réduire le nombre de demandes au serveur, améliorant ainsi le temps de réponse (surtout si vous chargez une grande quantité de petites images). Mais ce n'est pas la seule raison pour laquelle les gens utilisent des sprites.
Si vous n'utilisez pas les Sprites pour une "souris over", l'utilisateur verra l'image disparaître pendant une seconde ... et ça a l'air vraiment mauvais. En effet, si vous modifiez l'image au lieu de simplement déplacer le sprite autour, il chargera une nouvelle image et que le temps de chargement peut être visible à l'utilisateur final. P>
.bad{
background:url(abc.jpg);
}
.bad:hover{
background:url(abcHover.jpg);
}
.good{
background:url(abc.jpg) 0px 0px;
}
.good:hover{
background-position:15px 0px;
}
vous êtes les bienvenus :) Si vous avez besoin de plus d'informations afin d'accepter la réponse, faites-le-moi savoir
Je me demande toujours si je devais aller le chemin des images de l'image et je me demande à quelle échelle commence vraiment à payer. On dirait que d'ajouter un peu de maintenance supplémentaire pour le développement - l'argument "Mouse Over" est faux cependant. Vous pouvez facilement précharger les images du planer.
@Dirkboer L'argument de la Mouseover était valide en 2009, à l'heure actuelle, les navigateurs sont plus intelligents et les images de précharge survolez des images de manière plus facile. L'image Sprite commence à payer lorsque vous commencez à avoir quelques images (peut-être> 5). Sur mes applications, je peux voir que les demandes réductrices sont une bonne chose (et rend Yslow heureux). Les coûts de développement et de maintenance ne sont que des "frais" de configuration, car vous pouvez automatiser le processus de création de sprites à partir d'un lot d'images. Comment vous faites cela dépend de votre pile préférences / technologie. ht
La prestation principale est que vos pages sont chargées plus rapidement, principalement en raison de demandes HTTP réduites.
Vous pouvez Générer votre Sprite à l'aide d'un outil.
Disclaimer - J'ai écrit cet outil.
Merci Greg, votre outil Sprite Gen était très utile :)
Il est beaucoup plus facile d'obtenir un placement d'image (en particulier à côté du texte) le même navigateur croisé. Vous pouvez ajuster des images haut / bas / gauche / droite avec une alignement et un remplissage vertical.
Je trouve plus facile de garder une trace de toutes les images si elles sont dans un seul fichier. Surtout depuis que j'ai généralement une image PNG transparente, puis utilisez des images GIF pour IE6. Je sauvegarde ma carte PNG Sprite sous forme de gif et ajoutez une ligne avec l'image de fond dans mon IE6 CSS et mes images sont commutées.
J'utilise Photoshop ou GIMP pour obtenir des emplacements approximatifs dans la carte Sprite, puis utiliser Firefox pour affiner le placement.
Oui, il y a un autre avantage. Chaque fichier image a ses propres en-têtes, décrivant le type d'image, les couleurs, etc. Lorsque vous combinez des images à un seul sprite, vous gagnez des KB.
Mais comme vous l'avez déjà dit, vous gagnez sur la plupart des demandes HTTP.
En termes de détermination de la zone à montrer, je placerai généralement mes éléments sur les pixels qui sont des multiples de 100. Donc, s'il y a un sprite avec un tas d'icônes de 64x64 pixels, je les aurai généralement à (0, 100 ), (0, 200), (0, 300), etc.
De cette façon, je n'ai pas besoin de taper une mesure exacte (ou d'un autre développeur de cette matière) et de sauvegarder les touches de frappe lors de la définition de toutes mes propriétés de position d'arrière-plan.