'importance de la rapidité de votre site internet, comme critère de satisfaction des utilisateurs, ne doit plus être démontrée. Voici doncla suite des conseils pratiques pour rendre vos pages aérodynamiques !...

8. Optimaliser la compression des images
Tous les logiciels professionnels de traitement de l'image (de Photoshop à Fireworks) fournissent aujourd'hui des outils très pratiques permettant d'optimaliser automatiquement ou manuellement la compression des images.
La compression JPG va parfois jusqu'à réduire dans un rapport de 1 à 10, la taille d'une photographie, sans que la qualité ne s'en ressente à l'oeil nu !
La palette de couleurs des GIFs peut être limitée drastiquement... rendant ce format fort intéressant pour tout ce qui est icône, logo, titraille, graphique,...
Le format PNG semble particulièrement efficace en termes de compression ; malheureusement, ses qualités n'ont pas suffi, jusqu'à ce jour, à le rendre populaire.

9. Utiliser des textes alternatifs
Le texte alternatif (tag ALT) est le texte qui apparaît dans l'attente qu'une image se télécharge. C'est la seule chose que voient les quelques internautes qui surfent à bord de navigateurs "pur texte" ou qui décident volontairement, pour des raisons de performances, de ne pas charger les images. C'est également le texte que fait apparaître votre navigateur lorsque vous passez avec votre souris au-dessus de l'image.
L'usage de textes alternatifs est totalement indispensable aux images servant à la navigation. Cela permet aux internautes d'utiliser un hyperlien, si nécessaire, sans devoir attendre le chargement complet des images !
Mais même pour les images non cliquables, le texte alternatif peut être intéressant. Un texte du type "Graphique illustrant la répartition des voix entre Démocrates et Républicains" permet de patienter en connaissance de cause !
Notez que pour que les textes alternatifs fonctionnent efficacement, il est nécessaire de spécifier les dimensions des images de même qu'il est nécessaire que ces dimensions soient suffisamment grandes que pour permettre l'affichage du texte alternatif prévu !

10. Prévoir une version basse résolution
Le tag LOWSRC existe depuis la prime enfance du HTML et on a parfois tendance à l'oublier. Ce tag permet de charger, dans un premier temps, une version basse résolution d'une image, avant d'en charger la version haute résolution !
Classiquement, on chargera une version noir et blanc, aux nuances de gris limitées, avant de charger l'image en couleurs. La différence de poids peut être notable.

11. Utiliser le chargement progressif
Le chargement progressif rentre dans le même ordre d'idées... En s'affinant progressivement, une image GIF ou JPG permettra de rencontrer deux objectifs : fournir rapidement une idée grossière de la nature de l'image ; proposer ensuite une image de qualité.
Le chargement progressif est un des attributs à spécifier au moment où vous enregistrer une image GIF ou JPG.

12. Découper les images à la taille exacte
Lorsque vous affichez une image en dimensions réduites (pour créer un effet "vignette" par exemple), le navigateur charge, dans un premier temps, l'image de grande résolution, pour ensuite la réinterpréter en fonction des dimensions d'affichage spécifiées. En matière de performances, c'est très pénalisant.
Plutôt que d'adapter la taille de votre image par le biais de votre éditeur HTML, il est donc conseillé de prévoir, à la source, autant d'images que de dimensions utilisées.

13. Eviter de ranger une même image à plusieurs endroits
En plaçant une image à un et un seul endroit de votre serveur, vous optimalisez les fonctions de cache des navigateurs.
En effet, si l'image se trouve à plusieurs endroits, elle nécessitera d'être chargée plusieurs fois dans la mémoire tampon.

14. Optimaliser la compression du code HTML
Bien que le poids de la page HTML soit généralement négligable par rapport au poids des images, le code source HTML, lui aussi, peut être compressé. Les logiciels d'édition professionnels intègrent des fonctions de nettoyage permettant de supprimer tous les tags redondants ou inutiles, voire de combiner certaines balises (en rassemblant, par exemple, différents attributs d'un même tag <FONT>).

A SUIVRE la semaine prochaine ...

Jean-Marc Hardy
www.radioscopie.net
Formation à la qualité web