Dynamic Media の画質最適化のベストプラクティス

許容できる結果のレンダリングには多くの要因が関係するので、画質の最適化には時間がかかることがあります。画質に対する個人の感覚は異なるので、結果は一部主観的なものです。構造化された実験をおこなうことが重要になります。

Adobe Experience Manager には、画像をチューニングおよび最適化して結果をレンダリングするための、100 を超える Dynamic Media 画像配信コマンドがあります。次のガイドラインは、一部の基本コマンドとベストプラクティスを使用してこのプロセスを効率化し、すぐに良好な結果を得るために活用できます。

画像形式（&fmt=）のベストプラクティス

  • JPG または PNG は、管理しやすいサイズと重さで良い画質の画像を配信するための最適な選択肢です。
  • URL に format コマンドが含まれていない場合、Dynamic Media 画像配信のデフォルトは JPG の配信になります。
  • JPG は 10:1 の比率で圧縮をおこない、通常は比較的小さい画像ファイルサイズになります。PNG は、画像に白い背景が含まれている場合などを除いて、約 2 : 1 の比率で圧縮されます。ただし、通常は PNG ファイルのサイズは JPG ファイルよりも大きくなります。
  • JPG では非可逆圧縮が使用されます。非可逆圧縮では、圧縮中に画素（ピクセル）が失われます。これに対して、PNG では可逆圧縮が使用されます。
  • JPG では多くの場合、写真画像が、エッジやコントラストがシャープな合成画像よりも高い忠実度で圧縮されます。
  • 画像に透明部が含まれている場合は PNG を使用します。JPG では透明化がサポートされていません。

画像形式のベストプラクティスとして、まずは最も一般的な設定である &fmt=JPG を使用します。

画像サイズのベストプラクティス

画像サイズを動的に縮小することは、ごく一般的なタスクの 1 つです。サイズを指定し、さらにオプションでどのダウンサンプリングモードを使用して画像をダウンスケールするかを指定します。

  • 画像のサイズ設定における最も簡単で最適なアプローチは、&wid=<value> と &hei=<value>, の両方、または &hei=<value> のみを使用することです。これらのパラメーターによって、画像の幅が縦横比に合わせて自動的に設定されます。
  • &resMode=<value> は、ダウンサンプリングに使用するアルゴリズムを制御します。まず手始めに &resMode=sharp2 を使用します。この値によって最適な画質が設定されます。ダウンサンプリングを使用する場合は value =bilin のほうが速くなりますが、この設定では通常、アーティファクトのエイリアシングが実行されます。

画像サイズ設定のベストプラクティスとしては、&wid=<value>&hei=<value>&resMode=sharp2 または &hei=<value>&resMode=sharp2 を使用します。

画像のシャープニングに関するベストプラクティス

画像のシャープ処理は、Web サイト上の画像を制御する際の最も複雑な側面で、多くのミスが生じます。次の役立つリソースを参照し、Experience Manager でのシャープおよびアンシャープマスクの仕組みについて詳しく学んでください。

ベストプラクティスに関するホワイトペーパー Adobe Dynamic Media Classic で画像をシャープにするは、Experience Manager にも適用されます。

Experience Manager を使用すれば、取得時、配信時またはその両方で画像をシャープにすることができます。ただし、通常は、両方のメソッドではなく、どちらか一方のメソッドのみを使用して画像をシャープにします。一般に、配信時に URL 上で画像をシャープにすることで、最適な結果が得られます。

画像のシャープニングでは、次の 2 つの方法を使用できます。

  • シンプルシャープニング（&op_sharpen）- Photoshop で使用するシャープニングフィルターと同様に、シンプルシャープニングでは、動的なサイズ変更の後に、画像の最終表示形に対して基本的なシャープニングを適用します。ただし、この方法ではユーザーによる設定は不可能です。ベストプラクティスは、必要な場合を除いて &op_sharpen を使用しないことです。

  • アンシャープマスク（&op_USM）- アンシャープマスクは、業界標準のシャープニングフィルターです。ベストプラクティスは、以下のガイドラインに従ってアンシャープマスクを使用して画像をシャープニングすることです。アンシャープマスクによって、次の 3 つのパラメーターを制御できます。

    • &op_sharpen=amount,radius,threshold

      • ***amount ***（0～5、効果の強さ）
      • ***radius ***（0～250、シャープニングにされるオブジェクトの周囲に描かれる「シャープニングされた線」の幅、ピクセル単位）

      radius パラメーターと amount パラメーターは互いに反対に作用することに注意してください。radius 値の減少は、amount 値の増加によって補うことができます。radius によって、より細やかな制御が可能になります。値が小さいとエッジ部のピクセルのみがシャープニングされ、値が大きいとより幅広いピクセルがシャープニングされます。

      • ***threshold ***（0～255、効果の感度）

         このパラメーターは、シャープにされるピクセルが周囲の領域とどの程度違えば、そのピクセルをエッジのピクセルと見なしてフィルターによりシャープにするかを決定するものです。「**しきい値**」パラメーターを使用することで、肌のトーンなど、同じような色の領域が過剰にシャープニングされるのを防ぎます。例えば、しきい値を 12 にした場合、肌のトーンの明るさにわずかな差があっても無視して「ノイズ」が加わるのを防ぎながら、まつげと肌が隣り合う場所など、コントラストの高い領域に対してエッジコントラストを追加することができます。

        フィルターを使用したベストプラクティスを含む、これら 3 つのパラメーターの設定方法について詳しくは、次のリソースを参照してください。

        画像のシャープニングに関する Experience Manager ヘルプトピック

        ベストプラクティスに関するホワイトペーパー Adobe Dynamic Media Classic での画像のシャープニング

      • Experience Manager では第 4 パラメーターの monochrome (0,1) も制御できます。このパラメーターでは、アンシャープマスクをそれぞれの色成分に個別に適用するか（値が 0 の場合）、または画像の明るさ／明度に対して適用するか（値が 1 の場合）を指定します。

