Imaginez ceci: le meilleur format d'image pour le Web en 2019

JPEG, WEBP, HEIC, AVIF? Ce guide vous aidera à choisir.

Après des décennies de domination inégalée du JPEG, ces dernières années ont vu l'apparition de nouveaux formats - WebP et HEIC - qui défient cette position. Ils ne bénéficient que d'un support partiel, mais significatif, des principaux acteurs parmi les navigateurs Web et les systèmes d'exploitation mobiles. Un autre nouveau format d'image - AVIF - devrait entrer en scène en 2019 avec la promesse de balayer l'ensemble du Web.

Dans cet article, nous commencerons par une courte révision des formats classiques, suivie d'une description de WebP et HEIC / HEIF. Nous passerons ensuite à l'exploration d'AVIF et terminerons par un résumé rassemblant tous les points principaux.

Les commentaires sur les avantages et les inconvénients reposent à la fois sur l'examen des rapports faisant autorité disponibles et sur des observations de première main lors du développement et du déploiement d'outils pour les pipelines d'optimisation d'image dans les flux de travail de commerce électronique.

Formats d'image classiques pour le Web avec prise en charge universelle

Rappelons-nous, par ordre chronologique, les trois formats classiques les plus importants pour les images Web.

GIF

GIF prend en charge la compression sans perte LZW et plusieurs images qui nous permettent de produire des animations simples.

La principale limitation de ce format est qu'il est limité à 256 couleurs. C'était raisonnable à l'époque de sa création à la fin des années 80, puisque la même limitation s'appliquait aux écrans existants. Cependant, avec l'amélioration de la technologie d'affichage, il est devenu évident qu'il n'était pas approprié de reproduire des dégradés de couleurs lisses, comme ceux trouvés dans les images photographiques. Nous pouvons facilement repérer la bande de couleur qu'il produit.

Cependant, GIF permet une animation légère avec un support universel. Cette fonctionnalité a maintenu le format en vie jusqu'à aujourd'hui dans des cas d'utilisation peu sensibles aux problèmes de qualité, les plus courants étant de petites images animées avec peu ou pas de couleurs.

JPEG

Le roi des formats d'image pour le Web a été développé pour prendre en charge les flux de travail de photographie numérique.

Avec une profondeur habituelle de 24 bits, il offre une résolution de couleur beaucoup plus élevée (à ne pas confondre avec la plage ou la gamme) que l'œil humain peut discerner. Il prend en charge la compression avec perte en exploitant les mécanismes connus de la vision humaine.

Nos yeux sont plus sensibles aux échelles moyennes qu'aux détails fins. Par conséquent, JPEG nous permet d'éliminer les détails fins (fréquences spatiales élevées), d'une quantité contrôlée par un facteur de qualité. Moins de qualité signifie que moins de détails sont préservés. De plus, nous sommes beaucoup plus sensibles aux détails à fort contraste de luminance qu'aux détails à contraste chromatique uniquement.

Ainsi, JPEG recodifie en interne les images RVB (rouge, vert et bleu) en une luminance et deux canaux de chrominance. Cela nous permet d'utiliser le sous-échantillonnage de la chrominance pour éliminer plus de détails uniquement dans les canaux de chrominance. Il est à noter que JPEG codifie les images en blocs de 8x8 pixels.

À mesure que nous réduisons le facteur de qualité et / ou appliquons un sous-échantillonnage de chrominance plus agressif, nous commençons à obtenir des artefacts croissants de sonnerie, de halos, de blocage ou de flou. Un problème avec JPEG est que selon le contenu de l'image, des artefacts peuvent apparaître à des valeurs de facteur de qualité différentes. La différence la plus folle apparaît lorsque l'on compare les effets de la photographie naturelle avec les effets des illustrations. Étant donné que les illustrations (formes, polices) reposent généralement sur des arêtes vives, elles commencent à produire des artefacts même pour de petites quantités de détails supprimées.

Pour les photos, JPEG offre facilement une réduction du poids du fichier d'un facteur 10 avec des artefacts à peine visibles, par rapport à la compression sans perte.

PNG

Ce format graphique sans perte a été développé pour remplacer le GIF, résolvant ses problèmes de bandes de couleurs (et de licence). Il était nécessaire pour les images comportant une quantité considérable d'œuvres d'art, pour lesquelles JPEG produisait de gros artefacts même avec des taux de compression minimes.

