Éco-conception et dithering

S’il y a bien un truc qui m’énerve, ce sont les sites soit disant « éco-conçus » qui appliquent un effet de « dithering » (diffusion d’erreur en français, aussi parfois désigné comme un effet de tramage) sur leurs images.

Il y a trois ans, déjà, je m’insurgeais devant ce Guide d’écoconception de services numériques :

Pour un effet visuel tramé et old school, souvent marque de fabrique des sites écoconçus, il existe aussi le site : Dither it!.

Dernier exemple en date, je suis tombé ce mois-ci sur cet article de Reporterre sur « comment le design peut rendre le numérique écolo » :

Le site du Low-tech lab, conçu selon des principes low-tech : un affichage très sobre et des photos très légères grâce à leur « tramage » particulier et une palette réduite à quatre couleurs seulement.

Ou encore sur ce site de l’opérateur énergétique Dalkia :

Nous avons cherché à alléger le plus possible les pages de notre site pour réduire leur poids en octets et ainsi limiter l’énergie dépensée par les serveurs pour les stocker et par les utilisateurs pour les consulter. Ce qui explique, entre autres, que les photos y soient toutes traitées en une seule couleur et avec un nombre de pixels assez faible.

(Déclarent-ils avec une image d’entête de 720×658 px, compressée en WebP pour un poids de 340 Ko.)

Alors, écoutez, je le dis ici haut et fort : non, un effet de tramage ne rend pas des images très légères et n’aide pas vraiment à l’éco-conception.

Du moins, pas toujours.

C’est compliqué.

Reprenons cet exemple du site du Low-tech Lab. L’image sur la page d’accueil fait 1200×800 px, compressée en PNG pour un total de 87,77 Ko. 87 Ko, c’est peu si on compare aux dizaines de mégaoctets des mastodontes du web. Mais c’est déjà beaucoup si on se dit qu’une page web peut faire 2 Ko. (Cf. « C’est juste une page web. Combien est-ce que ça peut peser ? 10 Mo ? »)

Pour voir comment et jusqu’où on peut compresser une image, j’ai pioché un exemple sur Unsplash. L’image originale fait 2400 × 1600, compressée en JPG pour un total de 931 Ko.

Voici ce qu’on obtient en recompressant l’image depuis Photoshop :

• Version 1. Image originale, 2400 × 1600, JPG : 931 Ko.
• Version 2. Image compressée sous Photoshop (option « clic droit > Exporter sous… » sur un calque), 1200×800, JPG (qualité 6) : 410 Ko.
• Version 3. Image compressée sous Photoshop (menu « Fichier > Exportation > Enregistrer pour le web »), 1200×800, JPG (qualité 60) : 246 Ko.

À ce stade, l’image reste de bonne qualité et la perte lors de la compression reste difficilement visible à l’oeil nu.

Passons alors à l’étape suivante en utilisant Squoosh (toujours depuis l’image originale ci-dessus, et toujours avec un redimensionnement en 1200×800 pour chaque image).

• Version 4. MozJPEG, qualité 80 : 158 Ko. La baisse de qualité commence à légèrement se faire sentir.
• Version 5. MozJPEG, qualité 60 : 87 Ko. La compression se ressent un peu plus sur certains détails. Mais on arrive à un poids équivalent à l’image tramée du site Low-tech Lab. Et sans utiliser de tramage.

Passons alors au tramage. (Toujours sur Squoosh, toujours en 1200×800, avec l’option « Reduce Palette » limitée à deux couleurs.)

• Version 6. MozJPEG, qualité 60 : 102 Ko. Cette image tramée est plus lourde que la version 5 non tramée ! Et pour une bonne raison : JPG n’est pas un format d’image efficace pour des images à palette réduite.
• Version 7. OxiPNG : 51 Ko.

Testons maintenant l’outil Dither it!.

• Version 8. Atkinson : 273 Ko.
• Version 9. Floyd Steinberg : 261 Ko.
• Version 10. Bayer (Ordered) : 114 Ko.

Le résultat est catastrophique et la compression PNG de Dither it! n’est pas bonne du tout. Mais en repassant les trois dernières versions dans Squoosh, avec l’option palette réduite et l’export en OxiPNG, on obtient des résultats intéressants.

• Version 11. Atkinson + Squoosh : 99 Ko.
• Version 12. Floyd Steinberg + Squoosh : 97 Ko.
• Version 13. Bayer (Ordered) + Squoosh : 32 Ko. Yes ! On passe enfin sous la barre des 50 Ko !

Peut-on faire encore plus petit ? Avec le format PNG à palette réduite, la solution consiste à réduire la taille de l’image en elle-même. En passant donc à un format deux fois plus petit, à 600×400 px, on atteint…

• Version 14. Bayer (Ordered) à 600×400 + Squoosh : 10 Ko.

Quid des formats d’images WebP, AVIF et JPEG XL ?

• Version 15. WebP qualité 50 : 80 Ko.
• Version 16. AVIF qualité 50 : 65 Ko.
• Version 17. JPEG XL qualité 50 : 57 Ko.

Nul.

Peut-on faire mieux sans passer par un effet de tramage ?

• Version 18. MozJPEG qualité 3 à 600×400 : 2 Ko.
• Version 19. WebP qualité 0 à 600×400 : 5 Ko.

Voilà donc à quoi peut, selon moi, ressembler une image éco-conçue.

C’est moche, hein ? Mais c’est peut-être justement le signe que cette image n’est pas utile en premier lieu. Et peut-être que la vraie éco-conception, ce sont les images qu’on abandonne en chemin.

Moralité : si on vous a vendu du dithering en guise d’éco-conception mais que vos images sont aussi lourdes que des JPG bien compressés, alors… votre tramage se rapporte à votre plumage.