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
|