URL: https://linuxfr.org/news/sortie-de-yoga-image-optimizer-1-0
Title: Sortie de YOGA Image Optimizer 1.0
Authors: FLOZz
 Ysabeau 🧶 et Benoît Sibaud
Date: 2021年06月17日T15:38:23+02:00
License: CC By-SA
Tags: optimisation, image, jpeg, png, webp, gtk et python
Score: 78
**YOGA Image Optimizer** est un utilitaire graphique libre (GPLv3) permettant de convertir et d’optimiser des images (on parle ici de réduire le poids des fichiers sans en diminuer la qualité perceptible). Il supporte la plupart des formats courants en entrée et génère en sortie des **JPEG**, des **PNG** et des **WebP** optimisés.
La toute première version est sortie il y a quelques jours, je viens donc vous présenter ce projet (ou plutôt ces projets) sur lequel je travaille depuis quelque temps déjà... 😀️
![Logo de YOGA Image Optimizer](https://tmp.fgsp.org/.dlfp_yogagtk1/yoga-image-optimizer_cover.png)
----
[Site officiel de YOGA Image Optimizer](https://yoga.flozz.org/)
[Dépôt de code de YOGA Image Optimizer](https://github.com/flozz/yoga-image-optimizer)
[Présentation et benchmark de YOGA Image Optimizer](https://blog.flozz.fr/2021/06/14/optimisez-vos-images-avec-yoga-image-optimizer/)
----
## Au commencement il y avait YOGA
Notre histoire commence fin 2017. Dans le cadre du développement d’application Web 3D (WebGL), Wanadev, l’entreprise pour laquelle je travaille, avait besoin d’un outil pour convertir les modèles 3D depuis les formats fournis par nos clients, vers des formats plus adaptés au Web. Et tant qu’à développer une moulinette qui fait la conversion, autant essayer d’optimiser tout ça au passage.
C’est ainsi qu’un collègue et moi-même nous sommes penchés sur le sujet et avons commencés à développer YOGA, le *« Yummy Optimizer for Gorgeous Assets »*. 😀️
**YOGA** est à la fois une **bibliothèque Python** et un **outil en ligne de commande** permettant :
* De convertir des modèles 3D depuis divers formats vers **glTF** et **GLB** en les optimisant un peu au passage. Pour cela, il s’appuie sur la bibliothèque [Assimp](https://github.com/assimp/assimp), à laquelle nous avons contribué pour l’occasion (les formats souhaités n’étaient pas encore supportés, nous les avons donc implémentés dans la bibliothèque).
* Et bien sûr, les textures des modèles 3D étant des images, YOGA peut convertir et optimiser ces dernières.
Dès le départ il a été décidé que le projet serait *open source* ; il s’agit d’un juste retour des choses puisque nous nous basons sur le travail de nombreuses personnes à travers des spécifications et des bibliothèques elles aussi *open source*.
## Puis vint YOGA Image Optimizer
Depuis que YOGA est fonctionnel, je l’utilise pour optimiser les images que je publie sur le Web, et notamment sur mon blog. Avec le temps, j’ai de plus en plus ressenti le besoin d’avoir une interface graphique dans laquelle je puisse déposer mes images et les optimiser en un clic... **YOGA Image Optimizer** était né.
YOGA Image Optimzer et donc une interface graphique écrite en Python / GTK pour la partie image de YOGA.
![Capture d’écran de YOGA Image Optimizer](https://tmp.fgsp.org/.dlfp_yogagtk1/yoga-image-optimizer_screenshot.png)
Son utilisation est très simple : il suffit d’ajouter des images et d’appuyer sur le bouton « Optimiser ». Il est, bien sûr, possible d’effectuer quelques réglages (choisir le format de sortie, la qualité souhaitée pour les formats avec perte, etc.).
Pour le moment YOGA Image Optimizer traite deux images en parallèle quel que soit le nombre de CPU dont dispose votre machine, mais ceci sera configurable dans une future version du logiciel. 😉️
## Assez de teasing, de combien on réduit les images ?
Il est difficile de donner des chiffres précis étant donné que l’efficacité de l’optimisation est variable et dépend du contenu de chaque image, mais je vais tout de même vous donner des ordres de grandeur. Les chiffres présentés ci-dessous sont obtenus en comparant les images optimisées par YOGA à celles encodées par des bibliothèques de référence telles que *libjpeg* et *libpng*.
* Pour les **JPEG**, YOGA réduit le poids des images de **27 %** en moyenne par rapport à *libjpeg*. Pour ce faire il s’appuie sur la bibliothèque [Guetzli](https://github.com/google/guetzli/) développée par *Google Research Europe*.
* Pour les **PNG**, la réduction est de **20 %** en moyenne par rapport à *libpng*. Cette fois-ci ce sont les bibliothèques [Zopfli et ZopfliPNG](https://github.com/google/zopfli) qui sont à l’œuvre.
* Enfin, pour les **WebP**, les gains ne sont que de quelques pourcents seulement. Cela s’explique par le fait que YOGA utilise *libwebp*, comme tout le monde. Il n’existe, en effet, aucune bibliothèque plus performante pour le moment et YOGA se contente donc de pousser les paramètres d’encodage et de supprimer les métadonnées des fichiers.
Pourquoi avoir intégré le format WebP si cela n’apporte finalement pas grand-chose ?
Tout simplement par ce qu’il s’agit d’un format très performant. Une image encodée en WebP avec perte voit facilement son poids divisé par deux par rapport à un JPEG, et une image encodée en WebP sans perte a son poids réduit d’un bon tiers par rapport à un PNG. Il est donc très intéressant de convertir des images vers ce format lorsque cela est possible.
Voici deux petits graphiques pour résumer les gains que l’on peut obtenir avec les différents encodeurs et formats. Celui de gauche permet de comparer les compressions à pertes (JPEG et WebP avec perte), et celui de droite les formats sans perte (PNG et WebP sans perte).
![Graphique comparatif des différents formats et encodeurs](https://tmp.fgsp.org/.dlfp_yogagtk1/yoga_benchmark_diagram_encoders.png)
Les chiffres présentés ici sont issus d’un *benchmark* que j’ai réalisé à partir d’une série d’images variées (dessins, photos, *pixel art*, captures d’écran). Si vous souhaitez en apprendre davantage je vous invite à lire [l’article que j’ai écrit à ce sujet](https://blog.flozz.fr/2021/06/14/optimisez-vos-images-avec-yoga-image-optimizer/). Les images, scripts et données utilisées pour réaliser ce *benchmark* [sont bien sûr disponibles](https://github.com/flozz/yoga-image-benchmark) si vous souhaitez mener vos propres expériences. 😉️
## Où est le piège ?
Évidemment, toutes ces optimisations ont un coût... et il peut être élevé dans certains cas.
Pour les JPEG notamment, YOGA va en moyenne consommer 300 Mo de RAM par mégapixel, et aura besoin de 1 à 5 minutes, toujours par mégapixel de données. Les autres formats ont heureusement des consommations de ressources plus raisonnables. 😅️
Pour mon cas d’utilisation ceci n’est pas un problème car je publie rarement de très grandes images sur le web. La plupart du temps j’ouvre toutes les images d’un article avec YOGA Image Optimizer, je lance l’optimisation avant d’aller manger et il a fini quand je reviens... Mais il est possible que cela soit plus problématique pour d’autres.
## Conclusion
Ce que je vous ai présenté aujourd’hui est la toute première version de YOGA Image Optimizer. Elle me semble suffisamment aboutie pour être partagée, mais il me reste encore beaucoup de sujets sur lesquels travailler. En voici quelques-uns, en vrac :
* Le bouton « Stop » ne permet pour le moment que d’annuler les futures optimisations et ne coupe pas celles déjà commencées. Il s’agit d’une limitation dans l’API Python utilisée pour le *multiprocessing*, mais je vais travailler à corriger ça.
* La ligne de commande de YOGA propose une option pour redimensionner les images, je dois encore l’ajouter à l’interface graphique.
* J’ai [quelques pistes](https://www.reddit.com/r/linux/comments/nyedh4/optimize_your_images_with_yoga_image_optimizer/h1qo9kj/) pour améliorer encore un peu l’optimisation des JPEG et des PNG, il faut que je les creuse (et que je les implémente le cas échéant).
* J’aimerais bien ajouter le support du format AVIF (un nouveau format d’image très prometteur).
* Actuellement YOGA Image Optimizer n’est absolument pas configurable, il faut que je lui rajoute quelques options.
J’espère en tout cas que cet outil pourra vous être utile. Si vous avez des suggestions, des remarques ou des idées pour l’améliorer, n’hésitez pas à les partager, c’est ce qui fait la force du logiciel libre ! 😁️
</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="httpS://linuxfr.org/news/sortie-de-yoga-image-optimizer-1-0.md">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="httpS://linuxfr.org/news/sortie-de-yoga-image-optimizer-1-0.md" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>