Bonjour Plugin #20 🔌 – Imagify, pour optimiser vos images sur WordPress

Bonjour Plugin #20 🔌 – Imagify, pour optimiser vos images sur WordPress

August 13, 2019 8 By Bernardo Ryan


Salut les cuistots, c’est Alex ! Bienvenue
dans #BonjourPlugin, l’émission où je vous présente des extensions WordPress. Alors pour l’épisode numéro 20 on va s’attarder
sur l’extension Imagify. Allez c’est parti ! [Musique] Alors Imagify qu’est-ce que c’est ? Je vous
en ai déjà parlé sur le blog mais concrètement c’est une extension qui va servir à compresser
les images de notre site. Des fois on envoie des images qui sont bien
trop grosses et du coup elles mettent du temps à se charger, et si une page met du temps
à se charger ce n’est pas bon ni pour votre site, ni pour les affaires. Personne ne s’y retrouve au final donc votre
intérêt c’est d’avoir un site qui possède des images qui se chargent rapidement. Voilà pourquoi Imagify est super intéressant. Ce qu’il faut savoir aussi c’est que les images
représentent souvent plus de 50% du poids des pages web donc si on arrive à les optimiser,
on arrive vraiment à donner un bon coup d’accélérateur à notre site (plutôt que d’aller faire des
micro optimisations ici et là). Si vous n’avez pas un profil technique, concentrez-vous
plutôt sur les images avec une extension comme Imagify et vous verrez, ça va tout
changer. Ce que je vous propose maintenant c’est
de prendre Imagify en main. Je ne l’ai pas précisé mais c’est une
extension « freemium », c’est à dire qu’il y a une partie gratuite où vous pouvez
optimiser 25 Mo d’image par mois (donc tous les mois vous avez un nouveau crédit de 25
Mo qui arrive) et si jamais vous avez besoin de plus, ils ont des forfaits mensuels ou
des packs en « one shot ». Moi je préfère cette solution parce que
je n’ai pas vraiment une grosse consommation d’images sur la Marmite ainsi que sur tous
mes sites, mais tout dépend de votre projet. Personnellement, je recommanderai plus ces
petits packs-là. Juste avant de tourner la vidéo, j’ai acheté
un petit pack de 3 Go et ça m’a coûté 24 – 25 $ (donc ça fait 19 $ + la TVA française). Là je suis reparti pour 3 Go, ça va me faire
plus d’un an. On attaque la prise en main ? Allez, let’s
go ! Me voici dans l’administration de WordPress
de mon site local. J’ai installé Imagify donc là on me propose
de créer un compte. Là, mon compte est déjà créé, ça ne
sert à rien que j’en crée un nouveau. Ensuite il faut récupérer une clé API pour
faire le lien entre votre site et le service d’Imagify parce que les images vont partir
chez Imagify et ils vont vous les renvoyer compressées. Donc je clique sur « Récupérer ma clé
API », je colle la mienne (bien sûr, on ne vous la montre pas, je suis sympa mais
je ne suis pas non plus le bon samaritain). On clique sur « Connectez-moi », ça va
faire le lien et c’est parti ! Maintenant il n’y a plus qu’à aller se rendre dans les
réglages. Petite parenthèse : on peut aussi optimiser
ses images directement sur le site d’Imagify. On peut faire des glisser-déposer. Si jamais vous n’en avais pas forcément
besoin sur WordPress vous pouvez aussi passer par leur service directement pour compresser
vos images. Maintenant que l’on est dans les réglages,
à quoi ça ressemble ? Tout simplement, là on nous propose trois modes d’optimisation
: Normal, Agressif et Ultra. Donc bien sûr, « Ultra » c’est le plus
bourrin, même s’ils disent qu’il n’y a généralement aucune différence entre
l’image de base et l’image compressée. On va dire que je suis un peu plus timide
et je préfère mettre en « Agressif ». En « Normal » vous pouvez le faire mais
voilà, moi je préfère le mettre en « Agressif ». Si vous voulez on peut faire le test en « Ultra »,
ça peut être sympa donc allez ! On va mettre en « Ultra », on est fou ! Donc… « Optimiser automatiquement les
images envoyées » : Oui (c’est le but, que vous n’y touchiez plus après, une fois
que tout est configuré). A chaque fois que vous envoyez une image : elle
est optimisée. On “conserve une copie des images d’origine. » : Oui. « Garder toutes les données EXIF de vos
images » : ça peut être intéressant si vous n’êtes pas photographe. Si vous avez besoin de ces données, faites
en sorte de cliquer ça, si vous n’en avez pas besoin, laissez décoché. Après il nous propose aussi une optimisation
WEBP. Alors WEBP c’est un format d’image qui a
été développé par Google si je ne me trompe pas et qui permet d’avoir vraiment des images
très compressées (donc plus compressées que le JPEG ou le PNG qui sont un peu les
formats historiques). La nouvelle « frontière » c’est le WEBP
et donc là, on va laisser activé la « création de format d’image WEBP ». « Redimensionner
les images trop grandes » : ça aussi ça peut être intéressant de le faire, déjà
de redimensionner en 2000 pixels de large pour que cette image soit optimisée par la
suite. Ça évite de perdre trop de place et de consommer
vos crédits Imagify pour de très grosses images. Là j’utilise Astra et on peut aussi optimiser
les images du thème, donc je vais cliquer et là on me demande quelles sont les tailles
d’image qu’il faut optimiser (à voir en fonction de celles que vous utilisez sur votre site). Moi j’ai tendance à tout laisser, comme ça
tout est optimisé mais après, s’il y a des formats d’image que vous ne voulez pas optimiser
(qui ne sont peut-être pas affichés sur votre site), vous pouvez décocher. Ça évitera de consommer du crédit pour
rien. La dernière option qu’il nous reste c’est
« Afficher le menu dans la barre d’outils » : c’est masquer ou laisser affiché Imagify
ici. Moi j’ai tendance à le laisser activé mais
après si vous avez trop de chantier en haut, vous pouvez le désactiver. On enregistre les modifications et voilà,
Imagify est configuré ! Donc là, je vais aller créer un nouvel article
et je vais envoyer une image. Là je reviens de Corse. On a passé une dizaine de jours avec ma chérie
et mon fils et donc je vais prendre une photo de Corse puis je vais la compresser, ça sera
un bon cas pratique. On va dire que je rédige un article sur mes
vacances de Corse… bla bla bla… Et maintenant je veux mettre mon image. Je vais la renommer (c’est quand même une
bonne pratique de renommer ses images avant de les envoyer), donc : « Corse sur les
îles sanguinaires au large d’Ajaccio ». Je vous recommande, si jamais vous allez en
Corse, d’aller faire un tour là-bas, c’est super sympa. Donc là je balance mon image, comme vous
pouvez le voir ça charge. Là, elle est en train d’être envoyée
sur le serveur et Imagify va s’en occuper automatiquement. Donc ici c’est tout à fait transparent, on
ne voit même pas Imagify agir. « Texte alternatif » : « Balade sur
les îles sanguinaires ». Donc là je vais le publier, c’est parti
! C’est vraiment un article minimaliste mais c’est pour vous montrer. Donc j’ai mon image (mon image de base fait
8,7 Mo : c’est costaud), si on retourne dans l’administration pour voir ce qu’Imagify
a fait comme boulot – là je me rends dans les médias. Là elle est en cours d’optimisation donc
il faut attendre un peu. – Là on peut voir que j’avais déjà envoyé
d’autres images sur ce site local pour d’autres épisodes de #BonjourPlugin. On voit par exemple que cette image est passée
de 3 MB à 352 KB. Et donc là, notre image du début est passée
de 8 MB à 1 MB. On a gagné plus de 91% donc c’est plutôt
sympa (en « Ultra ») et on va comparer l’originale et l’optimisée. On va voir s’il y a une différence graphique. Aaah… Il y a quand même une différence
si vous regardez bien le bateau. Je trouve qu’il est un peu plus flou en « Ultra »
que sur l’image originale. C’est pour ça que j’avais raison d’être
timide. Ce qu’on va faire c’est que l’on va
la ré-optimiser en « Agressif » et là on verra vraiment s’il y a une grosse différence. Alors après c’est vrai que quand l’image
est réduite, elle n’est pas affichée en pleine taille. Ça ne se voit pas forcément. – Là si je zoome l’image c’est un petit
peu pixelisé. – Là l’image se ré-optimise en « Agressif ».
On attend que ça se passe et voilà, on y est !
Ça a ré-optimisé la photo d’après. J’aurai peut-être mieux fait de la restaurer. Alors… « Comparer Originale vs Optimisée »
: Là je préfère ! C’est plus intéressant. – Je ne sais pas si vous voyez mais moi je
ne vois pas de différence, donc pour moi c’est bon. – On est passé au final de 8,27 MB à 300 KB
et donc là ça fonctionne bien. Autre chose aussi que vous pouvez faire sur
Imagify c’est de « l’optimisation en masse ». Donc je vous montre comment faire. Je vais cliquer sur « Médias », « Optimisation
en masse » et donc là on a une autre interface : « Bibliothèque de médias » et on clique
sur le bouton « IMAGIF’EM ALL ». Après on clique là-dessus et ça nous optimise
tout. Bon, moi je ne vais pas tout ré-optimiser
parce que c’est déjà fait, j’en ai juste une à optimiser je crois donc ça ne sert
pas à grand chose. Voilà je pense que j’ai fait le tour d’Imagify. Qu’est-ce que j’ai d’autre à vous dire
là-dessus ? Imagify est français, ça a été conçu par l’équipe de WPMédia, donc
c’est la société qui édite l’extension WPRocket dont je vous ai déjà parlé pas
mal de fois, ça fait plaisir aussi d’en parler. Du coup je voudrais savoir ce que vous utilisez
pour optimiser vos images. Est-ce que vous partez sur Imagify ou est-ce
que vous avez une autre extension que vous utilisez régulièrement ? Ou peut-être que
vous optimisez vos images avant de les envoyer sur WordPress, peut-être avec un logiciel
de photo ou autre chose ? Ça m’intéresse, parlez-en moi dans les commentaires et d’ici
là, je vous encourage bien sûr à vous abonner pour recevoir les futurs épisodes de #BonjourPlugin
mais aussi toutes les autres séries de vidéos (tout ce qui est #DisVoirAlex, #InstantThème,
etc). Sur ce je vous souhaite bon courage avec votre
site et je vous dis à très bientôt, ciao !