Optimole, l’optimisation d’images tout-en-un pour WordPress

Optimole optimisation tout en un des images
Partagez !

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

Non ?

Eh bien, il s’agit du plugin WordPress que j’utilise depuis pas mal de temps dĂ©jĂ  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 Web. 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 meilleurs plugins d’optimisation d’images. J’ai Ă©galement recherchĂ© dans la jungle du rĂ©pertoire d’extensions WordPress ceux qui contenaient Ă  peu prĂšs toutes 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Ă© celui qui correspondait Ă  mes besoins (et qui sait, peut-ĂȘtre aux vĂŽtres) : 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, ce qui est somme toute, pas mal.

Ensuite, il convient de noter aussi qu’il est totalement compatible avec les constructeurs de pages populaires tels que Elementor, Beaver Builder, Gutenberg et autres.

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, ce qui rĂ©duit les temps de chargement et l’utilisation de la bande passante.

Enfin, contrairement Ă  d’autres plugins 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 le plugin via le tableau de bord de WordPress/Plugins/ajouter et en renseignant simplement 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, il vous suffit de renseigner la clĂ© API aprĂšs avoir cliquĂ© sur “I already have an API key”.

Soit, vous n’en possĂ©dez pas et il vous faut alors en crĂ©er un pour recevoir votre clĂ© API par mail en cliquant sur “Register & Email API key”.

Obtention de la clé API 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. Il vous faudra donc aller dans Elementor/outils et synchroniser la librairie, puis revenir dans les paramĂštres d’Optimole et cliquer sur “I’ve done this” et l’avertissement disparaĂźtra.

Ensuite, 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, alors 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, quant Ă  lui, redimensionne automatiquement les images que vous avez, par erreur, tĂ©lĂ©versĂ©es dans une trop grande taille, donc activez-la au cas oĂč.

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. À vous de voir ce que vous prĂ©fĂ©rez. 😉

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, Ă  activer Ă©galement, cela garantira que votre contenu (texte) se charge en premier afin que les lecteurs puissent commencer Ă  lire, d’ici lĂ , votre vidĂ©o sera chargĂ©e.

Lazyload background for selectors, c’est ici que vous pouvez ajouter tous les sĂ©lecteurs CSS particuliers afin de cibler les images d’arriĂšre-plan pour lesquelles vous souhaitez activer le lazy load.

Par exemple, si vous avez des images d’arriĂšre-plan avec la class mon_image vous ajoutez le sĂ©lecteur css suivant .mon_image. Pour prendre un autre exemple, si votre image d’arriĂšre-plan est contenue dans un id comme mon_id, vous 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 de votre site, certaines images ou mĂȘme 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 l’URL de la page (par exemple, « accueil »).

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 également choisir à partir duquel de vos sites, vous verrez les images afin que vous puissiez facilement choisir et réutiliser les images de vos autres sites.

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” Ă  cĂŽtĂ© de “Offload existing images”, cela transfĂ©rera toutes vos images existantes de votre serveur vers notre CDN.

NĂ©anmoins, si cela ne vous convient pas, vous avez la possibilitĂ© de rĂ©importer sur votre serveur les images mises sur le CDN en cliquant sur “Rollback images” (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, 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 que vous avez 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Ă©ez 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, il vous faudra choisir “InsĂ©rer Ă  partir d’une URL” et coller 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 ?


Partagez !
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.
0 0 votes
Évaluation de l'article
S’abonner
Notifier de
guest
0 Commentaires
Commentaires en ligne
Afficher tous les commentaires
Retour en haut
0
J'aimerai bien avoir votre avis sur cet article 😉x