Optimisation des images
Format d'image et performance : Choisir le bon !
Pour bien choisir le format d'une image c'est relativement simple. Dès que l'on a beaucoup de couleurs, ce qui est le cas pour une photo, on utilise de préférence du jpg. Afin de limiter le poids du fichier final, on règle la qualité de 0 (résultat horrible) à 100 (top, mais très lourd).
Dans le cas d'une image simple, avec peu de couleurs (256 maximum), on passe par du GIF ou du PNG, avec une nette préférence pour le PNG 8. Ces 2 formats permettent de gérer la transparence. Certains navigateurs anciens ne savent pas gérer la transparence du PNG (IE6 pour ne pas le nommer).
Dans tous les cas, évitez les formats non compressés (BMP et TIFF).
Compresser une image correctement
Quel que soit le format utilisé, vous aurez quelques choix à faire : qualité du jpg, nombre de couleurs pour gif et png, transparence... La chose à retenir, c'est que qualité et nombre de couleurs influent directement sur la taille du fichier final.
N'hésitez pas à jouer avec les différents réglages afin de trouver le bon compromis entre qualité et poids en fonction de votre image.
Une fois le site en ligne il n'est pas trop tard pour bien faire. Le plus simple est d'utiliser smush.it qui fera le travail tout seul 🙂 Soit vous lui fournissez les images, soit leur URL. Et encore mieux ! Si vous avez installé Yslow, vous récupérerez un zip comprenant toutes les images compressées d'une page d'un seul coup.
Terriblement efficace.
PNG vs GIF vs JPG
Exemple d'une photo :
Exemples d'images simples, un logo :
Taille des images et poids
Une erreur commune est d'afficher une grande image en petit via le HTML et penser qu'elle en devient légère.
<img width="100" height="100" src="monimage"> et <img width="1000" height="1000" src="monimage">
L'image aura le même poids, seul la taille affichée sera différente. Donc redimensionnez vos images à la taille d'affichage prévu. En plus la qualité sera meilleure.
