[Résolu] Question d'optimisation ?

Bonjour à tous,
En regardant un peu le site Deezer, je me suis rendu compte que tous les petits éléments graphiques du site étaient regroupés dans une seule et même image :
http://files.deezer.com/img/main-v31.png

Dans le CSS, on peut voir, pour tous les éléments :

background : transparent url(http://files.deezer.com/img/main-v31.png) no-repeat scroll 0 0;

Mais ce qui change c'est la position du background :

background-position : -75px -114px;

Je voulais savoir quel était l'intérêt de procéder comme ça. Est ce que le chargement est plus rapide s'il y a qu'une seule grosse image a télécharger plutôt que pleins de petites ?
Est ce que le navigateur créée autant d'instances de la grosse images qu'on lui demande de petites images ? Dans ce cas là, il y aurai en mémoire une vingtaine de grosses images dont on utilise qu'une petite partie à chaque fois...
Ou est-ce dans un soucis de maintenance du site : pour changer le thème, il suffit de changer que la grosse image du site plutôt qu'un dossier d'images.

Merci pour vos réponses.

Ulmo.
Modifié par Ulmo (30 Oct 2009 - 17:07)

Bonjour et bienvenu sur le Forum,

La méthode employée sur le site de deezer est connue sous le nom de sprite css.
On regroupe toutes les images de petite taille en une seule image afin de réduire le poids final et le nombre de requête http.

L'utilisation de cette méthode est recommandé par le groupe performance de Yahoo! :
- Best Practices for Speeding Up Your Web Site (en)

Merci beaucoup, cela répond à ma question.

Ulmo a écrit :
Merci beaucoup, cela répond à ma question.

Parfait, le sujet est donc à classer comme [Résolu].