Akamai Diversity
Home > ブラウザによって画像の圧縮方式を変えてみる

ブラウザによって画像の圧縮方式を変えてみる

WEB ページ全体のバイト(byte)数において、画像(イメージ)が占める割合は非常に高くなっています。以前もご紹介した、 httparchive.org によると、2014/12/1 時点、アクセス数上位 1000 サイトにおいて 50 %強 のデータは画像が占めているようです。PC 向けですと、およそ 57%
ha1.png



モバイル向けだと更に高く、62%
ha2.png


画像データのサイズ (byte) は年々増す一方ですので、WEB サイトのパフォーマンスを改善する手法として、転送データ量を少なくする案を考えた場合、画像をいかに最適化するかが課題と言えそうですね。



一口に WEB サイトの画像と言っても、そのフォーマットは複数あり、インターネット初期から利用されてきたGIF, PNG, JPEG に加えて、新しい画像フォーマットが生まれ、使われはじめています。

WebP
Google が開発しているオープンな静止画フォーマットです。ファイル拡張子は「.webp」
A new image format for the Web
JPEGと比較して、25-34% 程度、画像サイズが小さくなるとの事です。

JPEG XR
マイクロソフトが開発した、 Windows Media Photo をベースに JPEG eXtended Range として ISO 規格(ISO/IEC 29199-2:200)となっています。

各フォーマットの特徴や圧縮率での利点は、公開されている記事が沢山ありますので、調べて見て下さい。仮に圧縮率のみを考えた場合、WebP, JPEG XR のように新しい方式を利用した方が良さそうですが、サイト制作の観点からは一概には言えないようです。一番の理由は、ブラウザのサポート状況が挙げられます。

Comparison of layout engines (graphics)
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28graphics%29
Comparison.png

アカマイ IO サイトによると、アカマイサーバへのリクエストを行うブラウザシェアは、以下の通りです。

Akamai I/O
io.png

WEB サイトを閲覧する人は、特異な人を除き、通常利用しているフォーマットを意識しませんし、閲覧するサイトに併せてブラウザや端末を変更する人は稀だと思います。よって、これらの新しいフォーマットを利用するには、アクセスするサイト側で、どのブラウザからアクセスしているかを判別し、適切なフォーマットの画像を提供する。若しくは、ユーザのブラウザによってアクセスする画像を変更するなどの施策が必要です。

サイト制作者が自身で WebP のサイト適応を検討する際には、こちらのリンク先がお薦めかもしれません。

Faster, smaller and more beautiful web with WebP

サーバサイドで識別して出し分ける作業は、それなりに工数がかかりますので、仮に自社サイトでは無く、アカマイサーバを利用して、WebP を適応する設定例を作成してみました。

pmwebp.png

上記例では、特定のパス(/images/)以下の URL にアクセスする場合、且つ、Request Header の Accept ヘッダに image/webp が含まれる場合は、オリジンサーバにアクセスするパスを変更する動作となります。

これにより、例えば同じ URL にアクセスしているにも関わらず、 WebP 対応ブラウザからのリクエスト時は、予め WebP フォーマットに変換したフォルダの画像を返答する事が可能です。

但し、この設定では事前にオリジンサーバ側で WebP フォーマットに変換したファイルを設置する必要があります。もし、自社サイトに WebP コンテンツを用意するのが煩雑な場合は、AQUA ION の画像圧縮機能を利用して、ブラウザの判別から最適なフォーマット・圧縮率の画像の出し分けまで、全て自動化してしまうのも良いかもしれません。


まとめ:

画像データの占める割合は多く、サイトパフォーマンスに影響が大きい。
圧縮率が高い新しい技術があるが、普及度合いに問題がある。
ブラウザを動的に判断して、最適なフォーマットで描画する事が可能であれば、サイトパフォーマンスの向上が期待できる。






Leave a comment