fbpx
/ English
Optimisation des images sur WordPress

Optimisation des images sur WordPress : les 5 plus performantes extensions

Avant de commencer l’optimisation d’images

Il faut savoir que si vous ajoutez une image de grande dimension et que vous l’affichez en petite dimension, vous aurez quand même une performance moindre même avec ces extensions. Par exemple, si vous téléversez une image mesure 2000px par 2000px et vous l’affichez à 300px par 300px sur votre site sans la réduire avant, vous perdrez en performance. Vous pouvez demander à WordPress de la réduire avec les tailles prédéfinies ou réduisez-la avec un logiciel avant de la téléverser.

Ne pas oublier de mettre une taille maximale dans les paramètres de votre extension d’optimisation d’image pour réduire automatiquement les images plus grandes que la taille définie, la plupart le permettent.

Il existe des extensions pour ajouter des tailles dans la liste de tailles disponibles, ces extensions vont réduire et couper les images dans ces tailles. Vous pouvez également ajouter des tailles dans le fichier functions.php de votre thème.

Il est préférable de bien nommer vos fichiers avant de faire l’optimisation pour éviter les erreurs. Pour plus d’information sur les bonnes pratiques, vous pouvez lire l’article suivant : Noms de fichiers pour le Web : les bonnes pratiques.

Maintenant, voyons les nouveaux formats d’images qui rendent les sites moins lourds car ces formats sont plus optimisés que les autres et ont une perte moins significative de qualité.

Les nouveaux formats

Pour une liste complète des formats à utiliser vous pouvez lire l’article de ma collègue Émilie sur les formats à utiliser. Voici les deux plus récents formats d’image Web que vous pouvez utiliser :

WebP

WebP est un format d’image matricielle développé et mis à disposition du public par Google. Il exploite un algorithme de compression avec pertes prédictives utilisé pour les images clés du VP8 (qui est le codec vidéo du format WebM) et un conteneur léger et extensible RIFF1,2.

Google le présente comme mieux adapté que les compresseurs précédents et surtout adapté aux densités de pixels des écrans actuels (110 à 240 ppi). Par ailleurs, toujours selon Google (en 2013), 60 % des octets transmis sur la toile seraient des images, et WebP procurerait de 30 % à 80 % de réduction d’espace face à JPEG et PNG3.

Source : Wikipedia

AV1 Image File Format (AVIF)

AV1 Image File Format (AVIF) est un format de fichier approuvé en février 2019 et compressé avec AV1.

La source complète en anglais sur Wikipedia

Ce format n’est pas encore compatible sur tous les navigateurs.

Les extensions d’optimisation des images sur WordPress

Vous cherchez une bonne extension pour optimiser vos images sur votre site WordPress? Voici une liste des meilleures extensions à utiliser en 2021.

Imagify

optimisation images

Télécharger Imagify

Cette extension convertis au format WebP et remplace les balises img par des balises picture ou permet de remplacer par une réécriture d’URL ce qui peut être pratique dans certains cas car pas encore toujours compatible avec les balises picture.

Elle optimise les JPG, PNG, GIF et PDF de façon à ce que les différents média soient le plus optimisés possible et que les images se chargent le plus rapidement possible.

Vous devez avoir un compte avec Imagify. L’extension offre un forfait gratuit plus restreint que les forfaits payants qui est généralement suffisant pour un petit site Web.

Cette extension s’intègre parfaitement avec WP Rocket étant donnée qu’elles sont du même auteur.

Smush

optimisation images

Télécharger Smush

Cette extension est gratuite et vous permet d’optimiser vos images. Vous n’avez pas besoin d’un compte comme pour Imagify.

Elle offre aussi une version payante, dite « Pro ». Cette version vous permet d’optimiser des PNG et de les convertir en JPG (les PNG sont parfois plus lourds que les JPG). Vous pouvez convertir au format WebP avec la version Pro seulement.

La version gratuite vous permet d’optimiser 50 images à la fois. La version Pro permet de faire tous les médias d’un seul coup. Donc, si vous avez beaucoup de médias, vous pourrez lancer l’optimisation et faire autre chose. Avec la version gratuite, vous devrez cliquer sur le bouton Resume pour reprendre après 50 fichier optimisés.

Notre tutoriel vidéo sur l’installation de Smush :

ShortPixel Image Optimizer

optimisation images

Télécharger ShortPixel Image Optimizer

