WordPress – Optimisation des images

Le temps de chargement d’une page est crucial nous le savons, celui-ci impacte la fréquentation de votre site et peut nuire à votre bon référencement.  Les images sont le type de contenu le plus gros à télécharger dans une page, environ 60% en 2015 (source httparchive.org). Ce chiffre ne cesse d’augmenter au fil des années. Ajoutez à cela le boum des terminaux mobiles utilisant les connexions 3G et 4G et nous comprenons de suite l’intérêt d’optimiser nos images.

Pour parvenir à nos fins plusieurs méthodes s’offrent à nous : choisir le bon format d’image, compresser l’image, nettoyer les métadonnées, diminuer la résolution…

Pour un utilisateur averti, il est possible de travailler sur les images en amont via un logiciel, quoique cela devient vite fastidieux. Dans le cas d’un utilisateur lambda qui n’appréhende pas les notions de performance et qui ne manipule pas spécialement bien les logiciels… Cela devient vite compliqué ! Dans les deux cas, l’automatisation de ces tâches est un besoin évident.

Du côté de WordPress, nous trouvons plusieurs extensions pour faire le job. J’ai sélectionné 7 extensions, la plupart connues et en place depuis longtemps et d’autres plus récentes voire encore en beta test. Sur le banc nous trouvons : Compress JPEG & PNG images (TinyPNG), EWWW images optimizer, fasterImage, Imagify, Kraken, Optimus,  Wp-Smush.

La suite de l’article va s’articuler en 5 parties :

1. présentation et test des extensions,
2. comparatif de compression,
3. comparatif des options,
4. comparatif des tarifs,
5. conclusion.

Présentation et test des extensions

[accordion hx= »h3″ nb= »7″ once= »true » css= »a11y-ui-styles »][accordion_header opened= »true »]Compress JPEG & PNG images[/accordion_header][accordion_panel]
Cette extension permet d’accéder aux services en ligne de TinyPNG.

Les réglages se situent dans la page d’options des médias,  vous pouvez sélectionner les différentes tailles de miniatures à compresser et redimensionner la taille de l’originale. En (dé)cochant une taille on vous informe du nombre de compressions possibles dans le mois, sympa mais cela ne tient pas compte de votre crédit en cours.

La page d’optimisation de masse se trouve dans le menu « outils ». Après traitement, l’extension nous renvoie la liste des images ainsi que le nombre de compressions effectuées dans le mois.

Dans la bibliothèque, un bouton de compression est présent pour chaque image. Après traitement, il affiche le nombre d’images (miniatures) qui ont été traité et le poids avant/après.

Les plus : j’aime le fait que les options soient placées dans « options > médias » car elles sont peu nombreuses et par le fait, ne nécessitent pas une page dédiée.  Un système d’alerte mail avec un seuil défini par l’utilisateur est disponible sur la page du site avec votre clé API.

Les moins :  Le manque d’interactivité de certaines options. Lors du traitement des images, il manque une barre de progression ou un spinner animé. On se demande si l’extension pédale dans la semoule ou travaille encore. La compression à l’envoi est présente mais pas désactivable. Sur le site de tinyPNG pour accéder à vos informations, il n’y a pas d’interface de connexion. A chaque fois vous devez vous faire renvoyer un email. L’extension n’est pas traduite en français.

[/accordion_panel][accordion_header]EWWW Image Optimizer[/accordion_header][accordion_panel]
Pour la seconde extension, voici le service de EWWW.io. J’avoue qu’en premier lieu, je comptais l’écarter du test par flemme. Eh oui, là on tombe dans l’usine à gaz ! Le fonctionnement général de l’extension est différent des autres. Ici le traitement des images se fait en local.

Du côté des options, dans « Réglages > Ewww » nous avons une page divisée en quatre onglets : paramètres Cloud, paramètres simples, paramètres avancés et paramètres de conversion. Il n’y a pas moins de 34 options disponibles, cela va du choix de niveau de compression à la conversion de format en passant par la planification de l’optimisation décalée via wp-cron. On ne sait pas trop par où commencer tellement il y a d’options.

Pour l’optimisation en masse, nous trouvons un tableau de bord permettant plusieurs actions :

• Forcer une nouvelle optimisation,
• Traitement de toute la bibliothèque avec une option pour la durée de pause entre les images,
• Scanner et optimiser d’autres images : thèmes, plugins.

