ハードウェアを使用して Internet Explorer 11 での JPG 画像のデコードと読み込みを最大 45% 高速化

Windows 8.1 上の Internet Explorer 11 と Windows ストア アプリは、画像のデコード パイプラインを部分的にグラフィックス ハードウェアにオフロードします。その結果、画像の読み込みが最大で 45% 高速化するほか、メモリの使用量も最大で 40% 減少し、バッテリの寿命が延びます。今日の Web でダウンロードされているデータのほとんどは、主に画像です。IE11 では、JPG 画像の読み込みのパフォーマンスを高めるために、処理をはるかに高速かつ並列的に実行できる GPU にデコード処理の一部を任せることで、JPG のデコードを効率化しています。

JPG 画像の形式

今日の Web でダウンロードされるデータの実に 61% は画像であり、要求される画像の 47% は JPG 画像です。IE11 では JPG 画像のデコードにハードウェアを効率的に使用することから、以前のバージョンの IE よりも JPG 画像の読み込みが最大で 45% 高速化し、メモリ使用量も最大で 40% 減少しています。

こうしたパフォーマンスの向上について把握する第一歩として、JPG 画像の通常のエンコード方法を確認しましょう。JPG のエンコードの最初のステップでは、ビットマップを RGB 色空間から YCbCr 色空間に変換します。

RGB は、赤、緑、青の 3 つの色成分で色を定義するものです。このグランド ティトンの画像を RGB カラー チャネルに分解すると、各チャネルでのようすを詳しく確認できます。IE で RGB カラー モデルの画像に必要なメモリの量は、画像の幅 x 画像の高さ x 32 ビットで計算できます。

グランド ティトンの画像とその赤、青、緑の各成分

YCbCr (通称 YUV 色空間) は、1 つの輝度 (Y) 成分と 2 つの彩度 (CbCr) 成分で色空間を定義するものです。輝度成分は、色の明るさの情報を表します。彩度成分には色差が含まれ、Cb には青の色差が、Cr には赤の色差が含まれます。以下の図は、同じグランド ティトンの画像を Y、Cb、Cr の各チャネルに分解したようすです。

グランド ティトンの画像とその Y、Cb、Cr の各チャネル

エンコード処理の次のステップでは、彩度 (クロマ) サブサンプリングと呼ばれる非可逆圧縮を使用して画像サイズを圧縮します。彩度チャネルは大きく圧縮できます。人間の目は画像の色や色相よりも明るさに敏感であるためです。たとえば、Cb チャネルと Cr チャネル (右側の 2 つ) を見ると、Y チャネルと比べて情報が非常に少ないことがわかります。サブサンプリングのレベルは、通常は 4:2:0 のように 3 つの項から成る比率で表されます。この比率の最初の項は水平のサンプリング参照を表し、次の 2 つの項は、そのサンプリング参照の 1 行目と 2 行目のクロミナンス サンプルの数を表します。彩度のサブサンプリングのレベルは、通常は次の 3 つのいずれかです。

• 4:4:4。彩度データはサブサンプリングされません。
• 4:2:2。彩度データは水平方向で 2 だけダウンスケールされます。
• 4:2:0。彩度データは水平方向と垂直方向の両方で 2 だけダウンスケールされます。

4:2:0 の比率でサブサンプリングされた YCbCr JPG 画像の場合、メモリの使用量が元の RGB ビットマップよりも最大で 62.5% も減ります。今日の Web で使用されている JPG 画像のほとんどは、既に 4:2:2 か 4:2:0 の彩度サブサンプリング モードになっています。ほとんどの画像処理ツールでは、"Web 用に保存" するオプションを使用すると、画像が 4:2:2 か 4:2:0 に自動的にサブサンプリングされます。

画像がサブサンプリングされている場合は、エンコード後の最終的な JPG 画像を生成するために、離散コサイン変換、量子化、Huffman エンコードの各処理も適用されます。

より効率的にハードウェアを使用する IE11

JPG 画像をデコードするには、こうしたエンコードのステップを逆に実行します。従来の IE では、以下のデコード ステップをすべて CPU 上で直接実行し、JPG 画像を RGB ビットマップにデコードしていました。レンダリング時には、RGB ビットマップを GPU にコピーしてレンダリングしました。

IE11 では、ハードウェアをより効率的に使用するために、JPG のデコード処理を CPU と GPU で分担します。IE11 も、彩度サブサンプリングが行われた YCbCr 色空間に JPG 画像をデコードする処理を CPU で実行しますが、その後の描画時には、GPU で彩度アップサンプリングと YCbCr から RGB への色変換を行います。GPU を使うことで、こうした処理をはるかに高速かつ並列的に実行できます。最近のサイトやアプリでは CPU がボトルネックになることが多いので、この処理により、CPU 時間を他の処理のために空けることができます。メリットはデコード時間の短縮だけにとどまりません。GPU にコピーされる YCbCr 画像がこれまでよりもはるかに小さくなり、リソースの限られた GPU にコピーおよび格納されるメモリの量が減ります。CPU とメモリの使用量が減るということは、電力消費量が減り、データのローカリティが高まるということでもあります。

以下の CPU のグラフは、グランド ティトンの画像を 4:2:0 の比率でサブサンプリングした YCbCr JPG バージョンを、Windows 8 上の IE10 でデコードして描画するのに要した時間を示しています。画像のデコードに要した時間は 31.9 ミリ秒、画像の描画に要した合計時間は 81.5 ミリ秒でした。

同じ JPG 画像を Windows 8.1 上の IE11 で読み込んだ場合、デコード時間はわずか 17.9 ミリ秒になり、44% も短縮されることがわかります。画像の描画に要した合計時間は 57.5 ミリ秒で、こちらは 30% の短縮です。

今日の Web 上の JPG 画像はほとんどが YCbCr 形式になっているため、Windows 8.1 上で IE11 を使用すると、何もしなくてもこうしたメリットを享受できます。開発者の皆さんには、JPG デコード パイプラインにハードウェア アクセラレーションを適用することで得られるパフォーマンス上のメリットを最大限に高めるために、JPG 画像を 4:2:2 か 4:2:0 の彩度サブサンプリング モードで圧縮することをお勧めします。

まとめ

IE11 ではハードウェアをより効率的に使用して JPG 画像をデコードするため、参照されるほぼすべてのページのパフォーマンスが高まると同時に、デバイスの電力消費量とバッテリの寿命も改善します。ぜひ Windows 8.1 Preview を Windows ストアからインストールして、IE11 をお試しください。これまでどおり皆様のフィードバックをお待ちしております。その際は、IE11 のフィードバック送信ツールと Connect のいずれかをご利用いただけるとさいわいです。

Internet Explorer プログラム マネージャー、Jatinder Mann