#1 Compression
La première chose à laquelle nous pensons quand on évoque l’optimisation des images est la compression. Il s’agit d’un moyen très simple de réduire la taille d’une image sans pour autant lui faire perdre en qualité. Pour y procéder il suffit d’utiliser un outil d’édition d’images comme Adobe Photoshop, On1 Photo, GIMP, Affinity Photo, etc. Tous sont dotés de fonctions de compression d’images intégrées.
Si vous ne souhaitez pas encombrer votre ordinateur en y installant un logiciel qui prend beaucoup d’espace, vous pouvez compresser vos images moyennant un outil web comme TinyPNG ou JPEG mini.
Afin d’aider leurs utilisateurs à optimiser leurs performances web, certains CMS tels que WordPress proposent eux-mêmes des plugins qui favorisent la compression automatiques des images lorsqu’elles sont uploadées pour la première fois.
#2 Choisir le bon format
Avant d’optimiser vos images pour le web, vous devez tout d’abord vous assurez qu’elles correspondent au bon format.
A ce jour, nous distinguons trois formats d’images distincts :
#1 JPEG
Les images en format JPEG correspondent le plus souvent à des photos ou des captures d’écran. Pour leur optimisation, vous pouvez les compresser ou jouer manuellement avec la paramètres de qualité afin d’obtenir le rapport idéal entre qualité et taille du fichier.
#2 PNG
Le format préféré des designers. C’est avec lui que sont conçus les logos et autres visuels nécessitant un effort artistique. Délivrant des images de très bonne qualité, celles-ci sont souvent volumineuses. Il est donc peu recommandable de les utiliser à outrance si l’on souhaite garder notre vitesse de chargement intact.
#3 GIF
Les Gifs sont des images animées. Généralement elles sont mobilisées pour ajouter du contenu interactif à un site. Là encore, à cause de leur grande taille, leur usage n’est conseillé que quand il s’agit d’une petite animation.
#3 Réduire les pixels
Moins une image contient de pixels, plus sa taille est petite. Donc, réduire le nombre de pixels apparaît comme une solution idéale pour optimiser ses images pour le web. Néanmoins, il ne faut pas abuser de cette démarche, au risque de réduire massivement la qualité d’une image une fois téléchargées sur le web.
Par conséquent, vous pouvez redimensionner les images en fonction de la taille d’affichage du site sur lequel elles vont être postées. Le redimensionnement élimine les pixels inutiles et réduit considérablement la taille des fichiers.
#4 Diminuer les paramètres de qualité
En traitant une image à l'aide d'un logiciel dédié, vous avez accès à un curseur qui vous donne la possibilité de contrôler la qualité de celle-ci sur une échelle de 1 à 100 (100 étant la qualité originale/maximale). Ainsi, vous contrôlez vous-même la quantité de données d'image à sacrifier pour minimiser la taille du fichier.
Si vos images sont au format JPEG, vous constaterez qu'il n'y a pas beaucoup de différence de qualité entre une image enregistrée à 100% de qualité, 60%, ou même 30%. Quoi qu'il en soit, l'image de résolution moyenne est le meilleur choix, quel que soit le format.
Pour une meilleure optimisation, vous pouvez trier les images en fonction de leur utilisation. L'idéal est de conserver la taille maximale de celles que vous utilisez à des fins commerciales (page d'accueil, page de renvoi, etc.), et de réduire la taille des autres ou de les compresser.
#5 Héberger les images sur un CDN
Les CDN (Content Delivery Network), sont des réseaux situés dans le monde entier, dotés de serveurs web très puissants. Leur fonction principale est de charger les fichiers de votre site pour le visiteur en passant par le serveur qui lui est le plus proche géographiquement parlant.
Par exemple, si un visiteur d’Amérique du Nord arrive sur votre site, le CDN que vous utilisez lui affichera les images en partant du serveur qui est le plus proche de lui, au lieu de passer par un autre situé en Europe. De la sorte votre site gagne en rapidité de chargement. Cette technologie est derrière le succès de firmes internationales telles que Netflix !
Héberger vos images sur un CDN est un très bon moyen d’optimisation, puisqu’elles s’affichent plus rapidement sans pour autant que vous ayez à diminuer leur qualité ou à les compresser.
Si vous utilisez WordPress, sachez qu’il existe un large panel de plugins qui vous permettent de connecter votre CDN à votre site. Parmi eux, nous retrouvons WP Rocket, CDN Enabler, etc.
Conclusion
Pour récapituler, afin d’améliorer la qualité de votre site il vous est nécessaire de recourir à des images de très haute qualité. Néanmoins, la taille de ces dernières peut remarquablement ralentir votre vitesse de chargement et impacter négativement vos performances.
La résolution de cette problématique passe par les étapes que l’on vous explique dans cet article et parmi lesquelles vous avez le choix.
