JPG? PNG? 画質や色数は? Web画像のサイズと品質をデバイスごとに自動で最適化するImage Managerをアカマイが提供開始

Webで利用する大量の画像を、アクセスしているデバイスやブラウザに応じて画質とファイルサイズのバランスを考慮して最適化し、CDNを通じて配信する

Webで利用する大量の画像を、アクセスしているデバイスやブラウザに応じて画質とファイルサイズのバランスを考慮して自動で最適化し、CDNを通じて配信するサービス「Image Manager(イメージマネージャー)を、アカマイが9月28日に日本で提供開始した。

Image Managerは、次の2つを自動化することで、Webサイトで魅力的な画像によるユーザー体験と快適なサイトパフォーマンスを両立させ、さらにサーバーの必要ストレージ容量も削減できるるサービス。

  • 画像ファイルの最適化による良質な画像の提供
  • 画像ファイルを高速に配信することによるユーザーのストレス低減とエンゲージメント改善

海外の導入事例では、Image Managerで画像を最適化したことにより、タブレットユーザーのトラフィックが30%増え、コンバージョン率が10%向上した家庭用品小売業もあったという。

ユーザーエクスペリエンス最適化のために重要な画像の扱い

現在のWebサイトでは、画像をうまく活用することは必須であり、画像の利用が進んでいる。

画像のファイルサイズはページ全体の転送データサイズの62%に達するが、世界トップ100サイトの43%で、画像が適切に圧縮(ファイルサイズ削減)されていないのだという(SOASTAの調査より)。

しかし、特にモバイルでは、画像をどれぐらい高速に表示できるかは大切なポイント。ユーザーは、望むものが「わかりやすく」「すばやく」得られるエクスペリエンスを求める。

とはいうものの、ユーザーが利用するデバイスやブラウザの種類は非常に多い。サイトで利用している画像すべてについて、各種デバイスに対応した最適なサイズ・画質・フォーマットの画像を作成して配信しようとすると、非常に手間もストレージスペースが必要なのが現状だ。

また、良好な画質とファイルサイズ削減の良いバランス点を探るのは非常に大変だ。ウェブコンテンツの制作者は、「PNGがいいのかJPEGがいいのか」「画像の品質や色数はどこまで落とせば、見た目を保ったままファイルサイズを減らせるのか」を、経験と試行錯誤で探っている。

こうした最適化を手作業でやるには時間がかかりすぎるため、それによりコンテンツ公開までの時間が長くなってしまう問題もある。

画質とファイルサイズのバランスを、訪問者にあわせて自動的に最適化

Image Managerは、次のようなことを自動的に行う。

  • 知覚品質アルゴリズムによって、オリジナル画像と見た目が変わらない状態でファイルサイズを削減できるように自動調整する(たとえばJPEGの圧縮度の調整)。

  • 画像自体をリサイズする(モバイルからのリクエストではサイズを縮小するなど)。

  • 最適な画像フォーマットの画像を、リクエストしているデバイス・ブラウザに応じて自動的に返す。たとえばアクセスしているブラウザがChromeならばWebPフォーマットの画像を返し、SafariにはJPEG 2000を返す(これらのフォーマットは既存のPNGやJPEGよりもファイルサイズは削減できるが、対応していないブラウザもある)。

  • 画像自体を分析(色数、透過など)し、その画像に向いている画像フォーマットに自動的に変換する(たとえばオリジナルのJPEGをPNGにするなど)。

そのため、制作者は可能な限り最高品質の画像をオリジナル版として用意しておくだけでいい(たとえば幅2000ピクセルの最高品質の画像など)。

ブログサービスなどのユーザー生成コンテンツでは、各ユーザーがアップロードする画像に気を遣わなくても、ページ訪問者には最適化した画像を提供できるようになる。

また、「拡大画像」「切り抜き画像」「アイコン用画像」「透かしの追加」など、あらかじめ決めたスタイルに沿った画像を自動生成する機能も用意されているため、それらの画像生成も自動化できる。

これらの処理はバックグラウンドで行われ、配信時に動的に行われるものではないため、アクセス時にオーバーヘッドが生じることもない。

そして、配信はアカマイのCDN(コンテンツ配信ネットワーク)を通じて行われることで、エンドユーザーにすばやく画像データを届けられるようになっており、表示を高速化している。

◇◇◇

Image Managerの利用料金は、Image Managerで処理された画像のヒット数によって変わる従量課金制。

また、画像はアカマイのCDNを通じて配信することで表示高速化を実現しているため、Image Managerの利用にはアカマイのCDNの契約が必須である。

この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

Python
「Python」(パイソン)は、プログラミング言語の1つ。プログラマのグイド・ヴ ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]