Avant de rentrer dans le vif du sujet, savez-vous pourquoi est-il important d’optimiser les images d’un site WordPress ? … Non ?
L’équation est relativement simple. Plus un site est lourd, plus il est lent à charger. Plus il est lent à charger, plus vos visiteurs s’en iront rapidement. Ajoutez à cela que 60 à 65% du poids d’un site provient de ses images (source google 2013) et vous comprendrez pourquoi vous devez absolument travailler vos photos.
Étape 1: Bien nommez son image
Houlà, tu nous parles de poids et de vitesse alors qu’est-ce que le nom d’une image a à voir la-dedans ?
Le poids n’est pas tout dans la vie d’une image. Même s’il représente une part non négligeable, il y a d’autres aspects à prendre en compte pour une optimisation aux petits oignons comme l’accessibilité et le référencement.
Car oui, vos photos peuvent vous aider à vous référencer mais faut-il avoir respecté quelques règles:
- Pas de chiffres et autres suites de lettres dans le titre de votre image. Décrivez-la en 2 ou 3 mots
- Remplissez la balise “alt” aussi appelée “texte alternatif”. Comme pour le titre de votre image, une simple suite de mot décrivant le visuel suffit.
- Pensez à placer 1 mot-clé dans le titre et la balise Alt, de préférence le même. Votre SEO vous dira merci.
Étape 2 : Choisir le bon format
Vous allez me dire: “une image, c’est une image. Ça n’a pas vraiment d’importance”. C’est là que vous vous trompez. Plus une image est grande, plus elle est lourde. Et comme on l’a vu plus haut, plus votre site est lourd, plus il sera lent à charger.
1/ Une taille adaptée au web
Prenons l’image ci-dessous que j’ai trouvée dans une banque d’images.
Telle que je l’ai récupérée initialement, elle pesait 2,14 Mo et mesurait 3456 x 3456 pixels. Moi, je n’ai pas besoin d’une telle taille vu que je ne compte pas la faire imprimer. Pour illustrer mon article, il faut qu’elle fasse 500 pixels de large.
Comment je connais ces infos-là ? Il suffit de faire un clic droit sur une image que vous avez téléchargée et d’aller dans “propriétés”. Dans l’onglet “général”, vous trouverez son poids et dans l’onglet “détails”, sa taille.
Donc revenons à notre photo… Après un recadrage au bon format, elle ne pèse plus à présent que 50,9 Ko pour 500 x 500 pixels.
À savoir : en dehors des écrans Retina, la taille recommandée maximum d’une image est de 1200 pixels. Avec cette largeur, vous couvrez l’intégralité de votre écran sans perte de qualité.
2/ Une extension pour chaque type d’image
. jpg, . jpeg, . png, .gif et la petite dernière .webp, voilà ce que l’on appelle une extension d’image. S’il y a plusieurs types d’extensions, ce n’est pas anodin, c’est qu’elles ont chacune leur spécificité.
.jpg ou .jpeg : on l’utilise pour les images ou les photos standards. C’est la plus courante. Il faut juste éviter d’écraser trop souvent vos photos car plus on les écrase, plus elles perdent en qualité. L’idéal est de faire une copie de l’originale et d’écraser cette copie.
.png : ce format est spécialement adapté aux images ayant des zones transparentes. C’est la seule extensions qui les prennent en charge.
.gif : tout le monde sait ce qu’est un gif animé, n’est-ce pas ? Cette appellation ne doit rien au hasard car le format .gif est réservé aux images animées. Si vous nommez votre gif en .jpeg, vous aurez une image mais pas d’animation. Faites l’essai, vous verrez 😉
.webp : l’extension la plus récente, créée par Google pour pallier au poids toujours grandissant des images. A ce jour, c’est l’extension la plus légère qui existe pour le web et qui soit supportée par tous les navigateurs.
À savoir : Photoshop propose un plugin complémentaire pour pouvoir enregistrer directement vos photos en .webp. Pour ceux qui n’ont pas Photoshop, il reste toujours la solution des plugins WordPress dédiés à cette tâche.
Étape 3 : Compresser ses images
Avec ou sans le format .webp, compresser ses images est indispensable. Cela permet d’alléger le poids de votre site de manière non négligeable. Fort heureusement, la sphère WordPress propose plusieurs plugins gratuits et/ou payants qui font parfaitement le taff.
Les plus représentatifs sont tous des freemiums, c’est à dire que vous pouvez les utiliser gratuitement jusqu’à un certain seuil puis passer à une version payante (généralement plus complète) si besoin:
- Shortpixel Image Optimizer par ShortPixel: 100 images par mois en version gratuite
- Imagify par WP Media: 20 mb par mois (environ 200 images) en version gratuite
- Smush par WPMU Dev : 50 images à la fois en version gratuite. Par exemple, si vous avez 75 images à traiter, il faudra simplement faire 2 passages (1×50 et 1×25).
Étape 4 : Mettre en place le “Lazy load”
Sous ce nom barbare comme on dit chez nous, se cache en fait un système de chargement intelligent de l’image.
Je vous ai perdu ? … Oui … Non … Pas de panique, j’explique !
En temps normal lorsque vous arrivez sur la page d’un site web, le navigateur affiche tout le contenu (images comprises) qu’il soit visible à l’écran ou pas. En terme de vitesse de chargement, on fait mieux parce qu’entre nous, à quoi ça sert de charger des images si elles ne sont pas à l’écran ?
C’est là que le Lazy load entre en action.
Cette fonctionnalité “oblige” les navigateurs à ne charger une image que lorsqu’elle apparaît au-dessus de la ligne de flottaison du site (c’est-à-dire lorsqu’elle apparaît à l’écran). Du coup, les images sont chargées au fur et à mesure que vous scrollez sur la page que vous visitez.
Résultat, votre site est plus rapide et plus léger.
En fin de compte
Si vous avez bien tout suivi, vous savez à présent que si vous affichez une image sans la travailler, eh bien, c’est le mal ! Avec un soupçon de technique et de bon sens ou à l’aide de quelques plugins, vous arriverez à alléger vos photos pour optimiser au mieux votre site WordPress.