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

最終更新日: 2023-12-07
  • 作成対象:
  • User
    Admin

許容可能な結果のレンダリングには多くの要因が寄与するので、画質の最適化は時間のかかるプロセスになる場合があります。 個人の画質に対する知覚が異なるので、結果は部分的に主観的です。 構造化された実験が重要です。

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 の場合)を指定します。

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

  • 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 ピクセル

量を 1.75 から 4 に徐々に増やします。 シャープニングがまだ望ましくない場合は、半径を小数点単位で増やし、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%に相当)まで少しずつ増やします。この状態で、求めている結果が得られるかを確認します。

シャープニングの結果で満足できない場合は、半径を小数単位で増やします。 10 進数の増分ごとに、amount を 1.75 から再起動し、徐々に 4 に増やします。 目的の結果が得られるまで、この手順を繰り返します。 上記の値は、クリエイティブスタジオで検証されたアプローチですが、他の値から始めて、他の戦略に従うことができます。 結果が満足できるかどうかは主観的な問題なので、構造化実験が重要です。

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

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

このページ