Optimiser les images pour le web

24 mars 20171 mai 2020 Sub

Comment optimiser les images de son site web ?

L’optimisation d’image va permettre de réduire considérablement la taille de ces dernières. Le but principal de cette action et d’alléger la taille du site internet, on sait qu’un site internet optimisé et allégé va s’afficher plus rapidement et donc proposer une meilleure navigation à l’internaute.

En effet, plus un site répond et affiche la page demandée rapidement plus vos visiteurs seront satisfaits et il faut savoir que Google prend cet aspect en compte dans le référencement SEO des pages de votre site internet.

Nous allons donc voir ensemble comment optimiser une image pour le web.

Tout d’abord il faudra un bon rapport poids/qualité car une image trop compressée sera de trop mauvaise qualité et au contraire une image en trop grande définition sera trop longue à charger. Dans ce cas, un bon nombre d’internautes quitteront votre page.
1ere étape :

La première étape sera de retailler son image à la taille réelle d’affichage. Je m’explique : si vous uploader une image de 4000 pixels sur le blog alors qu’elle ne s’affiche qu’à 600 pixels de largeur sur votre site, vous aurez donc téléchargé une photo beaucoup trop grande. L’image trop volumineuse va ralentir le chargement de la page. Je vous conseille donc de tailler l’image en fonction du bloc d’affichage.

Astuce Photoshop : pour une optimisation JPG digne des plus grands graphistes, il faudra tailler votre image 2 fois plus grande que le bloc d’affichage, soit 1200px si l’image est affichée à 600px de largeur sur mon site internet et de passer la qualité à 5 ou 10%.

Dimensions : 600×397 Taille du fichier : 102 KB Qualité : 80

Dimensions : 1200×795 Taille du fichier : 60 KB Qualité : 10

On peut constater sur ces exemples que la qualité est encore au rendez-vous lorsque l’on compresse de cette façon une image JPG, les couleurs sont néanmoins un peu moins vives, à vous de jauger la bonne compression en fonction de vos besoins.

2nd étape :

Il faudra ensuite enregistrer son image au bon format, sur le web nous utiliserons le format JPG et le format PNG.

La différence entre le format JPG est le format PNG

Le PNG a la capacité à supporter les transparences. Vous pouvez donc placer les images détourées sur un fond de couleur avec une qualité optimale. Ce format est donc à privilégier pour les images détourées seulement car son poids est supérieur à celui d’une image au format JPG.

Le format JPG est le format idéal pour la compression des photos mais attention à ne pas trop compresser une image JPG pour ne pas la détériorer.

A savoir : la résolution des images ( dpi) n’est pas prise en compte sur le web, seule la dimension en pixel est importante.

Si vous ne disposez pas de Photoshop, vous pouvez utiliser le bon vieux GIMP pour retailler vos images !

Optimiser ses images encore et toujours plus avec Imagify !

Vous pouvez encore optimiser vos images en utilisant des scripts existants. Je vais vous présenter un outil intéressant en terme de compression. Il a également l’avantage d’être parfaitement intégré à l’environnement de WordPress. Cet outil est imagify.io

Cet outil en ligne propose 3 types de compression :

Le niveau Normal va utiliser des techniques de compression sans perte. La qualité des images ne sera pas dégradée. L’outil va supprimer certaines données redondantes.
le niveau Agressif va utiliser des techniques de compression avec perte tout en essayant de ne pas trop dégrader la qualité de l’image comme le mentionne Imagify sur son site.
le mode Ultra quant à lui à des réglages plus fort que le niveau Agressif afin de réduire drastiquement le poids des images. L’image perdra en qualité.

Niveau Normal – gain 5%