servant beaucoup de petites images en un seul fichier

Question

Simple. Quand une page HTML contient beaucoup de petites images, il faudra du temps pour la rendre complètement rendue, d'autant plus que chaque fichier doit être demandé séparément. Par exemple, si vous avez 500 images avatar 32x32 que vous souhaitez afficher, le navigateur doit effectuer 500 requêtes avec 500 en-têtes, ce qui donne 500 réponses avec des en-têtes. Ainsi, beaucoup de trafic.
Pour réduire la quantité de trafic, je pense qu'il serait préférable d'envoyer tous les fichiers sous la forme d'une seule demande/réponse et que le script client fasse la division de ce fichier en images séparées, à placer partout où nécessaire. Ainsi, le navigateur exécute un script, le script demande le paquet d'images, le serveur renvoie le paquet et le script mettra ces images dans les emplacements appropriés. Ainsi, une requête/réponse au lieu de 500 requêtes/réponses.
Est-ce que quelque chose de similaire a déjà été créé? Si oui, par qui?

Answer 1

On l'appelle css-sprites, en gros vous avez une grande image avec toutes vos images dans un modèle de grille et des règles CSS pour obtenir celui que vous voulez.

Vérifier

http://spritegen.website-performance.org/

http://csssprites.com/

Answer 2

Comme alternative à sprites css-(pour être complet saké), et si vous n'avez pas besoin d'aide IE7, vous pouvez intégrer des images dans le code HTML en tant que données: // URI. Vous aurez besoin de les encoder en BASE64, mais sur votre puce GIF moyenne de 30 octets, cela ne sera peut-être pas si grave.