Après traitement, pour chaque image nous avons le gain par taille et le temps écoulé. Une seconde page liste les images non optimisées. Enfin, dans la bibliothèque nous trouvons par image la possibilité d’(ré-)optimiser l’image ou de la convertir.

Les plus : c’est gratuit et illimité. L’extension est traduite en français.

Les moins : La complexité des options et de possibles problèmes de performance lors des traitements.

Mon avis global est partagé. L’extension fait tout, presque trop. C’est un gros couteau suisse. Du coup, si vous vous sentez l’âme d’un MacGyver elle est sûrement faite pour vous.

Un second plugin permet d’accéder au service cloud. Dans ce cas, le traitement est fait par le serveur de EWWW.io et non par votre hébergement. Je l’aurais bien testé mais ma banque a décidé que je ne pourrais pas faire le paiement ni par CB ni par paypal…à suivre.

[/accordion_panel][accordion_header]fasterImage[/accordion_header][accordion_panel]

fasterImage.io est un nouveau service d’optimisation d’images. Son fonctionnement est différent des précédents. Ce sont les serveurs de fasterImage qui s’occupent de servir vos images.

Vous envoyez vos images sur votre WordPress, vous les intégrez dans une page/article. Au premier chargement de la page par un visiteur, les images sont envoyées vers fasterImage.io. A partir de là, c’est le service qui prend le relais et qui sert les images.

La page d’options est divisée en deux onglets :

• un tableau de bord qui donnent les informations sur le service : activation, nombre d’images optimisées, gain en bande passante et vos crédits.
• l’onglet « paramètres » permet d’activer le service et de saisir sa clé API.

Du côté de l’extension, c’est tout ! Pour plus de paramètres, il faut se rendre sur le site de fasterImage dans « mon compte > paramètres » où nous trouvons :

• Choix du mode de compression : avec perte / sans perte (possibilité de supprimer les images existantes),
• Compression au format WebP.

Un onglet « images » permet de naviguer dans les images en donnant des informations sur le type de compression, le gain après traitement et des actions pour relancer une optimisation ou la suppression de l’image.

Les plus : simplicité de mise en œuvre, allégement de la bande passante de votre hébergement.

Les moins : En cas de panne, il ne vous reste que vos images non optimisées. Le service est lié à un domaine ou deux maximum, avec le plan le plus cher.

Après quelques échanges avec le créateur du service, des développements sont en cours, dont l’intégration des options dans le plugin mais pas seulement : plus d’options de compression, création d’une API.

[/accordion_panel][accordion_header]Imagify[/accordion_header][accordion_panel]

C’est le petit nouveau dans le monde de la compression d’images, le dernier né de l’équipe WP Media.

A là première activation de l’extension, un bandeau de démarrage s’affiche pour faciliter vos premiers pas : lien vers Imagify.io pour créer votre compte, enregistrement de la clé API puis accès à la page d’options.

J’aime quand les extensions ont un design similaire à l’administration, de manière à ce que l’on oublie sa présence. Pour le coup j’ai été bluffé qu’Imagify soit doté d’un design dédié qui se marie aussi bien avec le reste de l’interface. On voit que c’est le boulot d’un designer et cela démontre bien que le design a autant sa place en back-office qu’en front-office.

Sur la page d’options nous trouvons : trois niveaux de compression (normal/agressif/ultra), compression des images à l’envoi, conservation de l’originale (dans un répertoire séparé), redimensionnement des images trop grandes (bye bye Imsanity), choix des tailles à optimiser et affichage optionnel du menu de la barre d’administration.

Un tableau de bord de traitement par lot est accessible depuis un sous-menu de « Médias » et depuis la liste des extensions. Là encore, c’est beau et surtout efficace ! Dans la partie supérieure, vous avez un accès à votre compte et une barre de progression pour les crédits. Plus bas, nous trouvons de l’information sur le service, des statistiques sur l’état de la bibliothèque et enfin le tableau de progression de l’optimisation.

Allons maintenant dans la bibliothèque. L’extension propose deux actions dans le bulk action : le traitement et la restauration par lot des images. Pour les informations et actions indivduelles : ancien et nouveau poids l’image, type de traitement fait. Cerise sur le gâteau, trois options permettent de restaurer l’image originale ou d’appliquer un traitement différent.

Les plus : L’expérience utilisateur est vraiment top, je ne dirais pas que l’on s’amuse à l’utiliser mais presque. La recherche du détail et l’intégration dans toutes les parties qui concernent les images, comme la page d’édition du média.

