これを想像してください:2019年のウェブに最適な画像形式

JPEG、WEBP、HEIC、AVIF?このガイドは、選択に役立ちます。

JPEGの比類のない優位性の数十年後、近年、この位置に挑戦する新しいフォーマット(WebPおよびHEIC)の出現を目撃しています。それらは、Webブラウザやモバイルオペレーティングシステムの主要なプレーヤーによる部分的ではあるが重要なサポートしかありません。もう1つの新しい画像フォーマットであるAVIFは、ウェブ全体を一掃することを約束して、2019年に登場する予定です。

この記事では、クラシック形式の短い改訂から始め、次にWebPとHEIC / HEIFについて説明します。次に、AVIFの調査に移り、すべての要点をまとめた要約で終わります。

長所と短所に関するコメントは、eコマースワークフローの画像最適化パイプライン用のツールの開発と展開中に、利用可能な信頼できるレポートのレビューと直接の観察の両方に基づいています。

ユニバーサルサポートを備えたウェブ用のクラシックな画像フォーマット

Web画像の3つの最も重要な古典的な形式を時系列で思い出してみましょう。

GIF

GIFは、LZWロスレス圧縮と複数のフレームをサポートしているため、簡単なアニメーションを作成できます。

この形式の主な制限は、256色に制限されていることです。同じ制限が既存のディスプレイに適用されたため、これは80年代後半に作成されたときは合理的でした。しかし、ディスプレイ技術の進歩により、写真画像に見られるような滑らかな色のグラデーションを再現することは適切ではないことが明らかになりました。それが生み出すカラーバンディングを簡単に見つけることができます。

ただし、GIFでは、ユニバーサルサポートを備えた軽量アニメーションが可能です。この機能は、品質の問題に敏感ではないユースケースで今日までフォーマットを維持してきました。最も一般的なのは、色がほとんどまたはまったくない小さなアニメーション画像です。

JPEG

Webの画像形式の王様は、デジタル写真のワークフローをサポートするために開発されました。

通常の24ビット深度では、人間の目で識別できるよりもはるかに高い色解像度(範囲や色域と混同しないでください)を提供します。人間の視覚の既知のメカニズムを利用することにより、不可逆圧縮をサポートします。

私たちの目は、細部よりも中程度のスケールに敏感です。その結果、JPEGを使用すると、品質係数によって制御される量だけ、細かい詳細(高い空間周波数)を破棄できます。品質が低いということは、保存される詳細が少ないことを意味します。さらに、色のコントラストのみの詳細よりも、輝度のコントラストが高い詳細にはるかに敏感です。

したがって、JPEGは、RGB(赤、緑、青)画像を1つの輝度と2つのクロマチャネルで内部的に再認識します。これにより、クロマサブサンプリングを使用して、クロマチャネルのみの詳細を破棄できます。JPEGが8x8ピクセルのブロックで画像を体系化することは注目に値します。

品質係数を下げたり、より積極的なクロマサブサンプリングを適用したりすると、リンギング、ハロー、ブロッキング、またはブラーのアーティファクトが増加し始めます。JPEGの問題は、画像の内容によっては、アーティファクトが異なる品質係数値で表示される場合があることです。自然写真への影響とアートワークへの影響を比較すると、最も大きな違いが現れます。アートワーク(形状、フォント)は通常、鋭いエッジに依存しているため、少量のディテールが破棄されてもアーティファクトが生成され始めます。

写真の場合、JPEGは、ロスレス圧縮と比較して、ファイルの重量を10分の1に簡単に削減し、アーティファクトはほとんど目立たなくなります。

PNG

このロスレスグラフィックフォーマットは、GIFに代わるものとして開発され、カラーバンディング(およびライセンス)の問題に対処しています。かなりの量のアートワークを含む画像に必要でした。JPEGでは、最小の圧縮率でも大きなアーティファクトが生成されました。

GIFと比較して透明性と改善された圧縮をサポートします。PNGは情報を破棄しないため、アーティファクトを生成しません。もちろん、これは、非可逆圧縮と比較して、多くの異なる色のグラデーションが存在する場合に画像の重みが大きくなるという犠牲を払っています。

アートワークの頻繁な特性を活用することに成功します。微妙なバリエーションを持つ一連の色を特徴とする写真とは異なり、アートワークの写真は通常、明確に定義された色をほとんど備えていません。

そのため、PNGは、大量のピクセルを単純な個別のパレットにマッピングし、結果として多くのビットを節約することによって画像を圧縮します。GIFと比較して、通常ははるかに少ないバイト数ではるかに高い品質を提供します。

部分的にサポートされている新規参入者:HEVCに基づくWEBPおよびHEIC

ビデオコーデックがストリームを圧縮するために使用するメカニズムは、フレーム間とフレーム内の2つの主要なタイプに分類できます。最初のメカニズムは時間の経過とともに冗長性を利用しますが、フレーム内メカニズムは、残りのフレームに依存することなく、特定のフレーム内の冗長性を減らすことに重点を置いています。この圧縮メカニズムは、静止画像に適用できます。

モバイルネットワークを中心としたビデオ共有の爆発的な増加とディスプレイ解像度の着実な向上により、圧縮で可能な限り最高の効率を達成するための新しいコーディング標準への取り組みが推進されています。

So, new image formats are emerging as derivatives of the new video coding standards. These new image formats offer larger feature sets than JPEG and promise relevant savings in file weight with improved visual quality.

WEBP

Google developed this format with the aim to provide a single web-capable image format to deal with all the typical use cases.

Importantly, it seeks to achieve lighter images than JPEG, without penalties on visual quality. It uses more complex operations — like block prediction — and is a derivative of the VP8 video codec. It supports lossless compression and unlike JPEG, it allows transparency and animations that may combine images coded with both lossless and lossy compression.

In principle, it should serve as a replacement for JPEG, PNG, and GIF. An important drawback has been the lack of universal support. Until recently, WebP had been restricted to Google-backed software like the Chrome browser and Android-native applications.

However, with the announcement that Edge and Firefox (excluding iOS Firefox) are to introduce WebP support in 2019, it’s evidently gaining traction. It’s also worth noting that Apple — Safari and iOS — does not support WebP yet.

HEIC/HEIF

This format brings a significant evolution in two different regards.

Firstly, the file container supports the largest feature set among image formats available. It supports, for instance, multi-frame images with multi-frame compression — a key feature for efficient HDR, multi-focus, or multi-view images.

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.