[BP#80] Optimiser les images bitmap

[DocRoms]

La règle BP#80 stipule :

---

Règle
Les images bitmap représentent souvent la majorité des octets téléchargés, juste avant les bibliothèques CSS et JavaScript. Leur optimi- sation est donc cruciale pour réduire la bande passante consommée. La première étape consiste à choisir le bon format entre bitmap (JPEG, PNG, GIF, etc.) et vectorielle (SVG).

Les images matricielles doivent être réservées essentiellement aux photos et aux éléments de l’interface qui ne peuvent pas être pris en charge par des icônes ou des styles CSS.

Le choix du format bitmap dépend des caractéristiques de l’image : noir et blanc ou couleur, palette de couleurs, besoin de transparence… Parmi ces caractéristiques, le fait de pouvoir dégrader l’image définitivement (lossy) oriente plutôt vers les formats JPEG et WebP (Google), tandis qu’un besoin de transparence et/ou l’impossibilité de dégrader l’image (lossless) orientera plutôt vers GIF ou PNG.

Des outils tels que pngcrush, ImageMagick ou jpegtran vous aideront à réduire au minimum le poids des images matricielles.

Exemple
Gain potentiel : 25 % de gain au minimum en jouant sur la palette de couleurs et le taux de compression, et jusqu’à plus de 80 % par rapport à une image matricielle non compressée. En moyenne, 30 % de poids en moins (par rapport à JPEG) avec WebP.

---

Cette règle mérite une actualisation, on ne parle ni de JPEG XL, ni d'AVIF. Alors que ce dernier format peut, dans certains cas être bien plus adapté que le SVG ( cf https://www.fasterize.com/fr/blog/webp-avif-compresser-images/) .

⚠️ Dans certains cas, nous pouvons désormais avoir des images Bitmap (.avif), plus performante que des images vectorielles (.svg)

Quelques liens pour vous faire des idées 💡 :

• Atouts du JPEGXL ➡️ https://cloudinary.com/blog/how_jpeg_xl_compares_to_other_image_codecs
• Comparatif JPEG XL ↔️ AVIF ➡️ https://avif.io/blog/comparisons/avif-vs-jpegxl/
• (et Bientôt) le WEBP2 (google) ➡️ https://chromium.googlesource.com/codecs/libwebp2/

[rlemaire]

Je ne me souviens pas d'avoir déjà vu une image au format bitmap (.bmp) sur le web en plus de 15 ans.

Donc je pense aussi que cela mérite une actualisation, avec des pistes pour optimiser les images avec les formats le plus à jour qui restent compatibles avec une large gamme d'appareils et d'OS.

Rien sur webp @DocRoms ?

[DocRoms]

Je penses que dans cette règle, le terme bitmap ne parle pas du format (.bmp) mais du type d'image ( bitmap ≈ image matricielle !== image vectorielle) cf https://fr.m.wikipedia.org/wiki/Image_matricielle .

🤔 Il faudrait peut être aussi replacer 'bitmap' par 'matricielle' pour éviter la confusion ? Au début j'avais pas compris non plus 😅

Qu'entends-tu par 'rien pour le webp' @rlemaire ? Des sources ? Des préconisations ?

[rlemaire]

Oui c'est source de confusion.

Et pardon je vois que tu parles de webp. En fait mon commentaire est inutile 😅

[arnolem]

En complétement de ce qui a été dit, je ne connais aucun cas où GIF serait un bon choix.
A titre de comparaison, je pense qu'un PNG avec 256 couleurs sera toujours meilleurs en terme de compression qu'un GIF.

[Christophe-Cl]

le gif reste intéressant pour les couleurs en aplat

[tbroyer]

Plus intéressant que le PNG-8 ? 🤔

Sauf erreur, n'importe quel format lossless sera intéressant pour les aplats de couleurs et PNG-8 et WebP lossless font (presque ?) toujours mieux que GIF.

[Christophe-Cl]

Test depuis Photoshop d'export d'une image en aplat :
GIF : 37,5 Ko vs. PNG-8 : 40,4 Ko.
Il n'y a qu'en utilisant un outil de compression en ligne, que je peux diminuer le PNG-8 à 36 Ko (-13%) avec imagecompressor, voir jusque -24% avec resizepixel. Le GIF reste inchangé car la compression de départ est optimale.

[tbroyer]

Tu as essayé avec quelque chose comme https://squoosh.app ? Quid de pngcrush, imagemin et autres ? (le type d'outils intégré dans les pipelines d'assets type Webpack/Parcel/ViteJS ou NextJS/etc.)

[Christophe-Cl]

j'ai essayé les 3 cités, mais pas tous :)

[tbroyer]

Il faudrait aussi reformuler parce que WebP a une variante lossless et supporte la transparence: https://developers.google.com/speed/webp

[yannkozon]

La bonne pratique mérite peut-être de s'ouvrir à l'ensemble des images et pas uniquement bitmap.
L'intitulé pourrait être "Les images d'un site sont optimisées".

[arnolem]

Je pense effectivement qu'il faudrait écrire les règles de manière "intemporel" dans l'idéal

[florinesueur]

En effet, je suis aussi pour englober l'ensemble des images cependant pour moi optimiser comprend aussi le redimensionnement par exemple. Ici, il me semble que nous sommes sur un choix de format et surtout de compression.

[arnolem]

On est d'accord,
Par contre, je ne ferais pas rentrer ici les optimisations HTTP comme les sprites, base64, lazy loading, ...
Mais bien la source de l'image (taille, optimisation, format, compression, monochrome, ...)

[ACTLEM]

Note équipe projet: En phase sur l'amélioration de cette BP:

• Ajout d'autres formats plus adaptés (JPEG XL, AVIF, WEBP2, ...)
• Supprimer la référence au GIF (PNG-8 à la place)
• Enlever la notion de bitmap pour englober toutes les images
• Insister sur le format, compression, monochrome, ...

Issue créée: #183

[ldevernay]

Je me permets de faire remonter cette réponse qui me semble très judicieuse mais n'est pas encore prise en compte dans la BP.