Les moins : Le fait que se soit encore une beta. Donc j’attends avec impatience l’implémentation de certaines options prévues sur la roadmap.

[/accordion_panel][accordion_header]Kraken[/accordion_header][accordion_panel]

Dans la place depuis un moment, Kraken.io propose également son plugin pour WordPress.

Les options, au nombre de 4, sont accessibles depuis le menu « Réglages » :

• niveau de compression (Lossy /Lossless),
• compression à l’envoi,
• effacement des métadonnées de Kraken (ajout d’un bouton « reset » pour chaque image permettant de relancer une optimisation),
• Réglage du nombre d’images traiter en même temps.

Dans la médiathèque, vous pouvez lancer un traitrement par lot via le bulk action.

Après traitement : la taille du fichier, le type de compression, le pourcentage de gain et le nombre de miniatures affectées.
Sur la page du compte, sur kraken.io, vous retrouvez les informations de compression sous forme de statistiques globales et journalières.

Les plus : Le traitement par lot propose de définir le niveau de compression pour les images sélectionnées.

Les moins : Il n’y a pas d’optimisation de masse donc obligation de passer par le bulk action de la bibliothèque. Si vous épuisez vos crédits, aucune information ne vous en informe dans l’interface et les actions tournent dans le vide. Vous n’en serez informé que par email.

Le plugin n’est pas un freemium (le seul de l’article). Kraken offre 50mo de crédit à la création du compte, ensuite il vous faudra souscrire un plan.

[/accordion_panel][accordion_header]Optimus[/accordion_header][accordion_panel]

Je vous l’avoue, c’est le seul plugin que je ne connaissais pas avant de commencer cet article.

Optimus est un produit de KeyCDN. Le traitement des images est effectué par leurs serveurs et les images sont renvoyées vers votre installation WordPress.

Optimus se positionne sur un créneau différent de ses concurrents : la protection des vos données. Pour cela, il met en avant : la destruction immédiate des images après traitement, l’hébergement en Allemagne, connexion https…

La première étape avec ce plugin, si vous utilisez un plan premium (HQ/HQ Pro), c’est d’activer votre licence. Au premier tour d’horizon, pas de champs pour rentrer la clé fraîchement achetée… bon il est 2h30 du mat’ ceci explique peut être cela. Il a fallu que j’aille sur la FAQ du site pour trouver la solution : un petit lien « Activer Optimus HQ » (en rouge quand même!) se trouve sur la page des extensions, à droite de « Afficher les détails » (voir capture n°1).

La page d’options, accessible depuis le menu « Réglages », propose 5 options dont 3 réservées au compte Premium. Toutes les miniatures créées par le thème ou les plugins seront traitées.

Depuis le menu « Outils » vous accédez à la page d’optimisation de masse qui ressemble fortement à celle de TinyPNG, surtout dans la non-interactivité. Quand on lance la moulinette, il n’y a pas de spinner, ni barre de progression dynamique. C’est peut être personnel, mais je trouve ça frustrant, surtout sur des tâches pouvant être longues.

Lors de mes tests de compression, j’ai été confronté à un message d’erreur « code 0 » sur une image, malgré plusieurs tentatives. De retour dans la FAQ, j’ai trouvé une information indiquant d’augmenter la valeur de max_execution_time dans le php.ini (bon là on a perdu minimum 90% des utilisateurs). Je l’ai fait et ça ne marchait toujours pas. Sachant que cette image était passée sans soucis dans toutes les autres extensions et que j’avais besoin des résultats pour le comparatif : j’ai ouvert un ticket sur le support. Deux heures après, j’ai reçu une réponse et une mise à jour du plugin (1.4.3) a été appliquée. Plus de message d’erreur suite à un nouveau test ; c’était un dimanche après-midi. Un bon point pour le support.

Du côté de la bibliothèque, nous avons le traitement par lot disponible dans le bulk action. Dans la colonne Optimus, un disque vert permet de visualiser le nombre d’images traitées (Si le disque est complètement vert 100%, moitié 50%,…) et le pourcentage de gain est affiché au centre du disque.

Les moins : Il n’est pas possible de traiter individuellement une image. Modifier le php.ini pour une fichier de 2.5Mo, ne me rassure pas.

[/accordion_panel][accordion_header]WP-Smush-Pro[/accordion_header][accordion_panel]

Si vous avez déjà fait des recherches sur le sujet de l’optimisation d’image, vous avez sûrement entendu parler de smush.it, service créé par Yahoo. Une extension WordPress existait, puis Yahoo a abandonné le projet et il a été repris par l’équipe de WPMU DEV.

