Vous êtes nombreux à me demander comment optimiser les images de votre site. Je viens de mettre à jour l’article sur les banques d’images gratuites, alors, en toute logique, je poursuis avec le sujet Comment optimiser une image pour le web ?
C’est-à-dire optimiser leur poids pour qu’elles ne ralentissent pas le chargement de votre site.
C’est important pour ne pas faire attendre vos visiteurs, et aussi parce que la vitesse de chargement de votre site est un critère essentiel pour Google. Si votre site met du temps à charger, cela pénalisera votre référencement.
Dans l’article publié récemment dans lequel je vous donne 10 conseils pour rédiger des contenus au top pour le référencement de votre site, les images sont en point 8. On passe au concret, je commence par vous détailler un peu pourquoi optimiser les images pour votre site est important, puis comment les optimiser concrètement, et pour finir en beauté, cerise sur le gâteau, une solution magique qui le fait toute seule 🙂
Comprendre l’optimisation des images pour votre site
Je commence par les basiques, pour que vous connaissiez les grandes lignes et que vous compreniez pourquoi l’optimisation des images pour votre site est indispensable.
La taille
Si vous affichez une image sur un écran, elle sera affichée en basse définition (c’est-à-dire avec peu de pixels par millimètre) et d’une taille plutôt réduite, d’environ 2000 pixels de large, 5000 pixels grand maximum.
Il est donc totalement inutile d’envoyer sur votre site des images plus grandes.
De toute façon, l’affichage sera limité par l’écran de vos visiteurs. Si vous envoyez une image de la taille d’une affiche, en haute résolution, pour l’impression par exemple, le résultat sera le même pour l’internaute… sauf qu’elle mettra beaucoup plus de temps à charger.
Le poids
Et oui, car plus une image est grande et plus sa définition est élevée, plus elle pèse lourd.
C’est tout l’enjeu de l’optimisation des images pour le web.
Il est donc question de réduire la taille et la résolution des images pour qu’elles puissent se charger rapidement, sans les dégrader trop fortement bien sûr.
Le format
Pour finir, le format de l’image et à considérer aussi. Pas besoin de compétences techniques, voici le choix simple :
- JPG / JPEG : pour les photos (paysages, portraits…)
- PNG : pour les images avec transparence
- WebP : le plus optimisé
Si vous ne savez pas, restez en JPG pour les photos.
Comment optimiser vos images sans Photoshop
Si vous avez Photoshop, il y a peu de chances que vous vous posiez la question, puisqu’il propose une fonction native d’optimisation pour le web.
L’objectif est donc de convertir vos images en basse définition (72 dpi) et d’en réduire la taille (disons 20O0px de coté maximum). Pour cela, vous pouvez utiliser des outils en ligne :
- Squoosh (très efficace, gratuit, super facile)
- TinyPNG / TinyJPG
- Compressor.io
Le principe est simple : vous envoyez votre image originale à un de ces outils, il l’optimise et vous la renvoie prête à l’utilisation pour le web.
2 précautions pour le référencement de vos images
Avant de charger l’image sur votre site
Prenez soin de vérifier que votre image a un nom qui la décrit. Évitez les noms de fichier comme image01.jpg ou IMG123456789.jpg ; préférez un nom de fichier descriptif, sans accent ni espace, par exemple :
optimiser-image-web.jpg
Une fois l’image chargée
Pensez à renseigner le champ Titre et le champ Texte alternatif. Vous pouvez indiquer la même chose dans les trois (nom du fichier, titre et texte alternatif).
Et voilà, il ne reste plus qu’à insérer l’image dans votre page ou votre article.
La solution magique pour optimiser les images de votre site
Vous êtes sous WordPress, et comme vous l’avez peut-être remarqué, à chaque fois que vous déposez une image dans votre médiathèque, WordPress génère automatiquement 3 tailles : petite, moyenne et grande. Et il conserve également la taille originale.
L’idée ici est de configurer WordPress pour qu’il optimise les images que vous lui envoyez, tout seul, sans que vous ayez à y prêter attention. Cela se fait en 2 étapes :
1. Régler la taille des images dans WordPress
Pour commencer, vous pouvez régler la taille des images que WordPress génère.
Pour cela, allez dans Réglages > Médias et fixez la taille, avec par exemple une grande taille de 1600 pixels. Cela vous évitera d’afficher des images énormes, mais ce n’est pas suffisant pour une optimisation web vraiment performante.
2. Optimiser les images dans WordPress
Pour une optimisation vraiment au top, vous pouvez ajouter un plugin dédié.
Celui-ci va se charger d’optimiser les images comme vous auriez pu le faire avec un outil en ligne, sauf qu’il le fera automatiquement dès que vous les enverrez une image dans la médiathèque.
Voici 3 plugins très efficaces :
- Imagify : Plugin ultra simple, avec de bons niveaux de compression et la possibilité de convertir vos images en WebP. Excellent rapport qualité/poids.
- Smush : Ce plugin vous permet d’optimiser vos images en 1 clic, avec une compression automatique et une fonction de lazy loading intégrée.
- ShortPixel : Un plugin très puissant qui permet également de convertir vos images au format WebP, avec un excellent taux de compression.
Ensuite, pensez toujours aux 2 précautions pour le référencement :
- Nommez vos fichiers image avec un nom descriptif, avant de les charger dans WordPress.
- Renseignez le Titre et le champ Texte alternatif après les avoir importées.
Voilà, n’hésitez pas à le dire en commentaire si quelque chose n’est pas clair ou si vous utilisez une autre solution qui pourrait être utile à d’autres.
Crédit photo : Unspash
Photographe : Zheng XUE
