Intêret d'utiliser des sprites plutôt que n images Kajax Optimisation Sprite

On entend de plus en plus parler des sprites mais pour la plupart des gens, ce terme est relativement obscur.

Qu'est ce donc au final ?

C'est tout simplement des images agglomérées.

Voici un sprite :

L'idée de base est pourquoi appeler X images différentes lorsqu'on peut en utiliser qu'une seule et paramétrer des coordonnées pour ne voir qu'une partie de l'image qui nous interesse ?

CSS permet sans aucun problème d'utiliser une fragment de l'image. Voici un exemple qui permet d'extraire chacune des 3 images du sprite. (Vous pouvez voir le rendu final sur mon CV en bas)

#cv_doc,#cv_pdf,#cv_odt{
    width:70px;
    display:block;
    height:55px;
}
#cv_pdf{
    background:url('img_1_b_cvsprites.png') 0 0 no-repeat;
}
#cv_doc{
    background:url('img_1_b_cvsprites.png') 0 -55px no-repeat;
}
#cv_odt{
    background:url('img_1_b_cvsprites.png') 0 -110px no-repeat;
}

Après j'entends déjà certain dire, oui mais tu déportes la bande passante sur le css et au final ça revient au même. Certes, cela réduit un peu les gains, mais mieux vaut quelques octets de plus dans un CSS que plusieurs kilo-octets perdus en header HTTP .. (sans parler de la latence potentielle)