Optimole le plugin d’optimisation d’images WordPress tout-en-un

Connaissez-vous Optimole, LA solution tout-en-un pour l’optimisation des images pour WordPress ?

Non ?

Eh bien, il s’agit de l’extension WordPress que j’utilise pour l’optimisation des images après leur import sur le site.

À ce sujet, je fais un petit aparté pour vous rappeler qu’il est essentiel d’optimiser les images d’un site. Car elles sont lourdes et peuvent représenter jusqu’à 30 à 85 % du temps de chargement total de la page. C’est la raison pour laquelle, il vous faut les optimiser non seulement avant leur importation, mais aussi pendant leur chargement.

Ceci étant fait, vous vous demandez sûrement pourquoi j’ai choisi Optimole et non pas Smush, Imagify, ShortPixel, ou un autre.

C’est très simple. Tout d’abord, comme vous, j’ai lu les articles qui prônent soi-disant les meilleures extensions d’optimisation d’images. J’ai également recherché dans le répertoire des extensions WordPress ceux qui contenaient à peu près les fonctionnalités que je souhaitais.

Ensuite, je les ai testé un par un pour les comparer.

Et c’est comme ça que j’ai enfin déniché celle qui correspondait à mes besoins : Optimole, l’optimisation d’images tout-en-un.

Vous êtes curieux de connaître ses avantages ?

Alors, fin du suspense, c’est parti pour la découverte d’Optimole…

Les avantages d’Optimole pour optimiser les images

Pour commencer, il faut savoir que la version gratuite d’Optimole permet d‘optimiser un nombre illimité d’images dans la limite de 5 000 visites par mois.

Ensuite, il convient de noter qu’elle est compatible avec les constructeurs de pages populaires tels que Elementor, Beaver Builder, Gutenberg…

Mais, le gros avantage d’Optimole est que tout se fait automatiquement, sans délai et sans charge supplémentaire pour votre serveur.

En effet, Optimole traite les images en temps réel et est entièrement basé sur le cloud. C’est donc un gain de performance non négligeable puisqu’il ne sollicitera aucunement votre serveur.

En plus, les images sont servies directement depuis un CDN et non depuis le serveur principal. Cela réduira les temps de chargement et l’utilisation de la bande passante.

Enfin, contrairement à d’autres extensions d’optimisation d’images, les images ne sont pas remplacées définitivement dans la médiathèque. C’est-à dire que vous gardez les images originales que vous avez téléversées dans vos médias.

Globalement, voici le récapitulatif des fonctionnalités qu’offre Optimole :

• Compression
• Mise à l’échelle automatique selon l’appareil, le navigateur et la taille de l’écran du visiteur
• Chargement différé (lazy loading) sans chargement de jQuery ou JavaScript
• Recadrage
• Choix de l’optimisation sans perte ou avec perte
• Format Retina pris en charge
• Format WebP automatique pour les navigateurs qui le prennent en charge sinon format d’origine
• Possibilité d’ajout de filigranes aux images
• CDN CloudFront à partir de 200 emplacements
• Bande passante illimitée
• Statistiques d’optimisation (espace disque et bande passante)
• Assistance par mail sous 48 heures

Vous êtes conquis ? Alors, passons tout de suite à l’installation d’Optimole.

Installation et paramétrage d’Optimole pour l’optimisation des images

Installation et connexion d’Optimole

En premier lieu, installez et activez l‘extension via Extensions/ajouter en renseignant “optimole” en mot-clé.

Aussitôt après l’activation, une fenêtre surgit pour renseigner la clé API d’optimole.com afin d’avoir accès au service gratuit d’optimisation d’image.

Ici, deux solutions s’offrent à vous.

Soit vous avez dejà créé un compte sur Optimole. En ce cas, renseignez la clé API après avoir cliqué sur “I already have an API key”.

Soit, vous n’en possédez pas. Alors, créez-en un pour recevoir votre clé API par mail en cliquant sur “Register & Email API key”.

Après avoir indiqué votre clé API, il ne vous reste plus qu’à cliquer sur “Connect to Optimole Service”.

Optimole se met immédiatement au travail, scanne les images que comporte votre site et recherche les éventuelles sources de conflit.

Si vous utilisez Elementor, il peut y avoir un conflit, alors Optimole vous le signalera.

Pour régler le problème, allez dans Elementor/outils et synchronisez la librairie. Ensuite, revenez dans les paramètres d’Optimole et cliquez sur “I’ve done this” et l’avertissement disparaîtra.