Il existe une version gratuite WP-Smush que j’ai écarté du test car il limite le traitement des images de plus d’1Mo ; du coup, aucune de mes images ne serait passée.

En avant pour la version Pro : carte bancaire, téléchargement et activation de l’extension…et là, c’est le drame : « Just one more step to enable updates and support for WP Smush Pro! Activate WPMU DEV Dashboard« . Ah non, mais non ! Clairement, si je n’étais pas entrain de faire un test je me serais arrêté là.

Une fois activé et identifié, nous avons 2 metabox supplémentaires (que l’on peut fermer jusqu’au mois prochain) en entête sur toutes les pages. C’est sympa, surtout après une souscription. La page d’options est disponible depuis un sous menu de « Medias ». Après 4 coups de roulette pour passer les 2 metabox et la publicité de 400px, nous voilà dans les options !

Cette page regroupe les options et l’optimisation de masse. Pensez à enregistrer vos options avant de lancer un traitement. Dans les options, il y en a une qui tue : activer l’intégration pour NextGEN Gallery. Eh bien oui, mais non, je ne la testerais pas ! Faut pas pousser mémé dans les orties !

L’optimisation de masse ça fonctionne. Des fois, ça plante 1 fois sur 4 essais. Il y a un petit spinner (tout laid) sur le bouton « Smushing in progress », mais il a le mérite d’y être.

Un bouton individuel « Smush now » permet le traitement individuel et après travail nous informe du nombre d’images optimisées et du gain. Un menu déroulant permet de voir le gain par miniature.

Les plus : Dans les résultats individuels, l’extension donne le gain pour chaque taille d’images.

Les moins : L’installation de WPMU Dashboard pour activer l’extension. La publicité même si on a déjà vu pire, elle est toujours placée avant le contenu. Le traitement par lot via le bulk action n’est pas présent.

Bon, vous l’aurez compris je ne suis pas fan, ni de l’extension ni de WPMU DEV. Je m’étais fait une idée par des retours d’expérience que j’avais lus. Maintenant que j’ai testé, rien n’a changé.

[/accordion_panel][/accordion]

Comparatif de compression

Avant de me lancer dans cette tâche, j’ai passé (perdu) pas mal de temps pour me décider sur le set d’images que j’allais utiliser. J’ai suivi quelques pistes : « Theme Unit Test« , « wp-test » en français, Unsplash.com. Mais je me suis aperçu que j’avais très peu de gain voire pas du tout. Les images étaient déjà partiellement ou totalement traitées. Quel était l’objectif ?! Les image à traiter proviendraient certainement : d’appareils photos, téléphones, tablettes, banques d’images… Donc, j’ai finalement opté pour 6 images : 3 JPEG venant de ma collection personnelle et 3 PNG téléchargées sur Wikimedia, voir les miniatures avec les licences ci-dessous. Les images vont de 1,6 à 5Mo.

Avant chaque phase de test, j’ai : supprimé toutes les images de la bibliothèque de média, désactivé toutes les extensions, envoyé les originaux puis activé l’extension à tester. J’ai créé une page avec 4 galeries contenant chacune le set pour une taille d’image : miniatures, moyennes, grandes et originales. J’ai lancé une optimisation de masse et récupéré les résultats via Dareboost, WebPageTest et YellowLab (il a pas tenu le choc trop de Mo). En parallèle, j’ai téléchargé chaque version du set compressé pour vérifier mes résultats.

Comparatif JPEG et PNG

Service / niveaux de compression	Poids en mégaoctets	% de gain	Rapports
Originales	20.9
TinyPNG	5.9	71.7
EWWW	19.5	6.6
FasterImage - sans perte	19.2	8.1
FasterImage - avec perte	9.3	55.5
Imagify - normal	19.5	6.6
Imagify - agressif	9.7	53.5
Imagify - Ultra	5.7	72.7
Kraken - Lossless	16.9	19.1
Kraken - Lossy	9.2	55.9
Optimus	19.7	5.7
Wp-Smush-pro	19.2	8.1
Wp-Smush-pro - supersmush	9.5	54.5

Et le gagnant est … Imagify en mode ultra, suivi de près par TinyPNG !

Nous voyons nettement 3 tranches de résultats : compression en dessous 6mo, un intermédiaire à 9mo et au dessus de 16Mo. Si vous souhaitez rechercher plus de détails ou visualiser la dégradation des images, vous pouvez regarder sur ce comparateur.

