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.

Compression d'une 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 :

Test d'optimisation d'une photo

Exemples d'images simples, un logo :

Exemple compression d'image et format

Test optimiser Image

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.

Sources / Pour aller plus loin

Ressource Optimisation des images

Une question ? Venez la poser sur notre forum Web Analytics et performance web !

A propos de l'auteur

Jacques Terrier

Jacques Terrier AKA Cobolian : Premier site en 98, puis quelques belles références à son palmarès. Fort de son background technique et marketing, Jacques est consultant e-commerce.

Newsletter Marketing