Optimisation du temps de chargement
Équilibre entre la qualité de l'image et la vitesse
Comment gagner des secondes sur le Temps de téléchargement ?
François SOUNTHONEVICHIT
Fabrice ALIZON
fabrice@pixalione.comAuteur correspondant
Les images rendent les sites internet beaux et attractifs. Cependant, lorsque l'on utilise une belle image, de grande taille, avec une haute résolution, le chargement de celle-ci sur internet peut être très lent. Cet article permet de comparer les 3 formats d'images les plus courants, utilisés pour les graphiques Web. Il donne aussi quelques techniques d'optimisation afin d'améliorer le temps de chargement de l'image.
@ 2009 PIXALIONE, tous droits réservés.
1 INTRODUCTION
Internet a changé la façon dont l'information est présentée. Selon Heavin et Weinman, (1997) : « Il ne suffit pas de créer du visuel et des informations - la vitesse d'accès à votre site est également critique ». Les utilisateurs internet sont libres. Ils peuvent quitter le site à tout moment, et ne s'en privent pas. C'est donc une tâche essentielle lors de la création de site internet, non seulement d'attirer l'internaute sur une page, mais de s'assurer qu'il y reste le plus longtemps possible. Une des façons d'attirer et de garder le public sur sa page est d'optimiser au maximum la qualité de l'image, tout en minimisant le temps de téléchargement. Ceci peut être accompli par le choix des formats des fichiers graphiques et en utilisant une variété de techniques de réduction de la taille du fichier.
2 GIF vs JPEG : QUEL FORMAT CHOISIR ?
« Graphic Interchange Format » (GIF) et le « Joint Photographic Experts Group » (JPEG) sont les deux formats couramment utilisés pour les photos Web. Les deux images JPEG et GIF sont multi-plateformes, ce qui signifie qu'elles sont consultables sur n'importe quel type d'ordinateur.
Ces deux formats utilisent des techniques de compression afin de réduire la taille des fichiers. La compression est particulièrement importante en ce qui concerne l'Internet, car elle permet de transférer des fichiers plus rapidement, ce qui réduit le temps de téléchargement. Bien que les deux formats soient appropriés pour la conception web, il est important de comprendre leurs différences, en vue de déterminer le meilleur format pour une image considérée.
Tableau comparatif JPEG vs GIF [1]
 |
 |
| Les JPEGs sont les mieux adaptés pour des photos, des peintures, des dessins au crayon ou au fusain et également des couleurs subtiles avec des changements de tons | Les GIFs donnent de meilleurs résultats, lorsqu'ils sont utilisés sur des images avec de vastes zones de couleurs unies et plates, comme de simples illustrations, logos, des textes avec graphiques, ou des dessins animés. |
3 PNG vs GIF vs JPEG
Portable Network Graphic (PNG) est un format d'image développé par un consortium de développeurs de logiciels graphiques comme une alternative à l'image de format GIF.
Les PNGs sont conçus spécifiquement pour une utilisation sur des pages Web. Ils offrent un éventail de fonctions intéressantes, parmi lesquelles : une gamme de profondeur de couleurs, l'appui à la transparence d'images sophistiquées, l'amélioration de l'entrelacement, et des corrections automatiques pour contrôler l'affichage gamma.
Le PNG supporte des images avec toute la gamme de couleurs et peut être utilisé pour les images photographiques. Cependant, comme il utilise une compression sans perte, le fichier résultant est beaucoup plus grand que la compression avec perte JPEG. Comme GIF, PNG est adapté pour les textes, les logos et les images qui contiennent de grandes zones de couleurs homogènes avec des transitions nettes entre les couleurs. Les images de ce type, enregistrées sous le format PNG, sont de bonne qualité et sont de plus petite taille que les fichiers GIFs. Toutefois, l'adoption généralisée du format PNG a été lente. Ceci est dû, en partie, aux freins des navigateurs Web. Internet Explorer, en particulier, ne supporte pas toutes les fonctionnalités de PNG. De ce fait, la plupart des images sont utilisées avec GIF alors qu'elles pourraient l'être avec la compression PNG.
Le GIF a peu de "perte" dans la compression, ce qui signifie que l'image ne perd pas en qualité dans le processus de compression. Le JPEG, par contre, a beaucoup de «perte» dans la compression. Des informations de l'image sont perdues, ce qui entraîne une certaine perte de qualité. Le GIF et le JPEG diffèrent aussi dans le nombre de couleurs qu'ils peuvent afficher. Les images GIF sont limitées à 256 couleurs (8 bits), alors que les fichiers JPEG peuvent utiliser jusqu'à 16,7 millions de couleurs (24-bit). C'est pour cette raison qu'il est préférable d'utiliser les fichiers JPEG, pour des images où les transitions entre les couleurs sont subtiles.
Le GIF est le format à privilégier pour les images ayant de grandes zones unies utilisant des couleurs «plates». Un autre atout du format GIF est de pouvoir rendre une couleur transparente. Cette fonctionnalité permet aux développeurs web d'avoir la possibilité de rendre le fond des images à formes irrégulières, «invisible». Ceci est obtenu en attribuant la transparence à la couleur du fond. Le GIF offre également la capacité d'avoir une animation sécurisée sur le navigateur, car il ne nécessite pas de plug-in, et est supporté par les principaux navigateurs.
4 TECHNIQUE POUR REDUIRE LA TAILLE DES FICHIERS
Après avoir choisi le bon format de l'image, il est souvent nécessaire de faire d'autres ajustements pour diminuer le temps de téléchargement. Voici quelques techniques simples et rapides pour diminuer la taille du fichier image, au moment de la création du site internet ou ultérieurement.
4.1 Re-Compresser l'image
Des outils, tels que Adobe IMAGEREADYT et Photoshop, vous permettent d'optimiser les graphiques pour le web en modifiant les niveaux de compression. Cependant, comme la compression augmente, la taille du fichier diminue, induisant une baisse de la qualité de l'image. L'objectif d'un développeur de sites Web, lors de la création du site internet, est donc de trouver un compromis entre la qualité de l'image et sa vitesse de chargement.Exemple de 4 niveaux de compression et rapport taille / temps de chargement [1]
 |
