Tu souhaites voir les performances que l’on peut obtenir en matière d’optimisation d’images grâce à EWWW, tu es au bon endroit. Le but de ce billet, prendre 10 images au format JPG et PNG, voir le rendu, et comparer le poids obtenu en sortie. Un tableau vient synthétiser les résultats à la fin de se billet 😉

Plusieurs billets viendrons compléter celui-ci, dans le but de tester aussi largement que possible les solutions qui s’offre à nous en terme de compression d’images automatisée pour WordPress.

Ce test est donc le premier d’une longue série.

Optimisation / Compression : Les Images retenues

Optimiser le poids de ses images, c’est bon pour tout le monde. Rien à redire. Cependant, tout le monde n’a pas le même type d’image à optimiser. Choisir une seule image au format JPG et une seule image au format PNG aurait pour conséquence de venir complètement fausser le test. Une particularité de l’image pouvant venir radicalement changer notre perception d’une bonne compression avec un poids raisonnable.

Le but étant de fournir un vrai test de rendu d’EWWW, quelles images choisir pour que tout le monde se retrouve dedans ? Après réflexion, j’ai fais le choix d’utiliser 5 images à la une de wCommerce et 5 images produits différentes; cela me semble couvrir beaucoup de cas de figures différents, avec le eCommerce dedans, cela va de soit sur ce site :p

Petite précision… je ne suis pas graphiste; je ne suis pas photographe; j’ai bien l’impression d’être monsieur tout le monde pour juger d’une photo 😉 Voila, ça c’est dit, on peut y aller.

Voici les candidats retenus, en PNG non optimisé, cela va de soit :

1 – Le camaïeu d’une couleur avec du texte (ici, de bleu)

Taille d’origine : 545,7kb

Montage fait à partir de Canva.

J’ai sélectionné cette image car je trouve que l’effet sous l’eau réside dans un espace de camaïeu de bleu. Comme une des choses qui est faite sur les images est de venir réduire le nombre de ces fameuses couleurs… On fera aussi attention à l’effet de vaguelette ainsi que le dégradé sur le haut de l’iceberg.

2 – Aplat de couleur avec du texte (Rouge)

Taille d’origine : 73,2 kb

Montage fait à partir de Canva.

Cette image pourrait sembler assez simple à optimiser. Et pourtant, l’effet de compression artifact peut être violent sur ce type d’image. Voici pourquoi j’ai retenu cette image.

3 – Photo de visage détaillée avec du texte

Taille d’origine : 918,3 kb (ouais, quand même)

Montage fait à partir de Canva.

Je ne sais pas si j’ai vraiment besoin d’expliquer pourquoi je retiens cette image, mais allons-y. Beaucoup de détails avec les cheveux et le visage, du texte, et en plus une image qui fait quand même pas loin de 1Mo, ça pique.

4 – Photo modifié par un filtre type instagram

Taille d’origine : 638,3 kb

Montage fait à partir de Canva.

Des filtres types instagram pullulent. J’admets en utiliser assez souvent. Je me dis qu’il peut être intéressant d’intégrer ce type d’image dans notre test. Voila, c’est fait.

5 – Photo avec de la couleur, des dégradés et du texte

Taille d’origine : 455,1 kb

Montage fait à partir de Canva.

En plus du texte fin qui peut rapidement devenir illisible en cas de mauvaise compression, le moins que l’on puisse dire, c’est qu’il y a de la couleur et du dégradé à bien gérer !

6 – Photo noir et blanc avec du texte

Taille d’origine : 465,5 kb

Montage fait à partir de Canva.

Il fallait bien une photo en noir et blanc tu crois pas ?

7 – Photo produit type packshot

Taille d’origine : 164,6 kb

Capture d’écran firefox.

La photo d’une clé usb licorne, très typique d’une photo prise dans un packshot traditionnel. Pas des masses de couleur, mais attention à la corne qui pourrait tendre à disparaître avec trop de compression mal gérée… Wait and see donc.

8 – Photo produit détaillée avec fond

Taille d’origine : 97,2 kb

Capture d’écran firefox.

Attention à cette photo car sa résolution est déjà bien limite pour appréhender comme il faut les détails de notre cher Dark Maul. La force sera-t-elle en EWWW au moment de compresser cette image ?

9 – Photo produit avec un visage

Taille d’origine : 153,8 kb

Capture d’écran firefox.

Cette photo produit sert d’illustration pour la vente d’une tiare de mariage. L’important n’est donc pas tant que le visage reste parfait, mais que l’on continue à bien voir le produit ! Avec un fond aussi flou, et un produit avec autant de détail, je me demande bien ce qu’il pourrait advenir en cas de compression excessive. Bien entendu, cela sera aussi le test parfait pour une photo produit avec un modèle.

10 – Photo produit en mouvement

Taille d’origine : 242,4 kb

Capture d’écran firefox.

Ok, je l’admets sans aucun soucis, j’adore l’agility ! J’en fais presque tous les jours, c’est pour dire 😉

En plus d’avoir l’occasion de partager ce point de détail de ma vie avec toi, il arrive parfois qu’une photo produit mette en avant un sujet en mouvement. Découvrons comment EWWW gère cela.

