Combine images using CSS sprites sur un site Joomla

micka971 · 18 Mars 2015

Bonjour,

Je travaille pour le référencement d'un site internet. J'ai fais une analyse via gt metrix et au niveau des performances il y a beaucoup de chose a travailler.

J'ai vu que "Combine images using CSS sprites" est actuellement a 0%
Qu'est ce que signifie cette optimisation et comment la résoudre s'il vous plait. Je suis un peu novice dans l'optimisation technique.

p0k3 · 18 Mars 2015

Un sprite, c'est ça :
http://uploads.siteduzero.com/files/253001_254000/253715.png

L'objectif est de réunir toutes les images fixes de ton site en une seule image et d'appeler des classes pour afficher l'image.

Exemple :
Voici le code HTML de départ

Code:

<body>
  <header>
    <div class="logo">
      <img src="logo.png" alt="logo">
    </div>
  </header>
  <nav>
    <ul>
      <li><a href="/"><img src="accueil.png" alt="accueil"></a></li>
      <li><a href="#">Lien 2</a></li>
      <li><a href="#">Lien 2</a></li>
      <li><a href="#">Lien 2</a></li>
      <li><a href="#">Lien 2</a></li>
    </ul>
  </nav>
</body>

J'ai deux images qui sont a priori fix (logo.png et accueil.png)
L'objecif est de créer un sprite à partir de ses images, puis de faire des références en CSS

Code:

<body>
  <header>
    <div class="logo">
      <span class="img img-logo"></span>
    </div>
  </header>
  <nav>
    <ul>
      <li><a href="/"><span class="img img-accueil"></span></a></li>
      <li><a href="#">Lien 2</a></li>
      <li><a href="#">Lien 2</a></li>
      <li><a href="#">Lien 2</a></li>
      <li><a href="#">Lien 2</a></li>
    </ul>
  </nav>
</body>

Et en CSS

Code:

span.img{
  background: url(<path_to_sprite>) no-repeat top center;
}
span.img.img-logo{
  width: 150px;
  height: 50px; /* taille du logo */
  background-position: 0px 0px; /* position du logo dans le sprite */
}
span.img.img-accueil{
  width: 30px;
  height: 30px; /* taille du logo */
  background-position: 155px 0px; /* position du picto accueil dans le sprite */
}

Y'a de bons outils pour te générer ça :
http://instantsprite.com/
http://spritegen.website-performance.org/

/!\ Choisis bien tes images, il faut pas que ça change tous les jours, un sprite ça prend du temps à intégrer !
Et choisis bien les images qui n'ont pas d'intérêt pour ton SEO

Voilà !