Dossier Optimiser le temps de chargement : 1. Les images et sprites

Publié par Gui dans Dossiers

Les images sont indispensables sur un site internet, elles sont le meilleur moyen d’illustrer un propos, d’attirer le regard d’un utilisateur sur un produit, de partager des photos avec ses amis. Mais elles sont aussi malgré elles le plus grand facteur de ralentissement de chargement d’une page web.

Il faut donc bien réfléchir à la manière d’utiliser ces images sur son site internet avant de se lancer dans l’upload barbare !

1. Retailler ses images

Il va de soi qu’il est inutile et absurde d’avoir une image de grande dimension (mettons 1024×768) si c’est pour l’afficher dans un menu à la taille de 48×36 ! Il y a deux raisons à cela :

  1. La première c’est que l’affichage de l’image sera de moins bonne qualité car il faudra « caser » tous ces pixels supplémentaires dans une plus petite surface.
  2. La deuxième est une question de poids ! On perds évidemment beaucoup en affichant une vignette qui pèse 5 fois le poids normal d’une vignette !

Il vaut donc mieux exporter plusieurs versions d’une image, à différentes tailles pour différentes utilisations (vignette, icone, image plein écran …), ce que font la plupart des CMS aujourd’hui.

2. Exporter au bon format

Il existe 3 principaux formats d’image couramment utilisés sur Internet :

  • Le JPEG
  • Le GIF
  • Le PNG

Chacun ayant son propre domaine d’utilisation.

Le JPEG

On utilisera donc le JPEG pour tout ce qui a trait aux photos, bannières et autres images complexes (dégradés de couleur …). A noter qu’avec ce format, il est possible de réduire la qualité de l’image (pertes).

Le GIF

Le GIF est essentillement utilisé pour – non les GIF animés c’est fini merci beaucoup ! – Les images simples (logos, petits boutons, puces, images avec du texte). Le GIF permet de sauvegarder une compression des images sans perte et gère également la transparence (dans la mesure où le détourage est assez simple).

Le PNG

Le PNG tend à être un format très utilisé car il est aujourd’hui celui qui excelle dans la gestion de la transparence, très utilisée dans la plupart des designs modernes (Attention, la transparence des PNG n’est pas supportée sur IE 6). A utiliser à bon escient, que lorsque le contexte l’impose, car ce format est très gourmand en poids.

Il est donc important de faire le bon choix quant à l’export des images utilisées sur un site internet. Une erreur de format peut entraîner une différence de poids notable (un gif au lieu d’un JPEG pour une photo, un PNG pour une image sans transparence …) et ralentir votre site internet.

3. Utiliser les Sprites CSS

Les Sprites CSS c’est quoi ?

C’est une technique qui permet de combiner plusieurs images en une seule. Elle a deux énormes avantages :

  1. Elle réduit considérablement le nombre de requêtes demandées au serveur (une seule au lieu d’autant qu’il y a d’images)
  2. Elle permet un affichage instantané pour toutes les images de type rollover (visibles seulement après une action utilisateur).

On n’utilise donc plus des images au sens HTML (<img src= » » … />) mais des blocs avec un style CSS associé et donc un background-image.

Comment fabrique-t-on une sprite CSS ?

Le sprite CSS de Google

Il est très facile de construire une sprite CSS, il faut juste un minimum de calcul.

Pour commencer, on peut utiliser une logiciel comme Photoshop pour le faire manuellement, ou utiliser des scripts en ligne automatiques comme ceux-ci :

Le fonctionnement de base est qu’il suffit de positionner chaque image à un endroit précis et « calculable » de sorte que l’on puisse facilement y accéder en modifiant la position du background.

Ensuite il suffit de modifier la position du background-x et du background-y dans la feuille de style.

Voici par exemple différents boutons utilisés par google avec les sprites :

Bouton Google Bouton Google Bouton Google Bouton Google Bouton Google

Voici le style CSS associé aux boutons :

background:url("nav_logo14.png") -20px -132px; /* Position à faire varier */
display:inline-block; /* Pour que le bloc conserve sa largeur */
height:19px;
text-indent:-9999px; /* Pour masquer le texte */
width:19px;

Remarque :

En utilisant ce procédé, on favorise également le référencement du site grâce notamment à l’attribut « text-indent » qui décale le texte de sorte qu’il n’y ait que l’image d’arrière plan qui soit visible, mais qui est parfaitement visible par les robots (qui ne voient pas le CSS).

Aller plus loin avec les sprites :

Quelques outils pratiques

  • Un très bon outil pour savoir si on peut gagner du poids sur une image: Smush It !
  • Le plugin YSlow qui vous permettra de savoir si vous utilisez correctement vos images (A utiliser avec Firebug).

Conclusion

Les images d’un site internet ne sont donc pas à prendre à la légère (sans jeu de mots :) ). Il faut bien veiller à respecter les différentes étapes énoncées au dessus pour minimiser les temps de chargement de votre site internet.

6 commentaires

  1. Julien Vernet

    Chez N2Clic, nous utilisons régulièrement les sprites CSS. Pour les fénéants, il existe aussi http://spriteme.org/ qui fonctionne très bien.

    Concernant l’optimisation des images je conseille :
    – le PNG24 pour les dégradés et images répétées horizontalement/verticalement. J’obtiens de meilleurs résultats avec ce format qu’avec le JPEG.
    – le PNG8 qui clairement le gagnant pour les images simples (logos, icones…)

    Pour le JPEG, comme tu le précise, pour les photos.

  2. Djb

    Merci pour ton article, très intéressant

  3. Nicolas

    Je m’inscris en faux par rapport à ta remarque sur le PNG : « A utiliser à bon escient, que lorsque le contexte l’impose, car ce format est très gourmand en poids. »
    A nombre de couleurs équivalent, le PNG est toujours plus léger que le GIF sauf pour des images très petites.

    Sinon, je découvre ton site et c’est ma fois une belle découverte !

    • چاپ مقاله

      Je m’inscris en faux par rapport à ta remarque sur le PNG : « A utiliser à bon escient, que lorsque le contexte l’impose, car ce format est très gourmand en poids. »

  4. Gui

    @ Nicolas

    Ma remarque sur le PNG concernait les images exportées en PNG (au format 24 particulièrement) dans un mauvais contexte, comme par exemple pour une image de fond où son poids serait alors bien supérieur à un JPG ou même un GIF. Par contre je suis d’accord avec toi sur le fait que pour de simples images, parfois le PNG (surtout en 8 bits) est plus léger qu’un GIF.

    Voilà pourquoi je parlais d’utilisation « à bon escient ».

    Et sinon ravi que mon blog t’intéresse 😉

  5. Sébastien

    Merci pour ce dossier clair et concis.
    Dans une démarche d’optimisation du temps de chargement, il est judicieux d’examiner le « waterfall chart » pour voir dans quel ordre sont éxecutées les requêtes http, le temps qu’elles prennent et identifier lesquelles bloquent les autres. L’idéal reste de coupler cette analyse à un test de montée en charge, ce que permet CloudNetCare (outil de test de charge puissant en rvbu, simple et peu coûteux).

Laisser une réponse à Sébastien


Post shadow