La performance de chargement des images dans les pages d’une application devrait faire partie des préoccupations d’un designer. Nous allons donc parler dans cet article du choix des formats d’images et de leur optimisation.

Introduction

J’ai participé, il y a quelque temps, aux ateliers web organisés à l’occasion de “Paris Web 2008″. J’ai particulièrement apprécié le sujet concernant la performance de chargement des pages web proposé par Nicole Sullivane (Ingénieur Expert en Performance) et Eric Dapset (Ingénieur Front-end) de chez Yahoo.

Pour connaitre les bonnes pratiques qui permettent d’optimiser vos pages web, vous pouvez d’ores et déjà vous rendre sur le site “Yahoo, developper network” et lire l’article qui s’intitule “Best Practices for Speeding Up Your Web Site“.

En tant que designer, je ne parlerai dans cet article que des performances qui passent par une optimisation des images et de leur utilisation.

Choisir le bon format d’image

Il n’y a pas de bon ou mauvais format. Chaque format a ses caractéristiques et le choix du format dépendra de la nature de l’image et de l’utilisation que vous voudrez en faire.

Pour faire le bon choix, il est important de connaitre les caractéristiques de chacun des formats.

Le GIF (Graphics Interchange Format)

Caractéristiques

Le format gif utilise un algorithme de compression sans perte. Vous pouvez donc enregistrer plusieurs fois votre fichier sans pertes de données. Si vous utilisez ce format, les pixels seront codés sur 8 bits, ce qui représente un maximum de 256 couleurs.

Vous pouvez réunir dans un seul fichier (GIF89a), plusieurs fichiers gif (GIF87a) pour réaliser des animations.

Le format gif, sous brevet jusqu’en 2006 est dorénavant dans le domaine public, il est ainsi possible de l’utiliser librement.

Utilisations

La limitation à 256 couleurs n’est pas gênante pour les images comportant un nombre plutôt limité de couleur et sans dégradés, avec de préférences des grandes zones de couleur unies. Nous pouvons donc l’utiliser par exemple pour les logos, les graphiques et la plupart des images synthétiques, ainsi que les photographies en noir et blanc.

Vous pouvez également utiliser ce format pour des petites animations.

En revanche pour une photographie couleur de qualité ou des dégradés subtiles, il est préférable d’utiliser un autre format.

Le format gif gère la transparence mais un pixel d’une image gif est soit complètement transparent soit complètement opaque.

Le JPEG (Joint Photographic Experts Group)

Caractéristiques

Le format jpeg dont l’extension informatique est “jpg” est un format de compression à pertes qui élimine des informations. Cela signifie que si vous enregistrez une ou plusieurs fois une image au format jpg, vous perdez des informations à chaque enregistrement.

Ce format permet d’obtenir des images comportant plusieurs millions de couleurs.

Le point fort de ce format est qu’il permet une compression réglable. Vous pouvez choisir à l’enregistrement, le taux de compression que vous appliquerez à votre image. Plus vous compressez, plus vous éliminez des informations dans l’image.

Les standards de fichiers d’images JPEG utilisent le référentiel de métadonnées de l’IPTC, dénommé IPTC Core. Il est donc possible de stocker dans une image jpg un certain nombre d’informations, une vignette et même un fichier audio. Attention, l’enregistrement de ces métadonnées dans l’image jpg alourdit son poids.

Utilisations

Le format jpg est adapté à la compression des photographies couleurs, aux images qui comportent des dégradés, aux images qui comportent des bords flous et aux images qui possèdent beaucoup de détails. Le rendement de la compression est intéressant mais vous devez trouver le bon réglage pour ne pas trop dégrader vos images.

Le format jpg ne gère pas la transparence.

Le PNG (Portable Network Graphics)

Nous parlerons de deux types de fichiers png: le png8 et le png24. Les pixels d’une image en png8 sont codés sur 8 bits (256 couleurs) alors que les pixels d’une image en png24 le sont sur 24 bits (plusieurs millions de couleurs). Dans les deux cas, la compression est non-destructive.

Caractéristiques

Le format png8

Le format png8 comme le format gif a des pixels codés sur 8 bits soit un maximum de 256 couleurs. Ce format a été développé pour trouver une alternative libre au format gif qui jusqu’en 2006 était sous brevet. Par rapport au gif, le png8 a une meilleure compression que le format gif sauf peut être pour les images de très petites tailles.

