Format d'images et formats de secours en web

Introduction

Lorsqu'on souhaite utiliser les derniers formats de fichiers, comme le WEBP et plus récent encore, l'AVIF, il convient de vérifier la compatibilité des navigateurs et de toute façon prévoir un format par défaut si le navigateur n'est pas compatible.

L'intérêt de l'usage des derniers algo. va permettre de réduire le poids de votre image (à qualité ressentie égale), c'est donc moins d'encombrement sur votre serveur, moins de bande passante consommée pour charger l'image.

Même si l'Arcep¹ nous prévient que moins utiliser la voiture et moins manger de viande aura un impact bien plus positif pour votre bilan carbone, les bons usages numériques ne sont pas à négliger.
Et si vous souhaitez rendre accessible votre site dans les zones de guerre ou l'infrastructure réseau est mauvaise voire en très mauvais état, il pourrait être intéressant de se pencher sur ces alternatives moins gourmandes…
Bon Okay, j'habite le bout de la ligne adsl et la bande passante c'est une vraie préoccupation dans ma campagne... Bref.

Je vous propose ici de regarder les quelques formats d'images existants sur la toile, leur compatibilité et les outils de compression.
Et en fin d'article une partie plus technique sur l'usage du "fallback" (solution de secours) lorsqu'on utilise dans une page web, un format d'image récent ou plus ésotérique.

Le WEBP

WebP est un format d’image créé par l’équipe de performance web chez Google. Ce format a été développé dans le but de remplacer les JPEG, PNG, et GIF, tout en ayant une bonne capacité de compression, conservant la transparence et les animations.

En Septembre 2010, il a été annoncé comme étant le nouveau standard ouvert pour les graphiques couleurs-vraies compressés avec perte sur le web, en produisant des fichiers plus légers mais de qualité comparable aux JPEG.

Il a été rendu compatible avec les images sans pertes et transparentes en 2012, ce qui a fait de WebP une alternative au format PNG.

La compression avec perte de WebP utilise l’encodage prédictif pour encoder une image, la même méthode utilisée par le codec vidéo VP8 pour compresser les images-clés dans les vidéos. L’encodage prédictif fonctionne en utilisant les valeurs des blocs de pixels voisins pour prédire la valeur d’un bloc, puis encode simplement la différence.

La compression sans perte de WebP utilise des fragments d’image déjà vus pour reconstruire les nouveaux pixels, et utilise une palette locale si aucune correspondance n’est trouvée. source ²

On retiendra principalement que :

• WebP permet de réduire le poids des images de 26 % par rapport à PNG ;
• et de -25 à -34 % par rapport à une version JPEG.
• WebP conserve la couche de masque (la transparence), la couche d'alpha, comme le PNG
• il conserve les metadatas (XMP).

Des outils

Pour compresser les images en webp il faut s'armer de courage car les éditeurs de logiciels de retouche d'images comme Adobe ou Affinity ne propose

Depuis Photoshop (MacOS, Win)

Il faut "enregistrer une copie" et choisir le format webp. Une fenêtre d'options s'ouvre... c'est moins "interactif" que l'"export (hérité) pour le web", il n'y a pas de prévisualisation.

les options du format webp.

(Cette interface, "export (hérité) pour le web" est vieillissante, elle n'a pas été mise à jour par Adobe depuis un moment, le format webp n'est pas disponible dans cette partie du logiciel... Cette partie est encore présente mais a été enterrée dans les menus...) l'outil d'"export (hérité) pour le web" au fin fond des menus.

Avec WebPonize (MacOS)

