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:
    30
    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:
    314
    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
Faut-il combiner les ensembles de publicités Facebook ? Facebook 19 Avril 2022
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
Combiner plusieurs commandes Google Google : l'entreprise, les sites web, les services 28 Novembre 2006
Combiner les types de ciblage AdWords 24 Novembre 2006
cherche outil aol data combiné à overture Crawl et indexation Google, sitemaps 23 Novembre 2006
Combiner la réécriture d'url + le passage de paramètre GET URL Rewriting et .htaccess 16 Août 2005
Requete simple ou combinée ? Référencement Google 22 Novembre 2004
Problèmes d'URL rewriting combiné avec PHP + erreurs apache URL Rewriting et .htaccess 7 Mars 2003
Liens en do follow ou no follow pour créditer les images ? Netlinking, backlinks, liens et redirections 14 Mai 2022
Images upscalées ou downscalées et le SEO Débuter en référencement 6 Mai 2022
Shopify : images hébergées sur CDN, en dehors du nom de domaine YouTube, Google Images et Google Maps 4 Mai 2022
URL rewriting d'images URL Rewriting et .htaccess 22 Janvier 2022