Le png8 gère la semi-transparence. Attention, dans Internet Explorer 6.0 et inférieur, la semi-transparence des png8 n’est pas supportée. Les pixels semi-transparents deviennent complètement transparents.

Par contre, vous ne pourrez pas faire d’images animées avec ce format.

Attention, tous les logiciels de traitement d’images ne compressent pas les images en png8 avec la même efficacité. Par exemple, Fireworks a longtemps surpassé Photoshop dans cet exercice. Je ne sais pas si c’est toujours le cas, n’utilisant plus les produits Adobe depuis longtemps. Dans le monde libre, vous trouverez un certain nombre de scripts qui gèrent très bien la compression png (pngnq, pngcrush, optipng, imagemagick …)

Le format png24

Le format png24 donne des images dont les pixels sont codés sur 32 bits (24 bits couleur, 8 bits alpha). Vous disposez donc d’une palette de couleurs aussi étendu que pour les images jpg et une gamme de transparence très large (semi-transparence). Ce format compresse les images sans destruction.

Utilisations

Le format png8

Le png8 est un concurrent du format gif. Dans beaucoup de cas, il donne des fichiers moins lourds. C’est donc le format de fichier idéal pour les images destinés aux sites web qui ne comportent pas de nombreux détails, dégradés et couleurs.

Vous pouvez par exemple l’utiliser pour:

- Les captures d’écran.
- Les illustrations au trait (logos, symboles, histogrammes, schémas, icônes …)
- Les images contenant principalement du texte.
- Les images aux bords bien nets et/ou aux surfaces unies.
- Les images 2 couleurs (noir et blanc).
- Les images contenant un nombre réduit de couleurs.

Le format png24

Le png24 est utile pour les images qui possèdent beaucoup de couleurs et de détails ou des dégradés. Par contre, comme c’est un format non destructif, le poids des images est plus important que les images compressées en jpg. Ce format sera utile si vous voulez utiliser des images semi-transparentes. Attention, le navigateur Internet Explorer 6.0 transforme les pixels semi-transparents en gris.

Vous utiliserez le png24 pour son rendu des couleurs et des dégradés, pour le rendu des détails et pour conserver des images sans destructions.

C’est aussi le format idéal pour les images qui comportent des bordures fines (1 px) arrondies en semi-transparences. En png8, vous risquez d’obtenir des bordures crènelées. Il convient de tester les deux formats pour voir si le rendu en png8 est acceptable ou pas.

Si vous n’utilisez pas la transparence, que votre image est relativement riche en couleurs et détails et que vous destinez votre image au web, le format jpg sera plus approprié. En effet, le jpg vous donnera une image plus légère. A vous de trouver le bon taux de compression pour optimiser le rapport poids/qualité.

Internet explorer 6.0 et la transparence

Si vous cherchez des informations sur la façons de gérer la transparence des png dans le navigateur Internet Explorer 6.0, je vous renvoie au très bon article rédigé par Bruno Bichet IE6 - Gérer la transparence du format PNG 24 bits

Le SVG (Scalable Vector Graphics)

Caractéristiques

Le format svg basé sur XML est un peu à part par rapport aux trois formats précédents car c’est un format d’image vectorielle et non bitmap. C’est un format libre régit par le W3C (World Wide Web Consortium).

Le rendu SVG est supporté nativement par les navigateurs Web ou par ajout d’un plugin s’occupant de la gestion du rendu à l’intérieur d’une balise html de nom object.

Utilisations

Ce format est encore peu utilisé sur le web mais je pense que cela devrait changer dans les années à venir notamment avec le support du module SVG de CSS3.

Il est aussi possible avec svg/smile de concevoir des animations.

Le svg est très utilisé dans le monde de la cartographie et du téléphone portable.

Optimiser le poids des images

Lorsque le designer termine ses maquettes et transmet à l’intégrateur les images d’un projet, il se soucis normalement de lui fournir des images optimisées. Mais qu’est-ce qu’une image optimisée ? C’est une image offrant une qualité maximum pour un poids minimum.

La première chose à faire est de choisir le format d’enregistrement le plus adapté à la nature de l’image. C’est une étape primordiale. Pour cela, je vous renvois au paragraphe précédent.

Une fois que vous avez choisis le bon format d’enregistrement, il faut utiliser des outils qui vont vous permettent d’appliquer la bonne compression sans trop dégrader l’image.

Les logiciels de traitement d’images