Après cela, l’optimisation des images se fera instantanément.

Réglages des paramètres d’Optimole

De prime abord, vous pouvez laisser ceux par défaut et Optimole fonctionnera très bien comme cela. Mais, je vous conseille de faire des réglages avancés.

Alors, passons sans délai aux paramétrages disponibles dans les différents onglets.

Pour info, vous pouvez retrouver les paramètres d’Optimole en allant soit dans médias/Optimole ou dans la liste des extensions installées/Optimole/settings.

⚠️ Petit rappel : Lorsque vous apportez des modifications, n’oubliez pas de cliquer sur le bouton “Save changes”.😉

General

À l’onglet “general”, laissez les deux premiers paramètres par défaut activés.

Enable image remplacement est essentiel pour que les images optimisées via Optimole puissent s’afficher. Ne le décochez pas, sinon ce seront les images non optimisées situées dans vos médias qui se chargeront.

Scale images & Lazy load sert à activer le chargement différé des images sans utiliser JavaScript ainsi qu’à mettre les images à l’échelle en fonction de la taille de l’écran et de l’appareil du visiteur. Idem, ne le décochez pas non plus.

Enable error diagnosis tool permet d’afficher Optimole Debugger, l’outil de dépannage intégré d’Optimole. Après avoir activé cette option, Optimole Debugger apparaîtra dans la barre d’administration lors de la prévisualisation du site Web. Ensuite, il vous suffira de cliquer dessus pour dépanner la page.

Enfin, Clear cached resources, vous servira pour vider le cache des images si elles ne s’affichent pas correctement

Passons maintenant aux paramétrages avancés, c’est-à-dire, ceux situés sous “Advanced”.

Compression

C’est ici que vous affinerez les paramètres pour la compression.

Enable network based optimizations permet, lorsque votre visiteur dispose d’une connexion Internet de mauvaise qualité, d’accélérer le chargement de vos images en utilisant la compression avec perte.

Serve CSS & JS through Optimole est utile à activer si vous avez des images qui sont incluses dans les fichiers CSS et JS (ce qui peut être le cas avec Elementor). Néanmoins, si cela bugue, il faudra soit le désactiver ou voir dans votre plugin de cache ou d’optimisation s’il n’y a pas un conflit.

Enable Gif to Video conversion est indispensable si vous utilisez pas mal de GIF sur votre site afin qu’ils soient convertis automatiquement au format MP4 ou WebM (formats plus légers).

Et enfin, avec Image quality, vous avez la possibilité de choisir le niveau de compression que vous désirez (High, Medium et Low).

💡 Petit truc sympa : lorsque vous modifiez la compression, vous pouvez tester en direct l’impact sur vos images avec une des images aléatoires située sur votre site simplement en cliquant sur “view sample image”.

Resize

Sous cet onglet, vous pouvez personnaliser le redimensionnement des images.

Enable smart cropping est une fonctionnalité basée sur l’IA qui détermine la partie la plus intéressante d’une image pour la recadrer. À vous de tester si ça vous convient ou pas.

Enable Retina images garantit que vos images s’affichent bien sur les écrans Retina en doublant le nombre de pixels. Autant l’activer, on ne sait jamais sur quel appareil sera affiché votre site.

⚠️ Vous devez également activer le lazyload pour que les images soient optimisées pour les écrans Retina.

Resize large images original sources redimensionne automatiquement les images que vous avez téléversées dans une trop grande taille. Activez la fonction.

Lazyload

Ici, vous pouvez paramétrer tout ce qui concerne le chargement différé des images.

Enable generic lazyoad placeholder permet de servir au visiteur un espace réservé générique transparent au lieu de la version floue de l’image dans l’attente de son chargement complet.

Exclude first <number> of images from lazyload est une fonction très intéressante, car elle permet d’indiquer le nombre d’images que vous souhaitez exclure du chargement différé au début de chaque page. Cela peut être utile pour exclure le logo et l’image du héro, par exemple.

Use native lazyload, en activant cette fonction, vous utiliserez le lazyload qui est pris en charge par le navigateur lui-même au lieu de celui d’Optimole.

