Magentix - Autour de Magento

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.

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}