Dans les logiciels de traitement d’image comme Photoshop ou Gimp, vous avez la fonctionnalité “enregistrer pour le web”. Cette fonctionnalité est très pratique car elle vous permet de tester plusieurs formats d’enregistrement et de régler le taux de compression tout en contrôlant le résultat en prévisualisation.

Voici une copie d’écran de cette fonctionnalité sous Gimp:

Les scripts

Il existe de nombreux scripts de compression Open Source qui optimisent le poids des images. Ils s’utilisent souvent en lignes de commandes, mais pour les allergiques au clavier il doit exister aussi quelques interfaces graphiques.

Parmi ces scripts, nous pouvons par exemple citer optipng, pngcrush, pngrewrite, pngout, pngnq … pour l’optimisation des images enregistrées en png.

Pour les images enregistrées en jpg, vous pouvez utiliser le script jpegtran.

Pour les détails d’utilisation de ces scripts, je vous invite à vous rendre sur les pages web dédiées. Je ne m’étends pas sur la description des lignes de commandes de chacun de ces outils car l’application qui suit va nous faciliter grandement le travail.

Néanmoins, si vous voulez quelques exemples de manipulation de ces scripts, Stoyan Stefanov a rédigé un article sur le sujet.

Smush.it!

La société Yahoo à mis à disposition des internautes un outil très pratique pour tester les images d’une page web et vous en proposer des versions optimisées sans dégradation. Il s’agit de l’application smush.it!

Smush.it! est un projet Open Source mis en place par Stoyan Stefanov et Nicole Sullivan qui appartiennent tous les deux à l’équipe “Exceptional Performance team” de Yahoo!. Cette équipe est aussi à l’origine de l’application “YSlow” et des bonnes pratiques pour optimiser le chargement de vos pages web.

Vous pouvez utiliser cette application en ligne ou dans Firefox sous la forme d’une extension.

Smush.it! teste sur vos images plusieurs algorithmes et ne retient que celui qui donne le meilleur résultat. Les images gif sont convertis en png, car Smush.it! considère le format png plus performant. Les scripts utilisées actuellement par Smush.it! sont:

- ImageMagick pour identifier l’image et convertir les images gif en png.
- pngcrush pour retirer les données inutiles du png. L’équipe de Smush.it! expérimente les scripts pngout, optipng, pngrewrite qui permettrons peut être une meilleure optimisation.
- jpegtran pour retirer les metadata (actuellement désactivé) et essayer un format jpeg progessif.
- gifsicle pour optimiser les animations gif en retirant les pixels qui se répètent dans les différentes frames.

Voici une copie d’écran du rapport affiché par Smush.it! sur la page d’accueil de www.pixenjoy.com (utilisation de l’extension Firefox)

Je peux encore gagner 7,48 ko sur le poids des images de ma page d’accueil !

Les avantages de Smush.it! sont nombreux:

- Smush.it! utilise les meilleurs scripts de compression pour chasser les derniers octets que nos logiciels de traitement d’images n’ont pas réussi à éliminer, et tout cela sans dégradations de la qualité de l’image.

- Vous n’avez aucune ligne de commande à taper, tout est automatisé.

- Vous pouvez faire l’optimisation de plusieurs images à la fois, c’est donc un gain de temps appréciable.

- Vous avez plusieurs façons de soumettre vos images. Par upload des fichiers, en indiquant les URLs des images où en demandant à Smush.it! de prendre en compte toutes les images d’une page web.

- Smush.it! vous permet de visualiser un rapport des images compressées avec le poids avant et après compression ainsi que le gain obtenu en kilo octets.

- Smush.it! vous génère un zip avec toutes les images optimisées. Vous n’avez plus qu’à dézipper le contenu dans le répertoire image de votre serveur web.

Conclusion

Apprenez à bien connaitre les caractéristiques des différents formats de fichiers utilisés pour le web (gif, jpg, png8, png24, svg) afin de choisir celui qui sera le plus approprié aux profil de votre image.

Utilisez la fonctionnalité “Enregistrez pour le web” de votre logiciel de traitement d’images.

Aidez-vous de Smush.it! pour chasser les derniers kilo octets qui pourraient encore se cacher dans vos images.

Sources:

- Wikipédia avec les mots clés gif, png, jpeg, svg.
- Smush.it!
- Yahoo Developer Network
- L’article de Stoyan Stefanov intitulé “Optimization Part 1: The Importance of Images”
- Images et graphiques pour le web
- La page francophone du format PNG