Vous reviendrez donc au lazyload natif embarqué par WordPress depuis sa version 5.5. Celui-ci ajoute simplement un attribut loading=”lazy” aux images. Le chargement différé sera alors actif seulement sur les images qui ont un format de balise approprié, c’est-à-dire, pas toutes les images et il n’y aura pas de redimensionnement des images, je vous déconseille de le cocher.

Scale images est une option qui mettra les images à l’échelle en fonction de la taille de l’écran des visiteurs. Activez-la.

Enable lazyload for background images permet le chargement en différé des images d’arrière-plan, ce qui n’existe pas par défaut. Pensez à l’activer.

Enable lazyload for embedded videos and iframes est à activer également. Cela garantira que votre contenu (texte) se charge tout de suite et les vidéos en différé.

Lazyload background for selectors sert à ajouter des sélecteurs CSS particuliers afin d’activer le lazy load pour certaines images d’arrière-plan.

Par exemple, si vous avez des images d’arrière-plan avec la class mon_image, ajoutez le sélecteur CSS .mon_image. Pour prendre un autre exemple, si votre image d’arrière-plan est contenue dans un id comme mon_id, ajoutez le sélecteur : #mon_id.

Exclusions

Comme son nom l’indique, ici, vous pouvez exclure facilement des images de l’optimisation ou du chargement différé.

Don’t optimize images if est la solution pour désactiver l’optimisation d’Optimole pour :

• Des pages individuelles
• Certaines images
• Ou des types d’images spécifiques

Il suffit pour cela d’indiquer :

• Le nom du fichier, par exemple : le fichier contient “_logo”
• L’extension, par exemple : “SVG”
• Ou encore l’URL de la page

Don’t lazyload images if permet d’exclure des images du chargement différé. Procédez exactement de la même façon que pour la désactivation de l’optimisation.

Cloud integration

Personnellement, je n’utilise pas ces options.

Enable cloud library browsing permet de parcourir toutes les images de votre compte Optimole à partir de votre site.

Vous pouvez choisir à partir duquel de vos sites, vous verrez les images.

Enable offloading images active le stockage des nouvelles images directement dans le CDN et les supprime de votre serveur.

Si vous cliquez sur sync images, cela transférera toutes les images de votre serveur vers le CDN.

Vous avez également la possibilité de réimporter sur votre serveur les images mises sur le CDN. Pour ce faire, cliquez sur Rollback images. Attention, attendez que toutes les images soient sur le CDN, sinon ça risque de buguer.

Découverte du tableau de bord d’Optimole

Des informations et statistiques

En vous connectant à votre compte Optimole, vous aurez accès à un tableau de bord.

Vous y retrouverez :

• Votre clé API et les informations liées à votre compte
• Le nombre de sites connectés
• Le nombre d’images
• Le trafic
• Et le nombre de visites sur les dernières 24 heures, sur la dernière semaine et sur le mois en cours

Dans l’onglet “metrics”, vous pouvez voir le trafic par jour sur un mois sous forme de diagramme.

Vous avez également accès à la liste des domaines autorisés et la possibilité d’en supprimer ou d’en ajouter.

Vous disposez également d’une bibliothèque dans laquelle vous pouvez visionner vos images disponibles sur Optimole.

Un outil sympa pour les images

Faire des modifications sur vos images est également possible via un outil intégré.

Pour le faire apparaitre, allez dans la librairie et cliquez sur une image.

Vous pourrez alors :

• La redimensionner (largeur, hauteur, remplir ou ajuster)
• Créer des filtres (flou, netteté, pixellisation)
• L’ajuster (luminosité, contraste, saturation)

N’oubliez pas de copier son URL afin de pouvoir l’utiliser sur votre site.

🔥 Il est également possible d’ajouter un filigrane sur une image.

Tout d’abord, téléversez une image au format PNG, JPG ou SVG via l’onglet “watermark”.

Puis, allez dans votre bibliothèque d’images et choisissez celle à laquelle vous souhaitez ajouter un filigrane, cliquez dessus.

Ensuite, choisissez l’image précédemment téléchargée dans le menu déroulant, réglez l’opacité, la taille et la position désirée.

Enfin, copiez son URL.

💡 Pour intégrer les images modifiées dans vos articles ou pages, choisissez “Insérer à partir d’une URL” et collez l’URL générée par Optimole.

Voilà, le tour d’horizon d’Optimole, LA solution tout-en-un pour l’optimisation facile de vos images est fini.

L’avez-vous testé ? Si oui, qu’en pensez-vous ? Si non, quel plugin utilisez-vous ?