C’est une question qui revient souvent : quelle est l’utilité d’optimiser les images sur WordPress et comment faire ? Nous allons tester plusieurs cas de figure afin de bien comprendre les optimisations d’images et ses outils. Mais tout d’abord :
Quels sont les formats d’image sur WordPress ?
Les différentes tailles d’images
WordPress génèr(ait) automatiquement 3 tailles d’images pour chaque image uploadée :
- une miniature : 150px X 150px
- une medium : 300px X 300px
- une large : 1024px X 1024px
On trouve ces réglages dans « réglages » –> « Medias ». Seule l’image « miniature » est carrée. Elle est recadrée au centre de l’image. À l’inverse, les images « medium » et « large » ne sont pas « recadrées ». C’est à dire que ces valeurs sont des maximums en hauteur et/ou largeur selon la disposition de l’image d’origine. Le ratio de l’image est donc conservé.
Une image au format paysage restera sous ce format en « medium » et « large » alors que la miniature sera carrée. Selon les thémes, il est courant de trouver des formats d’image supplémentaires.
Sauf que si l’on regarde le FTP, nous verrons qu’il y a d’autres formats intermédiaire également générés.
La compression de WordPress des images
De plus, lorsque WordPress génère ces images, il compresse les images pour les optimiser. Mais pour être plus précis, cela ne fonctionne que sur des formats qui le supportent bien. Par exemple, le format PNG est un format qui ne se compresse que trés peu. C’est pour cela qu’il n’est pas recommandé de l’utiliser. Les images en PNG sont en général bien plus lourdes qu’en jpg. Ce format est traditionnellement utilisé pour les icônes.
Donc de manière native WordPress optimise les images, mais est-ce suffisant ? Tout d’abord, voyons comment les utiliser.
Quelle taille d’image à insérer dans des pages ou articles WordPress ?
Que l’on utilise Gutemberg, Divi, Elementor ou tout autre builder, lorsque l’on insère une image, il faut choisir le format le plus adapté. Insérer une image dans sa taille large (1024px) dans une colonne qui fait 300px de large n’est donc pas optimisé. Il faut alors choisir la taille « medium ». L’image aura une dimension adaptée, avec un poids limité. C’est de cette manière que le poids de la page est optimisé et que l’on gagne en performances.
Quel poids d’image est recommandé pour un site WordPress ?
En règle générale, on peut considérer qu’une image ne doit pas dépasser les 300ko sur un site web.
Est-ce suffisant ? C’est un bon point de départ, mais on cela peut etre optimisé davantage. Faisons un test avec une image d’un appareil photo que l’on souhaite insérer dans son article.
L’image originale fait 4032px par 3024px et pèse 4.3Mo.
Voyons les différents formats générés par WordPress.
Quel est le poids des images générées par WordPress ?
Notre téléchargement d’image basique a automatiquement créé 8 images :
- L’image d’origine : P1019118.jpg (voir l’image) pour 4.3Mo
- La miniature : P1019118-150×150.jpg (voir l’image) pour 48Ko
- La taille moyenne : P1019118-300×225.jpg (voir l’image) pour 56Ko
- La grande : P1019118-1024×768.jpg (voir l’image) pour 116Ko
Mais également :
- P1019118-scaled.jpg (voir l’image) pour 348Ko
- P1019118-1536×1152.jpg (voir l’image) pour 180ko
- P1019118-2048×1536.jpg (voir l’image) pour 256Ko
- P1019118-768×576.jpg (voir l’image) pour 92Ko
Nous avons donc un total de 8 images pour un poids total de 5.4Mo. Si on compare le poids des images générées par WordPress avec l’orginale, on ne depasse que de peu les 300ko, et cela n’est que sur l’image « scaled ». Cette image est en fait celle qui sera utilisée si vous choisissez la taille d’ « origine ». WordPress n’affichera pas l’image que vous avez téléchargé car elle est bien trop lourde et grande pour la majorité des écrans.
Doit-on optimiser les images avant de les uploader sur WordPress ?
Dans bien des cas, une image n’a pas vocation à être visualisée en plein écran. Une image qui sert uniquement d’illustration dans un bloc de 600px de large, par exemple, devrait être optimisée en amont et insérée directement à la bonne taille. Cela présente 2 avantages
- la compression WordPress est certe présente mais pas forcément optimale. À qualité identique, le poids peut etre optimisé.
- en téléchargeant directement l’image à la bonne dimension, on évite les multiples format et surtout on évite de stocker sur l’hébergement une image de 4Mo qui ne sera jamais visualisée.
Bien des outils existent pour optimiser et redimensionner des images sur votre ordinateur. Une simple recherche Google vous en donnera toute une liste.
Nous prenons la même image, mais nous allons l’optimiser avant de la télécharger dans la médiathèque WordPress de la manière suivante :
- dimension : 762px * 572px
- compression : 60
- suppression des metadata
- Poids en sortie : 56ko
–> La premiere constatation est que notre optimisation (et encore, on aurait pu compresser un peu plus) est plus légère que celle de WordPress : P1019118-768×576.jpg (voir l’image) pour 92Ko
Et coté serveur nous n’avons plus que 3 images :
- P1019118_optim-150×150.jpg pour 8ko (40ko précédemment)
- P1019118_optim-300×225.jpg pour 16ko (56ko précédemment)
- P1019118_optim.jpg pour 56ko
Total : 80ko (5.4Mo précédemment)
Il est donc trés important d’optimiser dès le départ les images qui sont mises en ligne. Cela permet d’une part un gain de poids sur la page, mais aussi au niveau hébergement. Si vous téléchargez systématiquement des images en provenance de votre téléphone ou de votre appareil photo, le poids de votre WordPress sera décuplé inutilement.
Les plugin d’optimisation en ligne des images pour WordPress
Si jamais l’optimisation en amont n’est pas votre fort, vous pouvez toujours utiliser des plugins d’optimisation en ligne. Non seulement ils vont optimiser mes images mieux que WordPress, mais en plus ils proposeront de convertir vos images en formats plus récents et plus légers tels que Webp ou Avif.
Ceci dit, vous pouvez dans tous les cas continuer à importer vos images optimisées. D’une part le plugin aura moins de travail lors de la compression et d’autres part, comme nous l’avons vu plus haut, vous éviterez de surcharger inutilement votre hébergement WordPress.
Par contre, par défaut, ces plugins ne supprimeront pas les images non optimisées, risquant de faire encore grandir votre espace disque. Ce n’est pas une solution miracle non plus.
Certains plugins sont gratuits, d’autres payants, certains le font en ligne, d’autre non etc. Nous ne ferons pas de comparatif aujourd’hui mais en voici quelques-uns :
- Imagify : plugin développé par les créateurs de Wp-rocket.
- Smush : plugin développé par WPMU Dev autre grande équipe de plugins reconnus
- EWWW Image Optimizer
- ShortPixel
- etc.
Conclusion
À la question : « Faut-il optimiser les images avant de les télécharger sur WordPress ? », la réponse est : OUI. Nous l’avons vu, si WordPress optimise les images automatiquement, son optimisation n’est pas au maximum de ce qu’il est possible de faire.
De plus, importer des images en sortie d’appareil photo ou de téléphone fera exploser inutilement la taille de votre répertoire /wp-content/uploads. Et les plugins améliorent le front, mais pensez que les images stockées augmenteront. Sur des boutiques en lignes ou des sites volumineux, il faudra le prendre en compte.