Let’s go !

J’espère que tu trouves cette sélection d’images à la fois convaincante et pertinente 😉 Comme des chiffres, c’est bien beau, mais on ne peut pas vraiment se faire un avis tant qu’on a pas vu le rendu final, je te propose de voir ce que donne chaque image compressée par EWWW, que cela soit en PNG ou JPG. Have fun.

La configuration d’EWWW

Le but de cet article n’est certainement pas de discuter configuration, mais comme j’ai tout de même touché une chose, le fait de forcer le passage en JPG. À voir si cela est pertinent ou pas.

EWWW existe en version gratuite et en version payante. Une des différences notables réside dans le fait que l’on peut uniquement utiliser une méthode de compression. Ce test sera l’occasion de voir si la version gratuite se tient, ou s’il faut juste passer son chemin. Aucune option de type payante a été utilisée.

PNG : Le test de compression avec EWWW

Comme je viens de le dire, la conversion PNG vers JPG est donc activé, voila pourquoi j’ai donc un JPG en sortie.

 

1 – Le camaïeu d’une couleur avec du texte (ici, de bleu)

[dt_before_after image_1=”66270″ image_2=”66285″][dt_before_after]

Taille après optimisation : 86,7kb

Gain en pourcentage : 84,11%

Mon avis : Le pourcentage de compression est important,  et à titre personnel, je n’arrive pas du tout à faire la différence entre l’image d’origine et l’image compressée…

2 – Aplat de couleur avec du texte (Rouge)

[dt_before_after image_1=”66271″ image_2=”66283″][dt_before_after]

Taille après optimisation : 45,2 kb

Gain en pourcentage : 38,25%

Mon avis : Taux de compression pas si ouf que ça sur le papier, mais l’image d’origine était pas bien lourde non plus. Toutefois, j’ai comme l’impression que le texte souffre d’un problème de netteté. Cependant, aucun effet d’artefact à noter en particulier.

3 – Photo de visage détaillée avec du texte

[dt_before_after image_1=”66272″ image_2=”66287″][dt_before_after]

Taille après optimisation : 178,0kb

Gain en pourcentage : 80,61%

Mon avis : Taux de compression canon, et je n’arrive pas du tout à faire la différence au premier coup d’œil.

4 – Photo modifié par un filtre type instagram

[dt_before_after image_1=”66273″ image_2=”66290″][dt_before_after]

Taille après optimisation : 128,8kb

Gain en pourcentage : 79,82%

Mon avis : Taux de compression canon, et je n’arrive pas du tout à faire la différence au premier coup d’œil.

5 – Photo avec de la couleur, des dégradés et du texte

[dt_before_after image_1=”66274″ image_2=”66292″][dt_before_after]

Taille après optimisation : 83,8kb

Gain en pourcentage : 81,58%

Mon avis : Taux de compression canon, et je n’arrive pas du tout à faire la différence au premier coup d’œil.

6 – Photo noir et blanc avec du texte

[dt_before_after image_1=”66275″ image_2=”66294″][dt_before_after]

Taille après optimisation : 114,6kb

Gain en pourcentage : 75,38%

Mon avis : Taux de compression canon mais tout de même moins violent que pour les images en couleurs. Quoiqu’il arrive, je n’arrive pas du tout à faire la différence au premier coup d’œil.

7 – Photo produit type packshot

[dt_before_after image_1=”66308″ image_2=”66310″][dt_before_after]

Taille après optimisation : 21,0kb

Gain en pourcentage : 87,24%

Mon avis : Ça, c’est de la compression de fou et toujours pas de différences notables entre les deux versions des images.

8 – Photo produit détaillée avec fond

[dt_before_after image_1=”66303″ image_2=”66313″][dt_before_after]

Taille après optimisation : 20,2kb

Gain en pourcentage : 79,21%

Mon avis : Un taux de compression toujours impressionnant, pour un résultat toujours aussi propre.

9 – Photo produit avec un visage

[dt_before_after image_1=”66305″ image_2=”66312″][dt_before_after]

Taille après optimisation : 26,5kb

Gain en pourcentage : 82,76%

Mon avis : Super taux de compression pour cette image. Toutefois, je trouve que le visage souffre d’un léger soucis de flou; ça reste léger.

10 – Photo produit en mouvement

[dt_before_after image_1=”66306″ image_2=”66311″][dt_before_after]

Taille après optimisation : 44,8kb

Gain en pourcentage : 81,51%

Mon avis : Pour le taux de compression encore rien à dire sauf wouah, mais si tu prêtes bien attention aux barres, tu verras que les reflets sont bien moins nets. Enfin, il va quand même falloir bien regarder pour le voir.

JPG : Le test de compression avec EWWW

un p’tit coup de convert *.png optimise.jpg dans le répertoire contenant nos png de test, et on y va pour le test de compression sur du JPG. Évidement, le poids de l’image change. J’en tiens compte. D’ailleurs, tu remarqueras peut-être que le poids des images en jpg fait presque le même celui des PNG optimisés. Je ne pense pas que la commande convert optimise quoique ce soit.  On garde bien cela en tête lorsqu’on regarde les taux de compression, qui sont bien entendu moins haut en chiffre pur, mais dont le poids est encore plus faible qu’en compression PNG, ou alors presque égale.