|
|
|
| JPEG Original 27.2K 14 sec pour 28.8Kbps |
JPEG 60 qualité 9.203K 4 sec pour 28.8Kbps |
JPEG 30 qualité 6.273K 3 sec pour 28.8Kbps |
JPEG 15 qualité 5.244K 3 sec pour 28.8Kbps |
4.2 Découpage d'images
Dès la création du site internet le découpage a deux objectifs. Il vous permet d'éliminer les informations superflues sur votre image et de réduire la taille du fichier image.Exemple de découpage utile
 |
 |
| 13.42K | 9.46K |
4.3 Re-dimension de l'image
De nombreux programmes, comme FrontPage, permettent aux utilisateurs de dimensionner une image en fonction de l'espace prévu. Croire que la taille de l'image est en corrélation avec la taille du fichier, est une idée fausse. Bien que l'image soit plus petite à l'écran, la taille du fichier reste la même. Une meilleure option est de dimensionner l'image à la taille nécessaire, en utilisant un logiciel comme Photoshop, avant l'importation de l'image dans un éditeur HTML.4.4 Thumbnails (affichage vignette)
L'utilisation de Thumbnails est une autre technique permettant de réduire le temps de téléchargement des pages. Il suffit d'environ une seconde pour télécharger une image icône, ce qui est donc beaucoup plus rapide que pour une image en taille réelle. Le Thumbnails offre ainsi à l'utilisateur un choix supplémentaire. Cette méthode est utilisée, lors de la création de site internet pour des pages «catalogues de produits», nécessitant l'affichage d'un grand nombre d'images.5 CONCLUSION
Internet est un outil très puissant mais qui doit prendre en compte les contraintes imposées par les utilisateurs. Pour la création de site internet, il est donc très important de veiller à la vitesse de chargement, sans compromettre la qualité de l'image. L'utilisation des plus récentes avancées technologiques, permet de concilier les plaisirs de l'oil et les impératifs du chronomètre.
6 REFERENCES
Nicholson, S. (1998). GIF vs. JPEG: Choosing a graphics compression format for web publications. Information Technology and Libraries, 17(2), 109-111.
Nielson, J. (2000). Designing web usability. Indianapolis, IN: New Riders Publishing.
Petrik, P. (2000). Top ten mistakes in academic web design. History Computer Review, 16(1), 63.
Weinman, L., & Heavin, B. (1997). Web file formats. Coloring web graphics 2: The definitive resources for color on the web. (pp. 36-57). Indianapolis, IN: New Riders Publishing.
Williams, R., & Tollette, J. (2000). The non-designers web book (2nd ed.). Berkeley, CA: Peachpit Press.
