Chargement d’image en Css

Chargement d’imagesLes images liées à une page web peuvent nécessiter de nombreux appels au serveur avant d’être toutes chargées sur le navigateur de vos visiteurs. Cet article va vous montrer comment réduire le nombre de ces requêtes.
Les découpes d’images avec CSS, plus connues sous le nom de sprites CSS, sont basées sur le regroupement d’images, mais de manière plus souple.
L’utilisation des sprites CSS est basée sur le regroupement de plusieurs images en une seule.

Le support peut alors être constituée par n’importe quel élément HTML supportant la gestion des images de fond, tel que SPAN ou DIV . Grâce à la propriété CSS background-position , l’image de fond souhaitée pour l’élément en question sera obtenue en précisant les coordonnées de la zone recherchée, sur l’image globale. Par exemple, pour utiliser une icône comme image de fond d’un élément, on pourra procéder de cette manière :

<div style="background-image: url('image.gif');
            background-position: ?260px ?90px;
            width: 26px; height: 24px;">
</div>

Voici un exemple mettant en œuvre les sprites CSS. Les cinq liens sont contenus dans un DIV appelé navbar . Chaque lien est encapsulé dans un SPAN et utilise la même image de fond, spritebg.gif , définie dans la règle #navbar span . Chaque SPAN dispose de sa propre classe, lui permettant de pointer sur la bonne partie de l’image, grâce à l’utilisation de la propriété background-position :

<style>
#navbar span {
  width:31px;
  height:31px;
  display:inline;
  float:left;
  background-image:url(/images/spritebg.gif);
}
.home { background-position:0 0; margin-right:4px; margin-left: 4px;}
.gifts { background-position:-32px 0; margin-right:4px;}
.cart { background-position:-64px 0; margin-right:4px;}
.settings { background-position:-96px 0; margin-right:4px;}
.help { background-position:-128px 0; margin-right:0px;}
</style>

<div id="navbar" style="background-color: #F4F5EB; border: 2px ridge #333;
width: 180px; height: 32px; padding: 4px 0 4px 0;">
  <a href="javascript:alert('Home')"><span class="home"></span></a>
  <a href="javascript:alert('Gifts')"><span class="gifts"></span></a>
  <a href="javascript:alert('Cart')"><span class="cart"></span></a>
  <a href="javascript:alert('Settings')"><span class="settings"></span></a>
  <a href="javascript:alert('Help')"><span class="help"></span></a>
</div>

Dans cet exemple, les temps de téléchargement ainsi mesurés sont de 342 millisecondes contre 799 millisecondes dans le cas d’images séparées, soit un gain de 57 % !

Contrairement aux images réactives, les sprites CSS n’imposent pas l’utilisation d’images contiguës. La plupart des avantages (ainsi que quelques inconvénients) des sprites CSS sont décrits dans l’article de Dave Shea, « CSS Sprites: Image Slicing’s Kiss of Death », disponible sur le Web. J’ai déjà évoqué quelques-uns des avantages des sprites CSS : réduction du nombre de requêtes HTTP par regroupement d’images et plus de souplesse que pour les images réactives. L’un des avantages les plus surprenants est la diminution de la quantité de données téléchargées. En effet, même si la plupart des gens s’imaginent que l’utilisation d’une grande image est plus coûteuse que la somme de petites images, dans les faits, le contraire est souvent vérifié. Ce phénomène est principalement lié à la factorisation des données d’encapsulation des images (tables de couleur, informations de formatage, etc.)
Si vos pages contiennent beaucoup d’images, pour le fond, les boutons, les barres de navigation, les liens, etc., les sprites CSS sont une solution élégante pour obtenir un code propre, une gestion d’images simplifiée ainsi que de meilleurs temps de réponse.

A voir aussi

Réseau

Sites