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

Optimole optimisation tout en un des images

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

Optimole plugin WordPress 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”.

Obtention API key Optimole

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

Connexion services optimisation d'images d'Optimole

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

Optimole scan images et conflits

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.

Optimole paramétrages du plugin

⚠ 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.

Optimole paramÚtres onglet général

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.

optimole onglet advanced 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.

optimole onglet advanced resize

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.

optimole onglet advanced lazyload

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Ă©.

optimole onglet advanced exclusions

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.

optimole cloud integration

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.

tableau de bord Optimole

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.

réglages images Optimole

đŸ”„ 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”.

ajouter filigrane Optimole

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.

ajout filigrane Optimole

💡 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.

importer image modifiée par Optimole

Le mot de la fin

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 ?

Hello, moi, c'est Christine 👋. Je suis crĂ©atrice et optimisatrice de sites Web et rĂ©dactrice Web SEO. J’adore parcourir le web pour dĂ©nicher des astuces, fonctionnalitĂ©s et outils gratuits qui facilitent la crĂ©ation numĂ©rique. Sur ce blog, je vous partage mes dĂ©couvertes et espĂšre qu’elles pourront vous ĂȘtre utiles.
S’abonner
Notifier de
guest
6 Commentaires
le plus récent
le plus ancien le plus populaire
Commentaires en ligne
Afficher tous les commentaires
Retour en haut >
6
0
J'aimerai bien avoir votre avis sur cet article 😉x