BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース プログレッシブJPEGとHTTP Rangeリクエストで遅延ロードを改善する

プログレッシブJPEGとHTTP Rangeリクエストで遅延ロードを改善する

ブックマーク

原文(投稿日:2019/09/08)へのリンク

Christoph Erdmann氏は先頃、Progressive JPEGHTTP Rangeリクエストを駆使したイメージ遅延ロードの興味深いテクニックを取り上げた、詳細な説明記事を執筆した。この手法を使用したWebサイトでは、最初のHTTP Range要求を通じて認識可能な最小限の埋め込み画像プレビュー(EIP)を素早く表示し、残りを2回目のRangeリクエストで取得することができる。他の画像プレースホルダや遅延読み込み手法とは異なり、Rangeリクエストを使用することによる余分な画像データのダウンロードは発生しない。

Google Chromeを担当するエンジニアリングマネージャのAddy Osmani氏は、平均的なサイトでロードされるコンテンツの半分以上をイメージが占めるという、HTTP Archiveの研究成果を引用しているコンバージョン率に対する画像の寄与を考慮すれば、その割合は今後も引き続き大きなものになると思われる。

デバイスの備えるハードウェアとネットワーク能力の幅広さに加えて、ローエンドデバイスのユーザベースが増え続けている現在の状況において、Web開発者は、イメージの遅延読み込みやその他のイメージ最適化技術を駆使して、ユーザエクスペリエンスを最適化する方法を模索している。遅延読み込みの重要性は、Chrome 74以降、Chromeブラウザにネイティブに実装されているという事実からも明らかだ。

FacebookのソリューションエンジニアであるJosé M. Pérez氏は、既存のイメージ読み込みテクニックを要約したインフォグラフィックを公開している

最後の戦略は、ユーザエクスペリエンスの点において、他の選択肢に比べて明らかなメリットが期待されるもので、LQIP(Low Quality Image Placeholder、低品質画像プレースホルダ)と呼ばれることが多い。SVGベースのプレビュー(SQIP)を用いる方法を使うことで、小さく低品質の画像プレビューの生成も可能になる。

しかしながら、一般的なLQIP戦略では、多くの場合においてプレビューと実際の画像という2つの画像をダウンロードする必要があるため、結果的に余分なデータがフェッチされることになる。Erdmann氏の提案した2つのHTTP Rangeリクエストに基づく手法であれば、このようなデータのオーバーヘッドは発生しない。

Erdmann氏は、プログレッシブJPEGの活用を推奨している。プログレッシブJPEGとは、画像が複数のパスでエンコードされて、それぞれがエンコードされたイメージをより正確に表示できるJPEGの圧縮方式である。

通常のプログレッシブJPEGアプローチにはいくつか注意すべき点がある、とErdmann氏は言う。

Webサイトが多数のJPEGで構成されている場合、たとえプログレッシブJPEGであっても、読み込みが順次実行されていることに気付くでしょう。これは、最新のブラウザでは、ドメインへの同時接続が6つしか許可されていないためです。したがって、プログレッシブJPEGのみでは、ページのインプレッションを可能な限り速くユーザに提供するソリューションにはなりません。最悪の場合、ブラウザは、画像を完全に読み込んでから、次の画像の読み込みを行うことになるのです。

これらの警告に対するErdmannの対処法は、HTTP Rangeリクエストを使用することだ。最初のHTTPリクエストでは、プログレッシブJPEGの最初のエンコードパスを含むデータ範囲を要求する。開発者が都合の良い時間にスケジュールした2番目のRangeリクエストで、残りのデータを取得するのだ。

EIP(埋め込み画像プレビュー)技術が2つのリクエストで画像データを読み込む方法を示します。

プレビュー画像を作成する必要はなく、余分なデータをダウンロードする必要もない。その上、プログレッシブJPEGでエンコードされた画像は、一般的に、相当するベースラインJPEGに比べても重くはない。マイナス面として、画像とビデオを扱う人気プラットフォームのCloudinaryが、プログレッシブJPEGはデコード時にベースラインJPEGエンコーディングよりもCPU使用率が高くなる可能性のあることを報告し、プログレッシブJPEGエンコーディングでパスの数と内容を調整するという緩和テクニックを紹介している。

さらにErdmann氏は、自らの推奨する画像読み込み手法を実装するための、3つのステップについて述べている。

まず最初に、プログレッシブJPEGを作成する必要がある。これはjpegtranなどを使えば実現可能だ。

$ jpegtran input.jpg > progressive.jpg

次には、2つのHTTPリクエストの範囲を決定するためのバイトオフセットを計算する必要がある。3番目には、JavaScriptスクリプトで遅延読み込みを実装して、HTTPリクエストの実行とスケジュールを行う必要がある。これら3つのステップは、開発者が手作業で実行することも、自動化されたワークフローに統合することも可能である。

Erdmann氏は、レイジーローディングのテクニックを試すためのプロトタイプを提供している。プロトタイプのソースコードは、GitHubリポジトリから入手することができる。氏はプロトタイプに関するコメントを求めていて、関連するブログ記事に投稿することができる。

この記事に星をつける

おすすめ度
スタイル

BT