Gains apportés par cette technique

Les gains résultant de l'utilisation intelligente de l'arrière plan (ou background) peuvent être très importants tant sur la diminution de la consommation de bande passante, de la vitesse de chargement des pages, de leur vitesse d'affichage et, aussi étrange que cela puisse paraître, sur la consommation en mémoire vive de l'ordinateur de l'internaute.
L'astuce fonctionne à tous les coups, quelque soit le navigateur. Abusez en !

La procedure à suivre

Que veut dire utilisation "intelligente de l'arrière plan" ? C'est tout simple. L'arrière plan est une image qui se répète dans un élément, comme par exemple un tableau ou un sommaire.
Prenons, pour bien comprendre, l'exemple de ce site. Le fond de cet article n'est pas uniforme. Il est composé de lignes blanches et grises. Ceci est un arrière plan. Mais il est un peu spécial. Sa particularité est de ne faire que 155 octets (donc à peine 0.1 ko) ce qui le rend extrêmement rapide à charger.Son chargement est donc, même sur un modem 56 k, absolument instantané.

Il en va de même pour l'entête et le bas de page. Ces dégradés du blanc vers le bleu turquoise ne sont pas une image d'un seul bloc. Il sagit d'un arrière plan recopié sur toute la largeur du site. Le résultat est excellent puisque ces deux éléments rénuis ne pèsent pas plus de 500 octets.

Quel est le secret ?

Comme l'arrière plan se répète de lui même, à la manière des textures dans les jeux, il suffit de ne lui donner que la taille d'un seul motif. Par exemple on voit bien sur le fond de cet article qu'il suffit de définir une série de deux lignes pour que l'arrière plan soit composé. L'image d'arrière plan sera donc de très petite taille et très légère. Elle sera ensuite répetée par le navigateur jusqu'à donner l'impression que l'image est énorme.

Voici les images qui ont été utilisées pour créer les arrières plans sur ce site :

Fonction	Taille	Poids	Image	Aperçu en répétition
Entête	1 x 65	231 octects
Article	10 x 10	155 octets

Comme vous l'avez surement constaté grâce à ce tableau, la partie haute du site n'est donc pas une image de 750 x 65 pixels qui aurait été bien trop longue à charger. L'entête n'est composée que de la répétition de la fine bande de 231 octets et d'un logo.
Pour résumer, j'ai sur ce site utilisé intelligemment l'arrière plan plutôt que de lourdes images.

Avouez que les articles s'affichent assez rapidement :o)

Dimension recommandée

Un dernier petit conseil : évitez les images en arrière plan faisant moins de 50 pixels. En dessous de ce seuil l'ordinateur de votre visiteur, surtout s'il n'est pas très puissant, mettra du temps à remplir les grandes étendues et donc à afficher la page.

Exemple : une image de 10 x 10 pixels fait 100 pixels

Ensuite il ne vous restera plus qu'à l'enregistrer selon les conseils d'optimisation du poids des images.

Imprimer cette page | Ajouter aux favoris
Revenir en haut de la page

Besoin d'aide ? Une question ?

N'hésitez pas à venir chercher de l'aide ou des explications spécifiques sur le forum En1heure.
Nous ferons notre possible pour vous aider au plus vite.