JPEGとGIFとPNGの画像フォーマットの正しい選び方、そして次世代の画像フォーマットWEBPとJPEG-XRの使い方

ほとんどのデザイナーやイラストレーターは長い経験を通じて、画像をどのようなフォーマットで保存すべきが知っているでしょう。写真ならJPEGで、色数の少ないイラストならGIFなどを使用していると思います。

JPEGとGIFとPNGなどの画像フォーマットがどのような種類の画像に適し、どのように機能しているのか。そして次世代のフォーマットと言われているWEBP, JPEG-XRがどのようなもので、今どのように利用すればいいのかを紹介します。

How to select the perfect image format

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• JPEG
• GIF
• PNG
• 画像フォーマットの次の世代（WEBP, JPEG-XR）
• WEBP, JPEG-XRを今使う方法

JPEG

JPEGの別名でも知られるISO 10918は25年に渡り使われてきましたが、試練の時に立たされています。

JPEGはどのように機能し、よい点は何でしょう？

JPEGの圧縮は画像を8×8ピクセルのブロックに分割し、そのブロック単位を係数を用いてRGBの各値のピクセルリストを変換します。
専門用語では、 JPEG圧縮アルゴリズムは空間領域から周波数領域に画像の情報を変換します。

これは実質的に、JPEGは絶え間ないトーンの画像を圧縮することに非常に優れていることを意味します。特に膨大な色数をもつ画像、滑らかな移行をもつ画像です。簡単に言うと、写真のように見える画像です。

逆にJPEGに適さないのは、鮮明なエッジをもつ画像、ノイズの多いテクスチャ（鋭いエッジの周りにリングを入れて、細部をぼかします）などです。

上: JPEGに適した画像、下: JPEGに適さない画像

これらの画像をうまく圧縮するために、わたし達は異なる圧縮アルゴリズムを使用します。次のフォーマットを見てましょう。

GIF

Webの初期では、画像がJPEGでなかった場合に、GIFにしていました。

GIFのフォーマットはLZW圧縮アルゴリズムを使い、それはJPEGよりはるかに単純です。本質的にLWZアルゴリズムは画像データをスキャンし、繰り返し使われる部分の非常に短いコードを生成します。簡単に言うと、LZWは反復を短くします。
GIFフォーマットは同じ、あるいは反復的なデータが多くもつ画像を圧縮することが得意であることを意味します。急激な変化で、広い帯状にいくつかの色をもつ画像は、 GIFとして効率的かつ可逆保存することができます。

そしてGIFはシンプルなフォーマットにもかかわらず、透明とアニメーションという素晴らしい機能を備えています。

しかしGIFの色数は厳しいです、256色に制限されています。256色より多い色数をもつ画像をGIFに変換すると、ひどく見えるポスタリゼーション化をもたらします。

上: GIFに適した画像、下: GIFに適さない画像

要するにGIFとJPEGは反対の、そして互いを補足する特徴を備えています。Webの初期では、最強のコンビでした。

しかしLZWアルゴリズムを取り巻く未解決の特許問題は、Web用のロスレス画像フォーマットの設計で次の試みをするために、非常に賢い人々に影響を与えました。

PNG

PNGはGIFがするのと同じ種類の画像で優れており、さらに利益をもたらします。

• 256色の制限はなし
• アルファチャンネル透明度（ピクセルが全部透明または完全に不透明ではなく、部分的に透明が可能）
• 少数以外のすべてのケースでエッジに優れた圧縮

PNGの画像

この画像は、半透明なピクセルでフルカラーの画像を圧縮し、PNGの能力を引き立たせています。

ではPNGはどのようにGIFを越える圧縮を実現しているのでしょう？ その圧縮の秘訣はいくつかのレイヤーを加えることです。

最初にPNGのアルゴリズムは、それがまだそうでないものを予測することを知っているピクセルを用いて保存する必要があるデータの量を削減しようとします。フォーマットは5つの異なる予測戦略を優れた特徴とします、しかし基本的に、PNGはお互いの隣りのピクセルが類似であると想定します。もしこの仮定が正しければ、PNGはその予測と実際の値との差を格納することにより、データを保存します。小さな数字は、大きな数字より少ないスペースを取ります。

次にPNGはLZ77と呼ばれるアルゴリズムを使い、画像が前の同一の画素配列を参照することを可能にする（二度同じデータを格納する代わりに）ことにより反復をやめます。目を細めて画像を見ると、 PNGのLZ77とGIFのLZWは同じ反復を実現しているのを確認できると思います。

そして最後に、「ハフマン符号化」と呼ばれるプロセスを用いて、最も一般的な値の最小の可能なコードを生成することにより、さらに残りの値をダウンさせます。
ちなみに、JPEGフォーマットでも同様に「ハフマン符号化」を最後のステップで使用します。

これらのロスレス技術の3つすべてを組み合わせることにより、 GIFの一つの戦略に巨大な利益を提供します。そして洗練されたツールは、圧縮をよりフレンドリーにするためには、非可逆前の元画像データを変更することで、より大きな圧縮比率を提供することができます。

話を少し戻して、あなたが知るべき必要があるポイントは、PNGは写真画像の場合、JPEGより悪いですが、GIFより優れています。鮮明なエッジとソリッドカラーの広い帯状または正確に繰り返しパターンをもつ画像のために使用します。

画像フォーマットの次の世代（WEBP, JPEG-XR）

現在、JPEG, GIF, PNGの3つのフォーマットがユニバーサルサポートを持つ唯一の画像フォーマットです。つまり、実際に使用できるフォーマットとも言えるでしょう。
しかし、新しい最先端のフォーマットはすでに登場しています。

WEBP

WEBPはGoogleのWebMビデオフォーマットの派生で、その圧縮戦略のコアは、PNGで使用されるシンプルな戦略を次のレベルに導くことであると予測されます。WEBPは、画像内の全ての（可変サイズ）ブロックに対して最大16個の異なる予測戦略使用し、予測値と実測値との間の残差をいずれかの可逆または非可逆任意に圧縮することができます。そのフォーマットの相対的な複雑さは、多くの柔軟性を提供します。
これはPNGあるいはJPEGよりも（一般的に）より良い圧縮で、画像の多種多様な比喩的描写ために良いことです。しかしWEBPはGoogleのフォーマットで、現在はChromeでサポートされているだけです。

JPEG-XR

Microsoftが次世代のフォーマットとして選択したのがJPEG-XRです。JPEG-XRはJPEG圧縮の基本的な仕組みの上に新しいテクニックを重ねます。

• 無損失の圧縮
• より効率的な損失圧縮
• アルファチャンネル半透明度

WEBPと同様に、JPEG-XRはたくさんの複合された高性能をもち、そしてサポートも限定されています。現在はIEとEdgeのみです。

WEBP, JPEG-XRを今使う方法

次の世代の画像フォーマットを今、使用する方法はありますか？
あります！

HTML 5.2のpicture要素を使い、WEBP, JPEG-XRの画像フォーマットを利用することができます。

これはコードが少し複雑に感じるかもしれません。しかし幸いなことに、もう一つ方法があります。
フロントエンド開発者は、同じURLから異なるユーザは異なるリソースを送ることができるスマートサーバーを利用し、バックエンドにこの複雑さをシフトすることができます。

Cloudinaryのようなサービスを使い、開発者はそのURLにいくつかの簡単な文字を追加するだけで、動的な圧縮画像を展開することができます。

この記述でクライアントはサーバから画像リソースを要求した時、クライアントがサポートする画像フォーマットを伝えます。そのリクエストに含まれる情報に基づき、異なるクライアントに異なる画像リソースを送ることができます。