Cette extension est un peu comme Imagify, elle comporte un compte/forfait gratuit dont vous avez besoins pour utiliser l’extension et des forfaits payants avec moins de restrictions que le compte gratuit.

Vous pouvez optimiser les JPG, PNG, GIF et PDF comme toutes les autres extensions. Il est possible de convertir en WebP et AVIF. Elle semble être la seule extension de ma liste à déjà autoriser les AVIF. AVIF est un format de fichier comme WebP qui rends les images moins lourdes et sans perte de qualité. Attention! Ce n’est pas tous les navigateurs qui sont capable de lire les AVIF pour le moment.

EWWW Image Optimizer

optimisation images

Télécharger EWWW Image Optimizer

Cette extension fait sensiblement la même chose que les précédentes avec une version gratuite et des forfaits payants avec plusieurs type d’abonnement. La version gratuite n’a pas besoin d’abonnement comme pour Smush.

Vous pouvez optimiser de manière similaire autres extensions.

reSmush.it

optimisation images

Télécharger reSmush.it

C’est une extension gratuite un peu comme Smush et qui fonctionne très bien pour une extension gratuite. Elle ne permet pas encore les images WebP. Je pense que c’estprévus dans une prochaine version.

Bonus

Jetpack

optimisation images

Télécharge Jetpack

Peut-être que je m’avance en disant que cette extension n’est plus à présenter tellement qu’elle est installée et utilisée! C’est une extension « couteau suisse » avec plusieurs modules que vous pouvez activer selon vos besoins. Dans le cas présent, c’est le module Site Accelerator (anciennement « Photon ») qui sert pour l’optimisation d’images. Cette extension n’est pas spécialement fait pour l’optimisation des images donc je ne l’ai pas mis dans la liste ci-haut. Elle est incluse avec les sites Web hébergés au WordPress.com. Cependant, ce n’est pas le cas avec les sites Web auto-héberger avec le logiciel de WordPress.org. Vous devez donc l’installer et y connecter un compte WordPress.com.

Vous disposez également d’un CDN gratuit avec cette extension pour y déposer vos images, ce qui va améliorer les performances de votre site. Elle peut convertir les images au format WebP.

En terminant

Vous devriez privilégier les extensions qui convertissent en WebP. À part reSmush.it, toutes les extensions de ma liste le permettent au moins dans leur version payante. Évitez pour le moment de mettre vos images en AVIF pour une meilleur compatibilité car ce format n’est pas pris en compte par tous les navigateurs à l’heure actuelle. C’est le format du futur, donc vous pouvez anticiper et choisir une extension qui le permet ou qui le permettra bientôt. Au moment d’écrire ces lignes, WordPress vient tout juste d’ajouter la compatibilité WebP dans la version 5.8.1.

Auteur de l'article

Vincent Gaudreau

Programmeur Web
Son intérêt marqué pour l’informatique et les nouvelles technologies s’est déclaré très tôt chez Vincent. Dès sa jeune adolescence, en fait, et ce grâce à un grand frère qui étudiait l’infographie. C’est ainsi qu’il découvre l’objet de ses futures aspirations : un ordinateur. La curiosité bien aiguisée, il s’est empressé de partir à la découverte de diverses branches connexes, toutes ayant forgé le programmeur Web qu’il est devenu, diplômé depuis 2004 de l’Institut Supérieur en Informatique.

À découvrir sur notre blogue

2021-09-21

Smush : comment configurer l’extension de compression d’images sur un site WordPress ?

Davyd Quintal / Directeur des solutions novatrices

Cette semaine je vous montre comment installer et configurer l’extension Smush sur votre site WordPress.

Lire la suite
2021-03-21

Images Web : quels sont les formats à utiliser ?

Émilie Demers Moreau / Designer graphique

Les images sont au cœur de la création de votre site Web. Effectivement, ils contribuent à l’établissement de votre image de marque.

Lire la suite
2021-06-01

Refonte d’un site Web : à quels moments est-ce une bonne idée de la faire ?

Émilie Demers Moreau / Designer graphique

La refonte est une étape nécessaire dans la vie de votre site Web pour que celui-ci continue à servir vos objectifs de développement.

Lire la suite
2020-02-18

Pourquoi créer mon site avec WordPress ?

Émilie Demers Moreau / Designer graphique

Les avantages de créer un site avec la plateforme open-source WordPress sont nombreux. Nous vous expliquons pourquoi!

Lire la suite

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.