Table des matières
Mis à jour le
L’optimisation de la vitesse d’un site peut être une pratique complexe et technique, mais vous serez heureux d’apprendre que la solution à l’un des plus gros problèmes est en fait accessible à tous.
Le Problème avec les images
Les images sont l’une des plus grosses charges sur le temps de chargement d’une page. Même avec la mise en cache et un CDN, une image non optimisée ralentira le temps de chargement d’une page. En tant que propriétaire de site, les images sont sous votre contrôle. Si vous comprenez et mettez en place l’optimisation images, vous pourrez constater un impact conséquent sur la vitesse de votre site.
Sur la base des sites que je visite lorsque je travaille au support des cliens de WP Rocket, j’ai constaté que les images représentent en moyenne 30% du temps de chargement d’une page. C’est souvent le plus grand facteur sur l’ensemble du temps de chargement. Dans les cas extrêmes, cela peut approcher 60% du temps de chargement.
Voici un exemple de l’impact que des images non optimisées peuvent avoir sur votre site :
Le temps de chargement est de 12 secondes et le poids de la page de 8 Mo. Sur ces 8 Mo, les images comptent pour 6,7 Mo.
Le nombre de requêtes http est souvent cité comme déterminant dans le temps de chargement, et même si c’est un élément important, au bout du compte c’est le poids de la page qui est le vrai indicateur de vitesse ou de lenteur. Vous pouvez avoir un petit nombre de requêtes http, mais si ces requêtes appellent des images énormes, vous aurez toujours le même problème sur les bras.
Réduire le poids d’une page en réduisant le poids des images est une technique simple et efficace pour améliorer le temps de chargement.
Comprendre les dimensions et le poids d’un fichier
Les dimensions de l’image, c’est-à-dire l’espace que prend une image sur l’écran, sont mesurées en pixels, et même si les dimensions n’influent pas à 100% sur le poids d’un fichier, les deux sont liés. Plus les dimensions de votre image sont grandes, plus le poids du fichier est élevé.
Le poids d’un fichier est mesuré en kilo-octet (Ko) et méga-octet (Mo)
1 Mo = 1000 Ko
Pour vous donner un point de référence, la colonne principale de ce blog fait 796 pixels de large.
Si vous prenez une photo avec votre smartphone, en fonction des réglages, cette photo pourrait être aux alentours de 2500 pixels de large (parfois même plus) et un poids de fichier de 3 Mo (ou 3000 Ko). Si je prenais une photo avec mon téléphone et que je la téléchargeais sur ce blog sans aucune modification, je mettrais une photo trois fois plus grosse que la taille nécessaire pour ce blog – une perte totale de ressources et un poids supplémentaire sur le chargement de la page. Même si prendre des photos rapidement avec votre téléphone et les mettre sur votre blog semble simple et pratique, cela pose un vrai problème si vous voulez un site rapide, car cela ajoute une tonne de poids inutile.
Avant de mettre une photo en ligne vous devez faire deux choses : la redimensionner et la compresser.
Redimensionner des images
Tout d’abord, vous devez redimensionner vos images à la taille adéquate pour votre site. Pour les images de blog, trouvez la largeur de la zone de contenu, et ne mettez jamais une image plus large que cette dimension. Si l’image va être utilisée dans un slider, faites en sorte de connaître les dimensions du slider en premier.
Comment connaître la taille de votre zone de contenu ?
Si vous savez comment utiliser les outils développeurs de Chrome ou Firefox, vous pouvez les utiliser. Mais si cela vous semble trop compliqué, il existe des outils plus simples. Si vous êtes sur Mac, il y a un outil de capture d’écran déjà installé.
Quand vous tracez le contour d’une zone de l’écran, Capture vous dira combien de pixels elle fait. Cet article l’explique de manière plus détaillée.
Vous pouvez aussi installer l’addon Page Ruler pour Chrome
Une fois que vous avez déterminé les dimensions auxquelles vos images doivent être, vous pouvez utiliser n’importe lequel des outils suivant pour redimensionner vos images en conséquence :
Applications de redimensionnement
- Photoshop
- GIMP – gratuit, Windows & Mac
- Irfan View- gratuit pour Windows
- Preview for Mac – pré-installé!
- Les développeurs sur Mac peuvent aussi utiliser sips, un outil en ligne de commande
Outils de redimensionnement en ligne
- Picmonkey.com
Pixlr.com (existe aussi en version app)
Fotor.com (existe aussi en version app)
Peu importe celui que vous utilisez, il vous suffit de trouver la fonction redimensionner. Vous pourrez entrer la largeur désirée en pixels, et l’application redimensionnera l’image proportionnellement en ajustant la hauteur de l’image automatiquement.
Les formats d’images
Les images sur le web doivent être sauvegardées en .jpg, .png ou éventuellement .gif.
Le format JPEG est à utiliser pour les photos et les images en général lorsque vous n’avez pas besoin de transparence. Vous pouvez les compresser facilement et obtenir un fichier plus léger qui convient au format web.
Le format PNG générera souvent un fichier plus lourd, et ne doit donc être utilisé que dans le cas ou la transparence de l’image est requise.
Le format GIF est moins fréquemment utilisé. Il a un éventail de couleurs limité, et ne peut donc être utilisé que pour les images très simples, mais peut produire des fichiers légers.
Compresser les images
Maintenant que nous avons traité le problème de la dimension des images, attaquons nous au poids de l’image. Le but est de compresser l’image pour la rendre la plus légère et rapide à charger possible. Le but est de réduire le poids du fichier. Il n’y a pas de chiffre magique auquel tous les poids d’images devraient être, puisque cela dépend de la manière dont les images vont être utilisées. Les images utilisées dans une bannière ou un slider seront plus grosses, mais si vous en avez plusieurs, vous devriez essayer que chacune pèse 100Ko ou moins.
Les petites images qui vont être utilisées pour les miniatures, logos etc. seront bien plus légères. Par exemple, le logo en haut de ce blog pèse 3,8Ko.
Avec la compression, il peut y avoir une légère perte de qualité. Il faut donc trouver un compromis entre la qualité et le poids du fichier. Gardez toujours à l’esprit que plus le fichier sera léger, plus le temps de chargement sera rapide.
Applications
- Photoshop – assurez vous d’utiliser l’option Save For Web
- GIMP
- ImageOptim (Mac)
Outils en ligne
- Compressor.io – assurez vous d’utiliser l’option ‘lossy’ pour les plus grosses compressions
- Imagify.io – Nous avons lancé notre propre outil d’optimisation des images en ligne
Extensions WordPress
Il est préférable de redimensionner et compresser vos images avant de les mettre en ligne sur WordPress.
Toutefois, si votre site est déjà en ligne, vous devrez faire avec les images qui sont déjà en place.
Pour les images importantes comme les logos, les bannières d’en-tête et toutes celles qui chargent sur chaque page de votre site, il sera préférable d’en faire de nouvelles version comme décrit plus haut, puis d’installer l’extension Enable Media Replace. Cela vous permettra de remplacer simplement les images dans votre bibliothèque média avec les nouvelles versions optimisées, sans casser aucun lien.
Pour les autres images qui se trouvent dans votre bibliothèque média, où il serait irréalisable de toutes les remplacer individuellement, il y a quelques extensions très pratiques qui peuvent vous aider.
Notre extension pour WordPress permet d’exploiter toute la puissance de notre outil en ligne directement depuis votre administration. Vous avez accès à plusieurs niveaux d’optimisation, ainsi qu’à la possibilité de redimensionner à la volée les images envoyées pour les limiter à une hauteur et largeur définies.
Cette extension peut parcourir votre bibliothèque média et tout compresser en vrac.
Si vous faites des sites pour des clients, ou avez un site avec plusieurs utilisateurs et que vous ne pouvez pas garantir que tout le monde utilise les meilleurs méthodes pour l’optimisation des images, les extensions ci-dessous peuvent vous aider à atténuer cela.
Vous pouvez décider des réglages pour faire en sorte que si quelqu’un télécharge une énorme image, l’extension la réduira automatiquement à la taille maximum que vous aurez choisie. Plus d’images de 4000 pixels qui encombrent la bibliothèque média !
Compresser les images JPEG & PNG
Une fois mis en place, ceci utilise l’API TinyPNG pour compresser automatiquement les images au moment du téléchargement. Vous pouvez obtenir une clé API gratuite jusqu’à 500 images/mois ce qui suffit largement pour les blogueurs moyens.
Si vous avez besoin de mesurer la vitesse de votre site, ou de faire des comparaisons avant/après l’optimisation des images, vous pouvez suivre ce guide sur la manière de mesurer correctement le temps de chargement de votre site.
