Sélection de la langue

Français

Flux sur le design

  • Quick Course On Effective Website Copywriting

    18 May 2012 | 5:27 pm

       Many dismiss copywriting as something that ad agency people do. Truthfully, all of us need to pay close attention to copywriting if we want to achieve our business objectives. The goal of a “regular” text is to inform or[…]

    Lire la suite...
  • A Foot On The Bottom Rung: First Forays Into Responsive Web Development

    18 May 2012 | 2:31 pm

       Responsive design is the hottest topic in front-end Web development right now. It’s going to transform the Web into an all-singing, all-dancing, all-devices party, where we can access any information located anywhere in the world. But does responsive design[…]

    Lire la suite...
  • How To Customize The WordPress Admin Easily

    18 May 2012 | 11:15 am

       In this article, we take a break from some of the more advanced ways to customize WordPress, and share some super-easy customization techniques for the WordPress Admin area. If you’re just getting started with WordPress, or have been running[…]

    Lire la suite...
Home > Méthodologie > Théorie > Optimiser ses images pour le web
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 :

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.

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.