1 – Le camaïeu d’une couleur avec du texte (ici, de bleu)

[dt_before_after image_1=”66317″ image_2=”66327″][dt_before_after]

Taille avant/après optimisation : 88,7 / 56,3kb

Gain en pourcentage : 36,52%

2 – Aplat de couleur avec du texte (Rouge)

[dt_before_after image_1=”66318″ image_2=”66328″][dt_before_after]

Taille avant/après optimisation : 49,5 / 31,9kb

Gain en pourcentage : 35,55%

3 – Photo de visage détaillée avec du texte

[dt_before_after image_1=”66319″ image_2=”66329″][dt_before_after]

Taille avant/après optimisation : 187,2 / 114,2kb

Gain en pourcentage : 39,00%

4 – Photo modifié par un filtre type instagram

[dt_before_after image_1=”66320″ image_2=”66330″][dt_before_after]

Taille avant/après optimisation : 134,9 / 86,1kb

Gain en pourcentage : 36,17%

5 – Photo avec de la couleur, des dégradés et du texte

[dt_before_after image_1=”66321″ image_2=”66331″][dt_before_after]

Taille avant/après optimisation : 84,3 / 56,0kb

Gain en pourcentage : 33,57%

6 – Photo noir et blanc avec du texte

[dt_before_after image_1=”66322″ image_2=”66332″][dt_before_after]

Taille avant/après optimisation : 120,1 / 75,8kb

Gain en pourcentage : 36,89%

7 – Photo produit type packshot

[dt_before_after image_1=”66324″ image_2=”66334″][dt_before_after]

Taille avant/après optimisation : 21,5 / 20,8kb

Gain en pourcentage : 3,26%

8 – Photo produit détaillée avec fond

[dt_before_after image_1=”” image_2=””][dt_before_after]

Taille avant/après optimisation : 20,8 / 20,1kb

Gain en pourcentage : 3,37%

9 – Photo produit avec un visage

[dt_before_after image_1=”66325″ image_2=”66335″][dt_before_after]

Taille avant/après optimisation : 27,2 / 26,3kb

Gain en pourcentage : 3,31%

10 – Photo produit en mouvement

[dt_before_after image_1=”66326″ image_2=”66336″][dt_before_after]

Taille avant/après optimisation : 47,1 / 44,7kb

Gain en pourcentage : 5,10%

Les Résultats sous forme de tableau

Compression PNG

Fichier PNG	Taille Origine	Taille Optimisée	Optimisation
#1 Camaïeu	545,7 KB	86,7 KB	84,11%
#2 Aplat	73,2 KB	45,2 KB	38,25%
#3 Visage	918,3 KB	178 KB	80,61%
#4 Filtre Instagram	638.3 KB	128,8 KB	79,82%
#5 Couleurs	455,1 KB	83,9KB	81,58%
#6 Noir et blanc	465,5 KB	114,6 KB	75,38%
#7 Produit Packshot	164,6 KB	21 KB	87,24%
#8 Produit avec fond	97,2 KB	20,2 KB	79,21%
#9 Produit avec visage	153,8 KB	26,5 KB	82,76%
#10 Produit en mouvement	242,4 KB	44,8 KB	81,51%

 Compression JPG

Fichier PNG	Taille Origine	Taille Optimisée	Optimisation
#1 Camaïeu	88,7	56,3 KB	36,52%
#2 Aplat	49,5 KB	31,9 KB	35,55%
#3 Visage	187,2 KB	114.2 KB	39,00 %
#4 Filtre Instagram	134,9 KB	86,1 KB	36,17%
#5 Couleurs	84,3 KB	56,0KB	33,57%
#6 Noir et blanc	120,1 KB	75,8 KB	36,89%
#7 Produit Packshot	21,5 KB	20,8 KB	3,26%
#8 Produit avec fond	20,8 KB	20,1 KB	3,37%
#9 Produit avec visage	27,2 KB	26,3 KB	3,31%
#10 Produit en mouvement	47,1 KB	44,7 KB	5,10%

 

Conclusion

Taux de compression de folie, résultat très souvent indissernable entre l’originale et l’image compressé. D’ailleurs… As-tu remarqué que sur l’une des 10 images, j’ai modifié l’ordre d’apparition de la photo d’origine et de la photo compressée ? Je pense que non. Quand je dis que la plupart du temps, les deux images sont impossibles à discerner.

EWWW est clairement un poids lourd de la compression d’image pour WordPress. Ce plugin devrait être installé par défaut avec WordPress tant il vient réduire drastiquement le poids d’une image sans en altérer la qualité.

Comme tu as pu t’en rendre compte, ce test se concentre uniquement sur les rendus que l’on peut s’attendre à avoir avec le plugin WordPress EWWW Image Optimizer. Pour ce qui est de sa configuration et de sa prise en main, c’est sur un autre billet en préparation 😉