Combine images using CSS sprites sur un site Joomla

Discussion dans 'Débuter en référencement' créé par micka971, 18 Mars 2015.

  1. micka971
    micka971 Nouveau WRInaute
    Inscrit:
    18 Mars 2015
    Messages:
    28
    J'aime reçus:
    0
    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.
     
  2. p0k3
    p0k3 WRInaute occasionnel
    Inscrit:
    2 Juin 2010
    Messages:
    315
    J'aime reçus:
    0
    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à !
     
Chargement...
Similar Threads - Combine images using Forum Date
Combiner 2 requetes préparées Développement d'un site Web ou d'une appli mobile 30 Septembre 2018
Sprites combinés ou pas Développement d'un site Web ou d'une appli mobile 13 Juillet 2015
3 mots combiné chez les anglophones Noms de domaine et référencement 1 Février 2015
Combiner dreamweaver et prestashop Développement d'un site Web ou d'une appli mobile 29 Juillet 2013
Besoin d'aide pour combiner plusieurs fichier Javascript Développement d'un site Web ou d'une appli mobile 3 Décembre 2012
Referencement connaitre toute les combines Débuter en référencement 19 Février 2012
Comment combiner le taux de rebond et la durée de visite Google Analytics 27 Mai 2011
Comment combiner des fichiers pour optimiser le référencement ? Référencement Google 6 Avril 2011
Google combine les recherches similaires ?!! Référencement Google 10 Novembre 2010
Redirections des images - Refonte Débuter en référencement 14 Novembre 2019
  1. Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
    Rejeter la notice