WebPonize est une app MacOS. On lance l'app et on pose les fichier en drag an'drop et ça compresse.
C'est un peu une boite noire (les réglages de compression sont cachés dans les préférences de l'app) mais le résultat est bon avec une diminution du poids des fichiers traités (l'interface vous indique le gain sur chaque fichier)

Compatibilité

Comme on peut le voir sur l'image, la compatibilité n'est pas complète. Bien que le format existe depuis plus de 10 ans, Apple a trainé les pieds pour adopter le format sur sur ses navigateurs.
Autant sur MacOS, ça a peut d'impact, Safari tourne à moins de 10% de part de marcher (Firefox est en dessous, gloups!). Autant sur iOS c'est plus problématique, les utilisateurs installent rarement un navigateur alternatif sur leur téléphone, Safari est à 25%.

Sur desktop, il faut avoir installé MacOS BigSur (2020) à minima et Safari 14. Sur mobile, il faut iOS 14 (2020) pour profiter du support du format webp. Donc pas de vieux "crincrins" !

L'AVIF (AV1 Image File Format)

L' AVIF (AV1 Image File Format) est un format libre et gratuit (royalties free) d'image qui permet un gain de taille des fichiers (poids) à qualité égale.

Le format permet plusieurs images dans le fichier. Mais à ce jour (Sept. 22) aucun navigateur ne le propose. Je ne suis pas sûr qu'un outils permette de compresser cette version.

Il permet n'importe quel espace colorimétrique, y compris les profils ICC, ISO/IEC CICP et la gamme de couleurs étendue(wide color gamut). Cela produit automatiquement des images de la plus haute qualité en acceptant une plus grande gamme de couleurs que les autres formats d'image.

D'autres caractéristiques incluent une profondeur de couleur de 8, 10 et 12 bits, un grain de film. Il permet un sous-échantillonnage de la chrominance, il supporte en effet, le 4:2:0, 4:2:2, 4:4:4 (c'est un codec issu de la vidéo).

Si le format WEBP promet 30 à 40% d'économie par rapport au format JPEG, le format AVIF promet 50% de poids du WEBP et 50% du JPEG. Ce qui est plutôt intéressant pour limiter son usage de la bande passante.

Enfin comme le WEBP, il dispose d'un mode Lossless (sans perte), avec un gain de poids.

Le défaut majeur de l'AVIF est son mode de rendu dans une page web. Contrairement au format jpeg ou png qui disposent d'un rendu progressif, l'AVIF n'en dispose pas et l'image devra être totalement chargée pour apparaitre dans le navigateur (c'est du tout ou rien).

Compatibilité

Comme on peut le lire sur le tableau, le format est "peu" reconnu (Mars. 2022). Cela s'arrange avec les dernières versions de navigateur (encore faut-il que les utilisateurs acceptent la mise à jour).
Comme d'habitude Apple traine les pieds sur les intégrations de nouveaux formats, nous force la main sur les MàJ et ne donne la compatibilité qu'aux versions de Safari et Safari Mobile sur ses derniers OS (MacOS 13 Ventura et iOS 16) (grrrrr! Ça viendra peut-être plus tard.)

Sur desktop, le format est reconnu sur Chrome et Firefox respectivement depuis 2020 et 2021.
Sur mobile, il faut les dernières versions de navigateur (Sept. 2022) pour qu'il soit reconnu.

éléments de Comparaison

Des outils

Pour le moment, le champs de applications est un peu vide, on notera quand même:

Paint (Win)

enregistre les images en avif.

GIMP (Win, Linux)

Oui le logiciel open source GIMP propose l'enregistrement dans ce format.

Sur MacOS pour le moment, rien (mars 2022)

Squoosh.app (en ligne)

Squoosh CLI

L'outil geek a installer via npm (il faut donc avoir installé npm [tonton Goog pour faire])

npm i -g @squoosh/cli

et pour encoder une image

squoosh-cli --avif '{speed: 2}' image.ext

Pour donner le chemin complet de l'image il suffit sur MacOS de glisser le fichier dans la fenêtre de Terminal.
J'ai testé dans le train, mon fichier a mis qlq dizaines de secondes à compresser

Le JPEG2000

