| Optimiser ses images pour le web |
| Méthodologie - Théorie |
| Écrit par K.L. |
| Mardi, 01 Juin 2010 14:29 |
|
Pour être agréable un site doit être rapide. Or les photos ralentissent la vitesse d'affichage du site. Il convient donc d'adapter les images que l'on présente pour maintenir une bonne vitesse d'affichage du site. Pour y parvenir vous avez plusieurs leviers : La taille du fichier, l’échantillonnage et le format d'enregistrement. Utiliser les trois à la fois permet de gagner beaucoup de place et de rapidité. Il va de soi qu'il n'est pas toujours nécessaire de mettre en ligne des image en qualité et taille maximum sur internet. C'est d'autant plus vrai que les images délivrées par les appareil photos numériques sont de plus en plus grosses et donc lourdes. D'autre part les écrans ne grandissent pas aussi vite et leur résolution encore moins. Il semble donc raisonnable de ne pas chercher à afficher des images de 12 ou 16 méga pixels si ce n'est plus. Pour réduire le poids de l'image la première chose à faire est bien évidemment de diminuer sa taille. En fonction de l’importance de l'image dans le site vous pourrez choisir de dimensionner vos images en 1000 x1500 pixels par exemple pour un affichage plein écran confortable ou en plus petit si ce sont des vignettes ou si les images ont moins d'importance. C'est à vous de déterminer les dimensions d'affichage que vous souhaitez. N'oubliez pas qu'il faudra peut-être prévoir plusieurs versions, plein écran, vignette et une version intermédiaire. Rassurez-vous de plus en plus de site ou de CMS gère de manière automatique ces différentes versions en partant de la version plein écran. Avec votre logiciel de retouche photo favori diminuez la taille de vos images aux dimensions que vous souhaitez. Attention pensez à respecter l'homothétie de votre format d'origine, sinon votre image sera déformée. Le format d’enregistrement est aussi important : un format compressé est préférable pour "alléger" le poids du fichier. Actuellement la convention est plutôt d'utiliser du jpg un format d'enregistrement d'image compressé mais de bonne qualité visuelle si bien utilisé. L'autre point est de régler le bon type d'image en fonction de son utilisation. Inutile d'afficher une image RVB si c'est en fait une photo noir et blanc, de même, laisser des couleur décrites sur 32 ou 48 bits ne fait qu'alourdir le poids inutilement. Il est possible de pousser plus loin ce raisonnement en "appauvrissant" (option posterize) volontairement le nombre de couleur affichés. En complément d'une compression jpg vous gagnerez beaucoup de place et de rapidité. Attention avec cette dernière soution. La qualité se dégrade rapidement en enlevant trop de couleurs. Faites des essais. Voici un exemple avec différents tailles et poids de fichier : Le fichier d'origine est une photo prise en 4000x3000 pixels. Le fichier raw fait 14 Mo, le jpg généré par l'appareil 6,7 Mo, le fichier tif équivalent : 34,3 Mo ! Voici des versions en 400x300 pixels :
entre la première et la deuxième vous passez de 130,3 Ko à 32,3 Ko soit une économie de 98 Ko, ce qui répercuté sur un grand nombre de photos ou images fini par faire une grosse différence. Comme vous pouvez le voir sur la dernière et en comparant les deux images, celles-ci sont légèrement différentes mais avec un résultat visuel tout à fait acceptable. Il existe aussi une autre technique assez répandue mais plus adaptée aux images plutôt qu'aux photos : La palette de couleur. Ce n'est pas celle qu'on utilise normalement pour choisir ses nuances mais c'est connexe. Il s'agit pour le principe de décrire les couleur de l'image comme appartenant à une palette déjà établie. Vous pouvez choisir des palettes déjà standardisées, comme les couleur indexée ou toute autre palette. Attention c'est comme avec posterize : le but est ici de diminuer le poids du fichier, donc de diminuer le nombre de couleur, donc il faut une image qui ne souffre pas trop de perdre toutes ses nuances. C'est pour cela que les photos sont déconseillées. Pour des images mises en couleur c'est très efficace. Conclusion : Il est possible de gagner franchement sur le poids de fichier pour accélérer affichage de son site internet et de son contenu. Moyennant une dégradation acceptable dans la majorité des cas et en réduisant la taille vous pourrez illustrer votre site sans trop le ralentir. |

Image enregistré en jpg qualité max (100) 130,3 Ko
Image en jpg qualité moyenne (70) 32,3 Ko
Image qui présente les pixels différents.