CSS : combiner les images pour limiter les requêtes HTTP

  • De le 14 septembre 2009
  • Difficulté : 2/4

CSS : combiner les images pour limiter les requêtes HTTP Technique très peu utilisée mais extrêmement efficace pour diminuer considérablement le nombre de requêtes HTTP et économiser de la bande passante...

La technique est assez simple : il s'agit de combiner l'ensemble des images affichées depuis la propriété "background" du fichier CSS.

Si 10 éléments sur une page contiennent chacun une image de fond différente, 10 requêtes HTTP seront générées. En combinant l'ensemble de ces images en une seule, seule une requête HTTP suffira.

Combine images

Une fois les images combinées il suffit, depuis la propriété "background", de préciser la position de l'icône sur notre image icones.png :

document.html

<ul>
       <li class="help">Aide</li>
       <li class="save">Enregistrer</li>
       <li class="valide">Valider</li>
       <li class="folder">Dossier</li>
</ul>

style.css

.save {background:url(icones.png) no-repeat 0 0}

.folder {background:url(icones.png) no-repeat 0 -20px}

.help {background:url(icones.png) no-repeat 0 -40px}

.valide {background:url(icones.png) no-repeat 0 -60px}

On peut alors, s'il l'on souhaite réduire au minimum le poids du fichier CSS, réécrire depuis le .htaccess le nom de l'image icones.png :

.htaccess

RewriteRule ^i$ icones.png [L]

style.css

.save {background:url(i) no-repeat 0 0}

.folder {background:url(i) no-repeat 0 -20px}

.help {background:url(i) no-repeat 0 -40px}

.valide {background:url(i) no-repeat 0 -60px}
commentaires

Commentez cet article : CSS : combiner les images pour limiter les requêtes HTTP