ベストプラクティスとして、まずはアンシャープマスクの radius パラメーターを使用します。手始めに使用できる radius 設定は次のとおりです。

  • Web サイト - 0.2 ～ 0.3 ピクセル
  • 写真印刷（250 ～ 300 ppi）- 0.3 ～ 0.5 ピクセル
  • オフセット印刷（266 ～ 300 ppi）- 0.7 ～ 1.0 ピクセル
  • キャンバス印刷（150 ppi）- 1.5 ～ 2.0 ピクセル

amount を 1.75 から 4 まで少しずつ増やします。シャープニングの結果に満足できない場合は、radius を小数点以下の単位で増やして、再度 amount を 1.75 から 4 の範囲で実行します。必要に応じてこの手順を繰り返します。

monochrome パラメーター設定は 0 のままにします。

JPEG 圧縮（&qlt=）のベストプラクティス

  • このパラメーターでは、JPG エンコーディング品質を制御します。値が大きいほど高画質になりますがファイルサイズも大きくなります。逆に、値が小さいほど低画質になりますがファイルサイズは小さくなります。このパラメーターの範囲は 0～100 です。

  • 画質を最適化するには、このパラメーターの値を 100 に設定しないでください。90 や 95 の設定と 100 の設定では、画質の差はほとんど感じられませんが、100 に設定することで画像ファイルのサイズが不必要に増加します。したがって、画質を最適化しながら画像ファイルが大きくなりすぎないようにするために、qlt= value を 90 または 95 に設定します。

  • 小さい画像ファイルサイズに最適化しつつ、画質を許容できるレベルに保つには、qlt= value を 80 に設定します。70～75 未満の値を指定すると、画質が大幅に低下します。

  • ベストプラクティスとしては、間を取って qlt= value を 85 に設定します。

  • qlt= での色度フラグの使用

    • qlt= パラメーターには、RGB 色度のダウンサンプルを有効にする第 2 の設定があります。この設定を有効にするには値 ,1 を使用し、無効にするには値 ,0 を使用します。
    • 簡易な設定を維持するため、まずは RGB 色度のダウンサンプルを無効にします（,0）。この設定により、通常は高画質になります。特に、シャープなエッジやコントラストが多く含まれる合成画像で高画質になります。

JPG 圧縮のベストプラクティスとしては、&qlt=85,0 を使用します。

JPEG サイズ設定（&jpegSize=）のベストプラクティス

jpegSize は、メモリ容量が限られているデバイスに配信される画像が特定のサイズを超えないようにしたい場合に便利なパラメーターです。

  • このパラメーターはキロバイト単位で設定します（jpegSize=&lt;size_in_kilobytes&gt;）。画像配信で許可される最大サイズを定義します。
  • &jpegSize= は、JPG 圧縮パラメーターである &qlt= と相互に作用します。指定された JPG 圧縮パラメーター（&qlt=）を持つ JPG 応答が jpegSize の値を上回らない場合、画像は定義されたとおりに &qlt= とともに返されます。jpegSize の値を上回る場合は、&qlt= が少しずつ減らされ、画像のサイズが最大許容サイズ内に収められるか、またはシステムによってそのサイズ内に収まらないと判断された場合はエラーが返されます。

ベストプラクティスとしては、&jpegSize= を設定し、メモリ容量が限られているデバイスに JPG 画像を配信する場合は &qlt= パラメーターを追加します。

ベストプラクティスのまとめ

ベストプラクティスとして、ファイルサイズを小さくして高画質を達成するには、次のパラメーターの組み合わせで始めます。

fmt=jpg&qlt=85,0&resMode=sharp2&op_usm=1.75,0.3,2,0

この設定の組み合わせによって、ほとんどの状況で優れた結果になります。

画像をさらに最適化する必要がある場合は、シャープニング（アンシャープマスク）のパラメーターを少しずつ微調整します。まずは、radius を 0.2 または 0.3 に設定します。また、amount を 1.75 から最大 4（Photoshop での 400％に相当）まで少しずつ増やします。この状態で、求めている結果が得られるかを確認します。

シャープニングの結果でも満足できない場合は、radius の小数点以下を増やします。小数点以下を増やすごとに、amount を 1.75 からやり直し、4 まで少しずつ増やします。求めている結果になるまで、このプロセスを繰り返します。これらの値は、制作スタジオで実際に検証した手法ではありますが、初期値として別の値を使用し、他の戦略に従っても問題ありません。結果が満足できるものであるかは主観的な問題ですので、構造化された実験をおこなうことが重要です。

実験する際には、次の一般的な推奨事項をワークフローの最適化に役立ててください。

  • 様々なパラメーターを直接 URL 上でリアルタイムにテストします。
  • ベストプラクティスとしては、Dynamic Media 画像サービングコマンドを画像プリセット内にまとめることができます。画像プリセットは基本的に、$thumb_low$ や &product_high$ といったカスタムプリセット名が付けられた URL コマンドマクロです。URL パス内にカスタムプリセット名を指定すると、これらのプリセットが呼び出されます。この機能によって、Web サイトでの様々な画像使用パターンに応じたコマンドと画質設定を管理でき、URL の全体的な長さを短縮することができます。
  • Adobe Experience Manager では、取り込み時に画像のシャープニングを適用するなど、高度な画質調整機能も提供しています。レンダリング結果を調整および最適化するオプションがある高度なユースケースについては、Adobe Professional Services を参照してカスタマイズされたインサイトやベストプラクティスに役立ててください。

このページ