[[box-titreaccueil]]

Introduction

La vitesse de chargement d'une page web est importante pour plusieurs raisons. Tout d'abord, une page qui tarde à s'afficher agace le visiteur qui est tenté d'aller voir ailleurs. A quoi bon être bien référencé si ce visiteur se contente de rebondir quelques secondes sur votre site Internet ? Ensuite, Google tient compte de la rapidité de chargement d'une page dans son algorithme de classement. Pour être mieux positionné, et avoir plus de visiteurs, il est donc utile d'optimiser la taille de ses pages web.

Les images représentent souvent une part importante du temps de chargement d'une page. Voici quelques éléments pour optimiser leurs tailles.

Pour notre démonstration nous utiliserons la photo suivante qui permet de comparer facilement différentes méthodes de compression :

Qualités de compression de différents logiciels

La qualité de compression JPG se mesure généralement en pourcentage. Photoshop fait bande à part avec une mesure limitée à treize valeurs (0 à 12). Ce logiciel nous servira de référence pour la taille.

• Pour chaque logiciel, l'image initiale (1300x1950) est redimensionnée en 400x600 avec la meilleure interpolation proposée : Lanczos pour Gimp, ImageMagick et PhotoFiltre - Bicubic Sharper pour Photoshop - Super échantillonnage pour Paint.net - Smooth bicubic pour GD. Elle est ensuite enregistrée sous toutes les qualités possibles.
• La zone autour de l'oeil est ensuite sélectionnée sur toutes ces images puis grossie X2 avec Gimp sans aucun échantillonnage (les pixels semblent deux fois plus gros). Cette nouvelle image est enregistrée en qualité 96 % sous Gimp. C'est elle qui apparaît dans le tableau ci-dessous. La taille affichée reste celle des images 400x600.

Résultats : Aucun logiciel ne comprime de la même façon ! En matière de taille de fichier, c'est le grand écart. Pour un CMS, la bibliothèque GD (version 2) se montre plus performante qu'ImageMagick.

Pour cette dimension d'image (400x600), la taille raisonnable tourne autour de 50 ko.

Photoshop - qualité 12 : 197 ko	Gimp - qualité 99 % : 213 ko	PHP ImageMagick - qualité 99 % : 218 ko
Paint.net - qualité 100 % : 156 ko	Photo-Filtre - qualité 100 % : 163 ko	PHP GD - qualité 100 % : 152 ko
Photoshop - qualité 11 : 136 ko	Gimp - qualité 97 % : 133 ko	PHP ImageMagick - qualité 96 % : 131 ko
Photoshop - qualité 10 : 98 ko	Gimp - qualité 95 % : 102 ko	PHP ImageMagick - qualité 93 % : 101 ko
Paint.net - qualité 99 % : 104 ko	Photo-Filtre - qualité 97 % : 99 ko	PHP GD - qualité 98 % : 100 ko
Photoshop - qualité 9 : 78 ko	Gimp - qualité 92 % : 79 ko	PHP ImageMagick - qualité 86 % : 78 ko
Photoshop - qualité 8 : 65 ko	Gimp - qualité 88 % : 66 ko	PHP ImageMagick - qualité 78 % : 66 ko
Paint.net - qualité 95 % : 64 ko	Photo-Filtre - qualité 93 % : 66 ko	PHP GD - qualité 95 % : 67 ko
Photoshop - qualité 6 : 54 ko	Gimp - qualité 82 % : 54 ko	PHP ImageMagick - qualité 59 % : 54 ko
Paint.net - qualité 93 % : 53 ko	Photo-Filtre - qualité 89 % : 54 ko	PHP GD - qualité 93 % : 54 ko
Photoshop - qualité 4 : 43 ko	Gimp - qualité 72 % : 43 ko	PHP ImageMagick - qualité 23 % : 43 ko
Paint.net - qualité 89 % : 44 ko	Photo-Filtre - qualité 82 % : 43 ko	PHP GD - qualité 89 % : 42 ko
Photoshop - qualité 2 : 36 ko	Gimp - qualité 60 % : 36 ko	PHP ImageMagick - qualité 5 % : 36 ko
Paint.net - qualité 84 % : 36 ko	Photo-Filtre - qualité 73 % : 36 ko	PHP GD - qualité 85 % : 35 ko
Photoshop - qualité 0 : 33 ko	Gimp - qualité 52 % : 33 ko	PHP ImageMagick - qualité 1 % : 35 ko
Paint.net - qualité 81 % : 33 ko	Photo-Filtre - qualité 67 % : 33 ko	PHP GD - qualité 83 % : 33 ko

Taille de fichier et méthodes d'interpolation

Cette fois-ci, l'image initiale est réduite en 400x600 en utilisant différentes méthodes d'interpolation sur Gimp en qualité 95 %.

Résultats : La méthode d'interpolation a peu d'influence sur la taille de l'image. Il faut choisir la plus performante. Lanczos délivre ici le meilleur rendu.

Aucune interpolation : 113 ko	Interpolation linéaire : 98 ko
Interpolation cubique : 102 ko	Interpolation lanczos : 102 ko

Image de dimension inférieure à l'affichage

Autre méthode possible pour réduire la taille du fichier : fabriquer une image trop petite et imposer au navigateur de l'agrandir. Par exemple, une image de 200x300 qui sera affichée en 400x600. Comparons les résultats pour une même taille de fichier.

L'image initiale est réduite avec la bibliothèque GD en 400x600, 300x450 et 200x300. Elle est enregistrée de telle sorte que les trois fichiers obtiennent la même taille. Ensuite, zoom X2 sans interpolation de la partie oeil, comme plus haut. Les images conservent des dimensions différentes. Les deux plus petites seront agrandies par le navigateur avec les attributs WIDTH et HEIGHT.

Résultats : Cette méthode n'est pas appropriée en dehors des très fortes réductions de taille de fichier. A éviter.

200x300 affichée en 400x600 GD - qualité 95 % : 21,7 ko	300x450 affichée en 400x600 GD - qualité 84 % : 21,6 ko	400x600 GD - qualité 67 % : 21,6 ko
200x300 affichée en 400x600 GD - qualité 75 % : 9,0 ko	300x450 affichée en 400x600 GD - qualité 35 % : 9,0 ko	400x600 GD - qualité 16 % : 9,0 ko

Conclusion

Les différents logiciels de traitement photo ne donnent pas tous les mêmes résultats. Si la taille du fichier est votre critère principal, les plus puissants ne sont pas ceux que l'on croit. Dans tous les cas, il est préférable d'adapter les dimensions de l'image à ce qui est souhaité pour le site, sans utiliser les attributs WIDTH et HEIGHT. Il est également judicieux de choisir le mode d'interpolation le plus performant. Si votre site Internet fonctionne avec un CMS, vérifiez qu'il utilise la bibliothèque GD2 et non ImageMagick. Enfin, évitez d'utiliser les qualités maximales (12 et 100 %) qui donnent des photos très volumineuses et ne sont pas pertinentes pour une consultation sur écran.