« Planifier pour ne pas planer !
Et si Goldorak était Webmaster ? »

Yahoo rules #1 | Comment créer des sprites Html/Css ?

Un petit tutoriel pour mettre en place un sprite en css et ainsi diminuer le nombre de requêtes http…
Quand je disais petit, c’est vraiment petit… Car la manipulation est vraiment très “simple” à faire.

Pour ceux qui ne connaitrez pas les “Yahoo rules”, il s’agit de (plus ou moins) 10 règles “inventées” (en fait il y en a 14) par Yahoo pour optimiser le temps de chargement des pages d’un site. (http://developer.yahoo.com/performance/)

Voici la liste des “rules” (avec leurs traductions approximatives en anglais) :

  1. Make fewer HTTP request (Faire moins de requêtes HTTP)
  2. Use a CDN (Utiliser un CDN)
  3. Add an expires header (Donner une date d’éxpiration aux header)
  4. Gzip Components (GZipper les composants)
  5. Put stylesheet at the top (Mettre les feuilles de style en haut de la page)
  6. move scripts to the bottom (Les scripts Js en bas)
  7. Avoid css expressions
  8. Make Js and Css external ( externaliser les codes Js et Css)
  9. Reduce DNS lookups
  10. Minify Js (Minimiser (compresser) le Js)
  11. Avoid redirects (éviter les redirections)
  12. Remove duplicate scripts
  13. Configure ETags
  14. Make Ajax cacheable (faire que l’ajax soit cacheable (qu’on puisse le mettre en cache…))

Cet article est le premier d’une série qui vous présentera les “Yahoo rules”, de manière abordable, donc facile à mettre en oeuvre et en Français… Libre à vous et à votre imagination de les utiliser couplée avec d’autres astuces

Revenons à nos moutons, pour faire un sprite css il vous faut :

  1. Un logiciel de graphisme (Photoshop, PSP, etc…)
  2. Une page Html
  3. Une feuille de style Css
En fait nous ne toucherons ici pas du tout au code html puisque tout est fait dans le css.
Nous avons donc X images en background, elles sont disposée pour s’afficher dans un élément Html (logique…). Nous allons faire en sorte que ces X images ne fassent plus qu’une, et ainsi au lieu d’avoir X requêtes Http nous n’en auront plus qu’une.

Attention : Les images qui sont utilisées en repeat ne peuvent faire partie d’un sprite !!!
On va donc prendre nos X images et les diposer sur une seule image, dans notre logiciel de graphisme préféré (non pas inkscape, ça marche pas, c’est du vecto…). Une fois disposées il nous faut l’enregistrée dans votre format d’export favoris.
Laissez ouvert le document dans votre logiciel, nous allons nous servir des règles et guides (ou grilles) pour connaitre la position x et y de nos images dans le sprite. Voir le screen d’un sprite sous un logiciel de graphisme :

Vous devrez pour chaque image dans le sprite, prendre les coordonnées du points situé en haut à gauche. Essayez de positionner chaque éléments sur une position x,y entière (ex : 1,2 ou 61,78). Cela vous facilitera grandement la tâche une fois en Css.

Une fois que vous avez noté la position x et y de chaque éléments. Vous allez ouvrir votre feuille de style Css.

Votre code devrait ressembler à ceci (sans sprite) :

#monid_avec_bg
{

background: #fff url(../img/lapin.png) 0 0 no-repeat;
[...]
}

Vous allez :

  1. Changer l’image et mettre votre sprite
  2. Modifier le positionnement (actuellement 0 0) et le mettre au valeurs récupérée auparavant.
Ainsi votre code devrait être (si x=10 et y=11) :
#monid_avec_bg
{
background: #fff url(../img/sprite.png) -10px -11px no-repeat;
[...]
}

Cette opération est à répéter pour chaque image (background) de votre sprite.

Normalement le changement ne doit pas se voir et vous avez réussit à faire un sprite et améliorer sensiblement le temps de chargement de votre page.

Pour plus d’informations et/ou améliorations vous pouvez visiter la page officielle de cette Yahoo rule : http://developer.yahoo.com/performance/rules.html#num_http

à bientot !

Wikio
Wikio

Vous pourrez être intérressé par :

This entry was posted Jeudi, octobre 30th, 2008 at 22:14 and is filed under Développement, Yahoo rules. You can leave a response, or trackback from your own site.

Leave a Reply

Blog Référencement (SEO), Graphisme, Web, Communication et compagnie…
Nicolas deschampsNicolas deschampsNicolas deschamps