Akamai Diversity
Home > Image Managerで画像コンテンツの変換・編集ワークフローを自動化するには?

Image Managerで画像コンテンツの変換・編集ワークフローを自動化するには?

皆さん、こんにちは。
アカマイ・テクノロジーズ、プロダクト マーケティング マネージャの北かおりです。

このところ、弊社のImage Managerについてお問合せをいただくことが増えてきました。
これは、ウェブサイトのモバイル対応を本格的に進める企業様が増えているためだと考えています。このサイトのモバイル対応に際して、意外にやっかいな問題になるのが画像コンテンツの変換・編集ワークフローです。
その解決手段として、画像の自動最適化・配信ができるImage Managerをご検討いただくわけですが、導入・検討を進めるお客様から、「最初の設定イメージを知りたい」とのお問合せをいただくことがよくあります。
そこで少し前のエントリーですが、弊社のプリンシパル テクニカルプロジェクトマネージャRaphael Edwardsの記事から抜粋し、「レスポンシブ画像」のコンセプトと「Image Managerの設定イメージ」を簡単にご紹介したいと思います。Image Manager設定に必要なステップはわずか2つ(込み入ったケースでも3つ)です。あまりのシンプルさに驚かれるかも?

ウェブサイトのモバイル対応を「本格的に」進める企業様が増えてきています。このサイトのモバイル対応に際して、意外にやっかいな問題になるのが画像コンテンツの変換・編集ワークフローです。

PCサイトとモバイルサイトでは、最適な画像サイズは全く異なります。とはいえ、画像コンテンツごとに何種類ものバージョンを用意するのは、編集・制作プロセスが複雑になり大きな負担になります。一方レスポンシブ・ウェブ・デザイン(RWD)ならシングルソースでマルチデバイスに対応でき、画像編集プロセスの簡素化は可能です。が、シングルソースゆえ、モバイルユーザーに対して不必要に巨大な画像ファイルを送りつけ、却ってユーザー体験を損ねかねません。

そのような画像にまつわる問題の解決手段として、画像の自動最適化・配信ができるImage Managerをご検討いただいています。

この記事では、画像に関する問題の根本要因である、編集・変換ワークフローそのものについて取り組みたいと思います。当社では、Image Managerを使ってAkamai Edgeで画像ワークフローを定義する方法を提供してきました。

ところで、皆さんはレスポンシブ・ウェブ・デザイン(RWD)はよくご存知ですよね。この記事でお話しするのは、「レスポンシブ画像」についてです。コンセプトは似ていて、レスポンシブ画像の目標はエンドユーザー環境に応じてフレキシブルに画像を調整することです。この調整とは、ソース画像のフォーマット変換、画像の拡大・縮小や切り出し、デバイスごとの最適圧縮、などのことです。Image Manager を初めてご利用になる場合や、Akamai Edgeにおけるレスポンシブ画像のワークフロー定義にあたり、下記の手順がお役に立てると思います。

ステップ1: Image Manager コンテキストの定義

Property Managerを使うと、Image Managerのワークフローをどの画像にどのように実装したいかを、ピンポイントで定めることができます。下の例では、/gallery/および/thumbnails/ディレクトリ内にある画像をワークフローの対象として指定しているのがご覧になれます。これはかなりシンプルな例ですが、対象の指定法はほかにも、指定フォルダパスを含める・含めない、クエリパラメータ、Cookieの評価、などがあります。

IM_config2_kk.png

ステップ2: Image Manager ポリシーのセットアップ

次に、レスポンシブ画像のポリシーに応じて、サポートしたい画像幅(Width)を定義します。下図では、画像幅のブレークポイントを320、640、1024、2048、5000としています。これらの画像幅は、モバイル、タブレット、デスクトップ、ワイドスクリーン4KやRetinaディスプレイなど様々なデバイスの代表的なビューポイント幅をあらわします。今後サポートする必要があるデバイスが出てきた場合、さらに画像幅を追加することも可能です。ポリシーでは最大32個までのWidthを定義できるので、ユーザー体験など要件に応じて、きめ細かな最適化を施すことも可能です。定義が完了すれば、あとはImage Managerが全ての仕事を引き受け、最適な派生画像をオンデマンドかつインテリジェントに提供します。

IM_config3_kk.png

品質と変換

上記の画像ブレークポイント定義が終わったら、次は開発ワークフローの迅速化のため、品質、圧縮、画像変換の実装を確認します。

画像品質については、Quality Level オプションを使うと1~100の間で圧縮値を指定することができます。これで、全ての画像レンディションに対し適用する基本圧縮値を定義できます。複数の画像フォーマットを扱うことができますが、圧縮率70に設定したJPEGは、70に設定したWebPやJPEG2000やJPEG XR とは同じではないことにご注意ください。Image Managerには、このような全ての複雑性を軽減するための「知覚品質(Perceptual Quality」という特長があります。この賢いアルゴリズムは、構造類似性(SSIM)という指数を用いて、2つの画像の画質を比較します。明るさ、コントラスト、構造など、いくつかの画像属性に焦点を当てることで、全体の画像品質を落とすこなく、ベストの圧縮を正確に適用することができます。

Transformations Menuを使うことで、他の画像処理に気を取られることなく、画像の操作管理に集中することができます。

使用可能、かつよくある変換ユースケースとして以下のようなものがあります。Image Managerでは、さらにこれらの変換処理をポリシー内で組み合わせることも可能です。

  • サムネイル画像-リサイズ、グレースケール、ウォーターマーク
  • ギャラリー画像-クロップ、色相/彩度/明度
  • Hero/背景画像-リサイズ、クロップ、不透明度
  • ヘッドライン/バナー画像-背景色、リサイズ、クロップ

 IM_config4_kk.png

ステップ3: さらなる対応に、Image Manager Resource Hints 

ほとんどのウェブサイトに関しては、Image Managerワークフローを作成すれば、99%のユースケースを解決することができます。しかし、サイトの中には、より詳細に画像を調整する必要があるセクションが出てくるかもしれません。これらの多くは、特定のデバイスのサポートが必要であるためや、標準のテンプレートや設計と異なるウェブサイト上のセクションがあるためです。そのため、私達はResource Hintsを用意しました。Resource Hintsは、画像に対して特定のImage Managerポリシーや挙動を起動させるようにするもので、これで最後の1%のユースケースに対応できます。これらのResource Hintsの例を以下に示しました。これは対象ページのhtml に直接埋め込むことができます。これらについては、別のブログエントリーで、より深く取り扱う予定です。

Image Manager Resource Hints

IM_config5_kk.png

Image Managerのご検討やその活用方法など、さらに詳しい情報については、貴社担当の営業、もしくはinfo_akamai@akamai.co.jpまでご連絡ください。 

Leave a comment