Il prend en charge la transparence et une compression améliorée par rapport au GIF. Puisqu'il ne supprime pas les informations, PNG ne produit pas d'artefacts. Bien entendu, cela se fait au détriment d'un poids d'image plus lourd en présence de nombreux dégradés de couleurs différents, par rapport à la compression avec perte.

Il réussit à exploiter une caractéristique fréquente des œuvres d'art: contrairement à la photographie - qui présente un continuum de couleurs avec des variations subtiles - les images d'œuvres d'art comportent généralement peu de couleurs bien définies.

Ainsi, le PNG compresse les images en mappant de grandes quantités de pixels sur une simple palette discrète et en économisant beaucoup de bits en conséquence. Comparé au GIF, il offre une qualité bien supérieure avec généralement beaucoup moins d'octets.

Nouveaux arrivants avec support partiel: WEBP et HEIC basés sur HEVC

Les mécanismes utilisés par les codecs vidéo pour compresser les flux peuvent être classés en deux types principaux: inter-image et intra-image. Alors que le premier exploite les redondances dans le temps, les mécanismes intra-trame se concentrent sur la réduction de la redondance à l'intérieur d'une trame donnée, sans aucune dépendance vis-à-vis du reste. Ce mécanisme de compression peut être appliqué aux images fixes.

L'explosion du partage vidéo - avec les réseaux mobiles en son cœur - et l'augmentation constante de la résolution d'affichage ont motivé les efforts sur de nouvelles normes de codage pour atteindre la plus grande efficacité possible en compression.

Ainsi, de nouveaux formats d'image émergent en tant que dérivés des nouvelles normes de codage vidéo. Ces nouveaux formats d'image offrent des ensembles de fonctionnalités plus larges que JPEG et promettent des économies significatives de poids de fichier avec une qualité visuelle améliorée.

WEBP

Google a développé ce format dans le but de fournir un format d'image unique compatible avec le Web pour traiter tous les cas d'utilisation typiques.

Surtout, il cherche à obtenir des images plus légères que JPEG, sans pénalités sur la qualité visuelle. Il utilise des opérations plus complexes - comme la prédiction de bloc - et est un dérivé du codec vidéo VP8. Il prend en charge la compression sans perte et contrairement au JPEG, il permet la transparence et les animations qui peuvent combiner des images codées avec une compression sans perte et avec perte.

En principe, il devrait remplacer les formats JPEG, PNG et GIF. Un inconvénient important est le manque de soutien universel. Jusqu'à récemment, WebP était limité aux logiciels soutenus par Google comme le navigateur Chrome et les applications natives d'Android.

Cependant, avec l'annonce qu'Edge et Firefox (à l'exception d'iOS Firefox) introduiront le support WebP en 2019, il gagne évidemment du terrain. Il convient également de noter qu'Apple - Safari et iOS - ne prend pas encore en charge WebP.

HEIC / HEIF

Ce format apporte une évolution significative à deux égards.

Premièrement, le conteneur de fichiers prend en charge le plus grand ensemble de fonctionnalités parmi les formats d'image disponibles. Il prend en charge, par exemple, les images multi-images avec compression multi-images - une caractéristique clé pour des images HDR, multi-focus ou multi-vues efficaces.

Secondly, it supports many types of non-image data with a remarkable flexibility. Currently, most images using this container are compressed with a derivative for images from the H265/HEVC video codec, developed to efficiently cope with the 4k and 8k resolutions featured by the latest generation displays. HEVC coding involves more complex operations with fewer restrictions than JPEG. It achieves a much higher compression efficiency at the cost of slightly higher coding times — not a problem at all in web workflows.

Like H265, HEIC based on HEVC is backed by Apple. It has native support in iOS and macOS, but — mostly due to patent and licensing issues — it is not supported by the rest of platforms (Android, Windows). Even in macOS, Safari doesn't support it. iOS apps appear to be the only viable usecase for HEIC in the web.

So a big question arises: should we offer WEBP/HEIC alternatives and JPEG, with PNG versions as a fallback?

Let’s look at each case...

Should I serve WEBP derivatives?

