Dynamic Media の画質最適化のベストプラクティス best-practices-for-optimizing-the-quality-of-your-images

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

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

画像形式(&fmt=)のベストプラクティス best-practices-for-image-format-fmt

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

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

画像サイズのベストプラクティス best-practices-for-image-size

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

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

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

画像のシャープニングに関するベストプラクティス best-practices-for-image-sharpening

画像のシャープ処理は、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 を使用すると、よりきめ細かい制御が可能です。値が小さいとエッジ部のピクセルのみがシャープニングされ、値が大きいとより幅広いピクセルがシャープにされます。

      • ***threshold ***(0~255、効果の感度)

        code language-none
        このパラメーターは、シャープにされるピクセルが周囲の領域とどの程度違えば、そのピクセルをエッジのピクセルと見なしてフィルターによりシャープにするかを決定するものです。 「**しきい値**」パラメーターを使用することで、肌のトーンなど、同じような色の領域が過剰にシャープニングされるのを防ぎます。 例えば、しきい値を 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 まで少しずつ増やします。 シャープニングの結果に満足できない場合は、半径を小数点以下の単位で増やして、再度量を 1.75 から 4 の範囲で実行します。 必要に応じて繰り返します。

モノクロパラメーターの設定は 0 のままにします。

JPEG圧縮のベストプラクティス (&qlt=best-practices-for-jpeg-compression-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=best-practices-for-jpeg-sizing-jpegsize

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

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

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

ベストプラクティスのまとめ best-practices-summary

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

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

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

画像をさらに最適化する必要がある場合は、半径を0.2または0.3に設定して、徐々にシャープニング(アンシャープマスク)パラメーターを微調整します。 その後、徐々に量を1.75から最大4に増やします(Photoshopでは400%に相当)。 目的の結果が得られることを確認します。

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

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

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