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

CAUTION
AEM 6.4 の拡張サポートは終了し、このドキュメントは更新されなくなりました。 詳細は、 技術サポート期間. サポートされているバージョンを見つける ここ.

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

AEMには、画像を調整および最適化し、結果をレンダリングするための 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 サイト上の画像を制御する際の最も複雑な側面で、多くのミスが生じます。AEMでのシャープニングとアンシャープマスクの仕組みについて詳しくは、 Adobe Dynamic Media Classicの画質とシャープのベストプラクティス AEMにも適用されるガイドです。

関連トピック アンシャープマスクを使用した画像のシャープニング.

AEM を使用すれば、取り込み時、配信時またはその両方で画像をシャープにすることができます。ただし、ほとんどの場合、1 つの方法のみを使用して画像にシャープを適用し、両方は使用しないでください。 配信時に URL 上で画像をシャープニングすると、通常、最適な結果が得られます。

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

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

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

    • &op_sharpen=amount,radius,threshold

      • amount(0~5、効果の強さ)

      • radius(0~250、シャープニングにされるオブジェクトの周囲に描かれる「シャープニングされた線」の幅、ピクセル単位)

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

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

        これら 3 つのパラメーターの設定方法の詳細については、フィルターで使用するベストプラクティスなど、 Adobe Dynamic Media Classicの画質とシャープのベストプラクティス ガイド (AEM上のDynamic Mediaにも適用されます )

    • AEM では第 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=) best-practices-for-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=<size_in_kilobytes>)。画像配信で許可される最大サイズを定義します。
  • &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

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

画像をさらに最適化する必要がある場合は、シャープニング(アンシャープマスク)のパラメーターを少しずつ微調整します。まずは、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 の全体的な長さを短縮することができます。
  • また、AEMでは、取り込み時に画像をシャープに適用するなど、画質を調整するより高度な方法も提供されています。 レンダリング結果をさらに調整して最適化するためにこの機能を利用できるような高度な使用例については、Adobe Professional Services がお客様向けにカスタマイズした見識やベストプラクティスを提供して支援いたします。
recommendation-more-help
4452738f-2bdf-4cd4-9b45-905a69d607ad