Google claims that this format produces much lighter images than JPEG with comparable quality. However, independent tests have pointed that this result is not consistent across different measures of quality, and weight reduction is, in most cases, balanced by increasing blurriness.

In our own tests with ecommerce images, we saw file savings for WebP, but at the price of more blur and less detail. Although, we also saw less risk of ringing and blocking artifacts, which we’d consider more visually annoying than blur.

As WebP lacks support by Apple browsers and operative systems, we do not generally recommend serving WebP derivatives competing with JPEG. Such moves would increase media management complexity with limited benefits.

This situation would change if Apple started supporting WebP.

If this were the case, then the extended feature set of WebP and the lighter images produced may be worth its use, effectively simplifying image management workflows.

To try WebP yourself, a classic tool like ImageMagick is a good option. It makes easy-to-compare image versions with different settings of quality and resolution for both WebP and JPEG. Results can be viewed with Chrome.

# Convert to WEBP quality 60 convert input.jpg -quality 60 output_60.webp # Convert to JPEG quality 60 convert input.jpg -quality 60 output_60.jpg # Convert to WEBP quality 60 and width 450px convert input.jpg -resize 450 -quality 60 output_450_60.webp

Different combinations of quality and resolution will have different effects in each case, as the compression algorithms work differently. So, check your relevant file sizes on several images to get a grasp of the potential savings and the best settings for a given use case.

Should I serve HEIC derivatives?

The advantage of HEIC (over JPEG) is clear. Weight reduction is consistently significant — about 50% — without loss of visual quality. The feature set supported is simply amazing.

The problem again is browser and operative system support.

Given the patent issues of HEVC and the hefty royalties associated, we can expect support to remain restricted to those in the Apple world. Since JPEG is already efficient in compressing images, the 50% of something small might not be worth enough to add complexity to our image processing workflow.

Certain cases using large images, with a major interest in visual quality AND with a large percentage of Apple devices in their user base should consider serving this format.

Performing tests with HEIC is very easy with a Mac. Preview allows us to export an image to HEIC and JPEG with different quality values and different resolutions. You won’t need to run many tests to see the clear and systematic difference between them.

If you want to try something more flexible that may be integrated in a web image processing workflow, GPAC is worth a look.

What about AVIF?

AVIF is the last of our contenders.

Like WebP and HEIC based on HEVC, AVIF is a derivative of the latest efforts in video standards. It also uses HEIF containers and so supports a complete feature set, encompassing all the main formats available. It brings much higher efficiency in compression inherited from the use of AV1 intra-frame coding mechanisms. These advantages make this format compelling.

Another significant advantage comes from the Alliance for Open Media, the large consortium behind its development as a fully open approach, with an open license, free of royalties. Big players like Google, Netflix, Adobe, Mozilla, Microsoft, Facebook and Amazon — major actors in the web graphics and video scene — are backing this new format and making a case for a fast and wide adoption, both in software and hardware. While the stream format was frozen in March 2018 with a reference code available, the first devices with hardware support for AV1 are expected by the end of 2019.

At the time of writing this article, the open source implementation of AV1 available may be still considered experimental and not suitable for production.

Summary

JPEG will remain the king format for general images for web in 2019, and PNG will remain as a default option for images with significant artwork.

The reason? Universal support.

Anything that opens an image will open JPEG or PNG in 2019, just like in previous years and decades! So no doubt that these universal formats will remain in place for some time yet.

The benefits of WebP remain controversial. A clear advantage of WebP is its ability to also replace PNG, potentially simplifying image processing workflows. However, without universal support this advantage vanishes. This may change only if Apple changes their mind and WebP finally gets universal adoption, then it could be used as a replacement for all JPEG, PNG and GIF images.

In contrast, HEIC images based on HEVC do offer clear benefits, especially for large resolutions. If traffic of iOS users is relevant for a website with large heavy images, it may be worth considering serving HEIC alternatives for them, with potential UX improvements, especially for slow mobile connections. Besides speeding up, HEIC assures quality, almost free of the annoying blocking and ringing artifacts that plague aggressive JPEG policies.

Although AVIF is expected for 2019, support and adoption will take time. But for sure, it is an image format to keep under your radar for the near future.

Of course, the use of a cloud service -through an image optimization API or an image optimization plugin- will always remain an easy and straightforward alternative for getting the job done.