fbpx

Fais pas ça n’importe comment #1 – L’optimisation des images

De nombreux clients viennent me consulter après avoir constaté un ralentissement de leur site web. Je remarque que le problème vient fréquemment d’images qui ne sont pas optimisées pour le web ou dont la taille n’est pas adaptée. Des images légères et au bon format permettent au site de charger significativement plus vite. La diminution du temps d’attente pour afficher une page web à un impact positif sur l’expérience utilisateur et lui évite de le quitter prématurément. Ceci est particulièrement vrai lors de consultation sur un téléphone portable ou sur un dispositif ne disposant pas d’une bonne connexion internet.

Quel format d’image choisir ?

On peut généraliser en disant que vous avez le choix entre deux formats. Le JPEG et le PNG.

 

Le JPEG est généralement utilisé pour des images pleines et riches comme par exemple une photo ou une illustration avec un fond comportant de nombreux détails.

 

 

 

Le PNG sera quant à lui utilisé en présence d’images ne comportant pas de fond comme par exemple dans le cas d’un élément détouré.

Optimiser la dimension des images

Comment choisir la bonne taille ? C’est assez simple ! La taille de l’image doit correspondre autant que possible à la dimension d’affichage sur votre site web. Attention toutefois à toujours conserver votre image de base. Elle pourra ainsi être réutilisée par la suite sans altérations.

 

Choisir la bonne résolution

La résolution (densité en pixel d’une image – dpi) est différente de la dimension de l’image (exprimée en pixels).
Je conseille personnellement à mes clients de traiter les images non pas en 72 dpi mais plutôt en 150 dpi. Effectivement, les écrans actuels sont loin des standards imposés à l’époque.

Je n’ai pas traité dans cet article le cas particulier des GIF qui présentent eux aussi leurs spécificités en terme d’optimisation. Je ne manquerai pas d’y revenir lors d’un prochain billet.

 

 

Les outils à votre disposition

Afin de mener à bien vos optimisations d’images voici une liste non exhaustive d’outils gratuits pour vous y aider :

 

Retour aux articles