Novembre 2012

Réduction de la taille d'une photo pour un site web

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 :

woman-wine - Gimp - 300x450 - Lanczos - 85%

 

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

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.

 

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

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

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.