Optimiser l’utilisation des images d’une page web : intégration HTML

Optimisation du nombre de requêtes, utilisation de sprites... Le traitement d'images peut être avantageusement complété par des pratiques pertinentes concernant l’intégration HTML.

Dans le précédent article, Optimiser l’utilisation des images d’un site web : traiter les images, nous avons évoqué cinq axes de travail pour un cure d’amaigrissement majeur du poids de votre site.

La valeur de ce travail peut être avantageusement complétée par des pratiques pertinentes concernant l’intégration HTML, que nous pouvons organiser autour de trois chapitres majeurs. Voyons cela ensemble.

Intégration HTML des images

Dans cette partie, nous n’allons pas chercher à optimiser le poids des images, mais plutôt à rendre le comportement du site plus véloce et augmenter sa réactivité.

Les bonnes pratiques nous recommandent de toujours spécifier les attributs height et width, ainsi que, si nécessaire, hspace et vspace (à défaut d’une gestion CSS avec margin et padding) pour les balises <IMG>.

Ici, l’objectif est, d’une part de faciliter le travail du navigateur en lui donnant le maximum d’instructions exploitables et, d’autre part, éviter les phénomènes dits de reflow qui provoquent un re-calcul de l’affichage de la page.

Moins de travail de déduction des caractéristiques d’affichage manquantes et moins de calcul du navigateur signifient un affichage plus rapide et une meilleure réactivité de la page durant son chargement ou son redimensionnement.

Déclaration inline

La majorité des navigateurs (malheureusement, exception faite d’Internet Explorer) est aussi capable de traduire une déclaration d’image codée en base 64 si elle est directement spécifiée dans le code HTML ou CSS.

Nous savons que, par défaut, les standards Internet limitent les accès à deux chargements simultanés, augmentant ainsi les temps de latence pour des pages constituées d’un grand nombre de toutes petites images. Avec une déclaration inline, vous supprimez les multiples requêtes au profit d’une seule.

Par exemple, pour une image de 20x20 pixels, se chargeant en 0,6 seconde, l’encodage en base 64 produit environ 1500 octets de données, soit un temps de chargement de 0,7 secondes pour 10 images. Si 10 images de ce type sont utilisées dans la page, nous observons 4 périodes de latence d’environ 0,6 secondes. Au final, avec une conception traditionnelle, nous pouvons observer jusqu’à 3 secondes de temps de chargement, pour seulement 0,7 avec une déclaration inline.

Pour réaliser l’encodage base 64, vous pouvez aussi utiliser un service en ligne, comme par exemple Motobit - Base 64 encoder-decoder ou http://www.greywyvern.com ou encore préférer l''utilisation d''un outil Windows sur votre poste, comme celui développé par John Dyer, Css Image Embedder.

 

Sprites

L’utilisation de sprites est aussi une excellente technique de réduction du nombre de requêtes de chargement. L’idée est de regrouper le maximum d’images en une seule pour ensuite utiliser les propriétés CSS afin d’en afficher qu’une partie, en fonction du besoin.

Par exemple :

Une fois ce regroupement réalisé, vous pouvez utiliser deux techniques, la plus commune (et plus simple) utilisant la propriété CSS background et son positionnement dans une balise DIV de dimension définie, la deuxième s’appuyant sur le clipping d’image.

Exemple de code pour la première technique :01    <style>
02    #faceBook {
03       width:32px;    /* la taille de l'icone */
04       height:32px;
05       background:url(img/optimisation-image-5.png) 0px 0px no-repeat;
06    }
07    #linkedIn {
08       width:32px;
09       height:32px;
10       background:url(img/optimisation-image-5.png) -32px 0px no-repeat;
11    }
12    #Rss {
13       width:32px;
14       height:32px;
15       background:url(img/optimisation-image-5.png) -64px 0px no-repeat;
16    }
17    #viadeo {
18       width:32px;
19       height:32px;
20       background:url(img/optimisation-image-5.png) -96px 0px no-repeat;
21    }
22    </style> Exemple de code pour la deuxième technique :

01    <style>
02    .clipDiv {
03       position:relative;
04       overflow:hidden;
05       width:32px; /* la taille de l'icone */
06       height:32px;
07    }
08    .faceBook {
09       position:absolute;
10       top:0;
11       left:0;
12       clip:rect(0 32px 32px 0);
13    }
14    .linkedIn {
15       position:absolute;
16       top:0;
17       left:-32px;
18       clip:rect(0 64px 32px 32px);
19    }
20    .Rss {
21       position:absolute;
22       top:0;
23       left:-64px;
24       clip:rect(0 96px 32px 64px);
25    }
26    .viadeo {
27       position:absolute;
28       top:0;
29       left:-96px;
30       clip:rect(0 128px 32px 96px);
31    }
32    </style>
33
34    <body>
35        <div class="clipDiv">
36           <img class="faceBook" src="img/optimisation-image-5.png" />
37        </div>
38        <div class="clipDiv">
39           <img class="linkedIn" src="img/optimisation-image-5.png" />
40        </div>
41        <div class="clipDiv">
42           <img class="Rss" src="img/optimisation-image-5.png" />
43        </div>
44        <div class="clipDiv">
45           <img class="viadeo" src="img/optimisation-image-5.png" />
46        </div>
47    </body>

Pour aller plus loin concernant l’utilisation des sprites, vous pouvez consulter un premier tutorial AlsaCréations et CSS Sprites with Inline Images.  

Conclusion

Avec toutes les informations présentées, vous pouvez dès maintenant (avec plus ou moins d’huile de coude suivant que vous soyez décideur, chef de projet, amateur éclairé ou débutant) rendre votre site véritablement plus véloce et réactif en appliquant rigoureusement un plan d’actions établi sur six axes :

1. supprimer les images inutiles au profit de propriétés CSS comme background, margin et padding,
2. choisir un format normalisé (jpg, png ou gif) et le plus efficace possible,
3. ajuster la taille de l’image en fonction de la dimension voulue dans le navigateur,
4. utiliser une résolution de 72 dpi ou moins,
5. compresser chaque image, jusqu’au point limite de détérioration visuelle,
6. optimiser l’intégration HTML.

Il n’est pas rare de réduire le volume des éléments graphiques de plus de 75%, ce qui est, avouons-le, un gain plus que substantiel.

Et n’oubliez pas : à chaque seconde de chargement, c’est 10 internautes qui fuient !

Dans un article à suivre (très rapidement), j’évoquerai un autre aspect de l’optimisation du temps de chargement des pages d’un site web, sous un angle exclusivement technique en parlant de la structure et de la conception de la page ainsi que de la gestion des dépendances JavaScript et CSS.