Apparu comme son nom l'indique, à la fin des années quatre-vingt-dix. La compression est meilleure que son grand frère. De mémoire — j'ai connu l'apparition de ce format —, on peut définir des zones qui n'ont pas la même qualité de compression (ndr: c'est un algo pré-IA, on fait à la main), il encode les couleurs en 16bits/couche contrairement au JPEG qui est en 8bits/couche .
Dans le tableau de compatibilité seule Apple y a cru. Donc excepté Safari et Safari sur iOS, aucun navigateur ne supporte ce format.
Fin de l'histoire.

Le JPEGXL

C'est la version la plus récente du format JPEG, c'est le compétiteur de l'avif (compression équivalente) avec cependant moins de caractéristiques.
Et comme on peut le voir, pas de compatibilité sauf à activer des flag dans les navigateurs…
Bis repetitam.

L'APNG (Animated Portable Network Graphics)³

En 2004, deux développeurs de Mozilla, Stuart Parmenter et Vladimir Vukicevic, ont publié une première spécification du format APNG pour permettre l’enregistrement d’éléments de site Web animés tels qu’un throbber (graphique qui montre une action effectuée). Auparavant, Mozilla avait cessé de prendre en charge les animations MNG (Multiple-Image Network Graphics) qui avaient été utilisées pour ce type de composants, mais qui impliquaient une trop grande bibliothèque de décodeurs. Le décodeur d’APNG (qui a été largement repris du format PNG) est beaucoup plus petit en comparaison. Bien que les PNG animés soient aussi souvent utilisés, l’APNG n’a toutefois pas été admis comme une extension officielle - surtout parce que la majorité des responsables considéraient le PNG comme un format unique pur. source ⁴

C'est une alternative bien plus interessante que le GIF qui est un vieux format avec une compression de son temps, donc peu efficace. Le GIF compresse en ligne, pour économiser des informations, il regroupe les pixels de la même couleur (palette 8bits maximum). Forcément avec cette technique "d'optimisation", le GIF est peu efficace avec des images de type photographique. Il sera bien plus convaincant pour compresser une image montrant du texte sur un fond coloré.

APNG = 30 823 bytes ©⁵

GIF = 43 132 bytes ©⁵

Compatibilité

Le format APNG est rétro compatible avec le format PNG. Les logiciels capables de lire le format PNG, peuvent accéder à la première image d'un fichier APNG.

Comme on peut le voir sur le tableau, le format est largement supporté par les navigateurs et ce depuis un bon moment.

export APNG

Son principal défaut va être le manque d'outils intégrés dans nos suites logicielles. Pas d'export en APNG depuis Photoshop, pas plus depuis Affinity. J'ai trouvé 2 applis (la même en fait), une pour MacOS, une pour Win.

APNG Assembler (win) par Max Stepin

APNGb (MacOS) par Stefan Godoroja

Basé sur APNG Assembler et APNG Disassembler https://github.com/shgodoroja/APNGb

La technique du fallback

en HTML

Même si le WEBP a un taux d'usage de 91% et l'AVIF de 68%, il est toujours bon de penser à ce petit pourcentage d'utilisateurs qui ne peuvent pas lire les formats récents.
Il existe donc une solution technique en HTML pour donner plusieurs formats à votre média.
Vous savez déjà — sans doute — le faire avec la vidéo et ses 3 formats/plate-forme (bien que seul le mp4 soit suffisant et que de nouveaux codecs plus performants se généralisent).
On peut utiliser le terme <picture>plutôt qu'<img> et ajouter des sources, comme pour <video>, de cette façon.

<picture>
  <source type="image/avif" srcset="cow.avif" />
  <source type="image/webp" srcset="cow.webp" />
  <img src="cow.jpg" srcset="cow.png" alt="Cow" />
</picture>

Les formats sont placés par ordre d'intérêt, l'AVIF en premier avec le meilleur rapport poids/qualité, puis le WEBP.

Vous remarquerez, la balise <img> placée dans <picture>. Si le navigateur (disons au hasard, Internet Explorer, toujours lui ou son cousin en moins pire: Edge) ne supporte pas la balise <picture>, il ne lira que la balise <img> et le fichier en JPEG.

Enfin le srcset permet de charger un format adaptatif. Il est logiquement constitué d'une URL et d'un facteur 2x ou 3x pour les device avec des écrans hautes résolutions (mobiles et ordinateurs avec écrans Retina™ (2x)) ou d'une largeur d'écran avec un descripteur (200w) [non supporté en sept. 2022].

Par défaut, si il n'y a pas de chiffre, la ressource est considérée en 1x.⁶

en CSS

La fonction image-set sur MDN propose une solution identique en css.

.box {  
    background-image: url("image.jpg");
    /* fallback */
    background-image: image-set(    
        url("image.avif") type("image/avif"),
        url("image.jpg") type("image/jpeg")
    );
}

À la date (mars 2022), "tous" les navigateurs supportent css image-set().
Safari et Safari Mobile ne supportent image-set() que sur iOS16, il faut préfixer -webkit- pour les autres versions (depuis la version 6 (2012)).
Depuis juillet 2021, FF est compatible.

Seule la résolution en x (x1, x2,x3) est suportée (pas la résolution en w).

Pour éviter les problèmes (avec FF notamment), il faut faire précéder la déclaration background-image: image-set() par une version générique, avec background-image: url() (puis seulement déclarer image-set()).