Comparatif WebP

	Poids en mégaoctets	% de gain	Rapports
Originales	20.9	0
EWWW	12.0	42.5
fasterImage	2.1	89.9
Optimus	12.6	39.7

C’est sans appel, fasterImage atomise ses 2 concurrents.

Pour activer l’utilisation des images WebP avec EWWW, il faut se rendre dans l’onglet « Paramètres simples ». En bas de page vous pouvez insérer les lignes nécessaires dans le fichier .htaccess. Pour Optimus, vous devrez passer par une seconde extension, Cache Enabler de KeyCDN. Aucune action n’est nécessaire avec fasterImage.

Je n’ai pas fais de test sur le format GIF (je sens que vous êtes déçus), car dans mon esprit le format était peu supporté par les extensions. C’est en faisant le comparatif des options de ci-dessous, que je suis rendu compte que la plupart le supporté. Donc tant que ma plate-forme de test est en place, j’en ferais un. Il me reste de toute façon des recherche à faire, sur le support GIF /GIF animés.

Comparatif des options

Dans le tableau ci-dessous, j’ai essayé de compiler les options les plus courantes. Cette liste n’est bien sûr pas exhaustive. Les options intéressantes isolées sont décrites dans la présentation de l’extension, sauf si j’en ai raté…

Comparatif des tarifs

Voyons maintenant les offres proposées. Faites attention, certaines (TinyPNG et EWWW) sont basées sur un quota d’images par période. Les autres sont faites sur le poids transféré. Notez également que les offres de fasterImage sont en euros.

Ce tableau présente les offres pré-payées, seul deux prestataires en proposent.

Conclusion

Cela fait 3 semaines maintenant que j’utilise ces extensions quotidiennement. Je vous propose un « classement », qui reste très personnel. J’espère que les 2900 mots précédents vous aurons permis de faire le votre.

Mon coup de cœur est clairement pour Imagify. L’expérience utilisateur est vraiment au top, pas mal d’options mais pas trop. L’extension garde le focus sur son objectif, la performance. J’aime que la version free propose 100% des options, les plans premium ne débloquent que des quotas. Les tarifs des plans et packs sont très corrects et permettent de choisir en fonction de vos besoins. Et enfin, n’oublions que ce n’est encore qu’une beta. Il y a déjà en attente sur la roadmap, des choses très sympathiques.

Une bonne surprise avec fasterImage. L’extension a vraiment un fonctionnement spécifique. Les tests de compressions sont bons, la version WebP est super performante. Il manque encore beaucoup de choses au niveau du plugin, mais le développement se poursuit. Personnellement j’aime avoir la main sur mes données, sur ce point je suis moins fan. Les 100Mo de la version free permettent de bien tester le service.

Ensuite je fais un lot : TinyPNG et EWWW. Qui sont à mon avis de bonnes solutions si vous brassez peu d’images.

TinyPNG offre 500 images par mois, attention quand même avec Twenty Fifteen 1 image envoyée = 5 images en quota. Ses résultats de compression sont très bons. Le redimensionnement de l’image introduit dans la dernière version est un plus. Par contre ne pas pouvoir désactiver la compression à l’envoi,  c’est moins bien.

EWWW par son fonctionnement en local, reste la solution la moins chère. Je reste par contre déçu de l’expérience, trop de réglages. Je pensais obtenir des résultats de gains très différents suivant les options utilisées, mais non. Par contre j’ai bien réussi à mettre le CPU de mon hébergement à 95% pendant 20 minutes.

Pour finir Kraken, Optimus et WP-Smush

Kraken a de bon résultats de compression.  L’optimisation de masse manque. Si vous le prenez pour traiter une grosse bibliothèque, en avant via le bulk action…

Optimus a l’avantage d’offrir des licences illimités annuelles. La version free est une vaste blague, avec une limitation à 100Ko par image à l’envoi. La modification du php.ini pour faire marcher l’extension m’a bien refroidi.

Wp-Smush, la version free est assez limitée par les 1Mo maximum à l’envoi. L’option supermush donne de bons résultats. En points négatifs (pour moi), l’installation du dashboard WPMU pour activer le service et trop de publicité à mon goût.

J’espère que cet article vous permettra de choisir un service ou vous en a fait découvrir. Je vous dis à bientôt, avec la présentation d’un plugin autour de l’accessibilité. Le développement a bien avancé, donc disponible avant l’année prochaine.