[AEM Assets]{class="badge positive" title="AEM Assetsに適用）。"}
画質最適化のベストプラクティス best-practices-for-optimizing-the-quality-of-your-images
画像の画質を最適化すると、多くの要素が許容できる結果をレンダリングするため、時間のかかるプロセスになる可能性があります。 画質に対する個人の感覚は異なるので、結果は一部主観的なものです。 構造化された実験を行うことが重要になります。
Adobe Experience Manager には、画像をチューニングおよび最適化して結果をレンダリングするための、100 を超える Dynamic Media 画像配信コマンドがあります。 次のガイドラインは、一部の基本コマンドとベストプラクティスを使用してこのプロセスを効率化し、すぐに良好な結果を得るために活用できます。
Dynamic Media でスマートイメージングを有効にする bp-enable-smart-imaging
スマートイメージング：
- Dynamic Media でスマートイメージングを有効にすると、クライアントのブラウザーの機能に基づいて、画像の形式、サイズ、画質を自動的に最適化できます。
詳しくは、 スマートイメージング にアクセスしてください。 - これらのパラメーターを動的に調整することで、画像配信のパフォーマンスが向上します。
- 自己評価ツールのスナップショットを使用すると、スマートイメージングを評価できます。
画像形式：
- ユースケースで特に必要な場合を除き、URL で明示的な
fmt=webpまたはfmt=avifコマンドを使用しないでください。 - スマートイメージングでは最適な形式を自動的に選択し、最適な帯域幅の増加を実現します。
デフォルトの動作：
- URL に format コマ ンドが指定されておらず、スマートイメージングが有効になっていない場合、Dynamic Media 画像配信ではデフォルトで JPEG 形式が使用されます。
画像形式について十分な情報にもとづいて選択し、スマートイメージングを有効にすることで、パフォーマンスとユーザーエクスペリエンスに影響を与えることができます。
ソース画像を選択するためのベストプラクティス bp-select-source-image
ソース画像を操作する際の基本的な考慮事項は次のとおりです。
-
ソース画像の形式：
- PNG、TIFF、PSDなどの可逆形式を使用すると、圧縮アーティファクトを発生させずに画質を高品質に保つことができます。
- これらの形式では、元のデータがすべて保持されるので、編集やさらなる処理に最適です。
-
ソース画像のサイズ：
- 高解像度の画像から始めると、より詳細な情報と柔軟性が得られます。
- 画像を様々なサイズで表示する必要がある場合（例えば、デバイス間や画面解像度間）、ソース画像を大きくすると、拡大／縮小が向上します。
- ズームをサポートする画像（製品写真など）の場合は、長辺で約 2,000 ピクセル以上を目指します。
- ズームを必要としないロゴやバナーは、目的に応じて必要な最大サイズでアップロードできます。
これらの選択をソースレベルで行うことで、ビジュアルコンテンツの品質に貢献できます。
画像サイズのベストプラクティス best-practices-for-image-size
画像サイズを動的に縮小することは、ごく一般的なタスクの 1 つです。 サイズを指定し、さらにオプションでどのダウンサンプリングモードを使用して画像をダウンスケールするかを指定します。
- 画像のサイズを変更するには、
&wid=<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） - Adobe Photoshop シャープフィルターと同様に、動的なサイズ変更の後に基本的なシャープ処理を適用します。 このメソッドはユーザー設定できません。必要でない限り&op_sharpenの使用を避けてください。 -
アンシャープマスク （
&op_USM） – アンシャープマスクは、業界標準のシャープニングフィルターです。 ベストプラクティスは、以下のガイドラインに従ってアンシャープマスクを使用して画像をシャープニングすることです。 アンシャープマスクによって、次の 3 つのパラメーターを制御できます。-
&op_sharpen=amount,radius,threshold- amount（0～5、効果の強さ）
- radius（0～250、シャープニングにされるオブジェクトの周囲に描かれる「シャープニングされた線」の幅、ピクセル単位）
パラメーターの半径と量には反対の効果があることに注意してください。 radius を減らした場合は、amount を増やして補うことができます。 radius を使用すると、よりきめ細かい制御が可能です。値が小さいとエッジ部のピクセルのみがシャープニングされ、値が大きいとより幅広いピクセルがシャープにされます。
- threshold（0～255、効果の感度）
このパラメーターは、シャープにされるピクセルが周囲の領域とどの程度違えば、そのピクセルをエッジのピクセルと見なしてフィルターによりシャープにするかを決定するものです。 この threshold パラメーターによって、肌のトーンなど、同じような色の領域を過剰にシャープニングすることを防ぎます。 例えば、threshold の値を 12 にすると、肌のトーンの明るさにわずかな差があっても無視して「ノイズ」が加わるのを防ぎながら、まつげと肌の境界など、コントラストの高い領域に対してエッジコントラストを追加することができます。
フィルターを使用したベストプラクティスを含む、これら 3 つのパラメーターの設定方法について詳しくは、次のリソースを参照してください。
-
ベストプラクティスに関するホワイトペーパー『Adobe Dynamic Media Classic の画質とシャープ処理のベストプラクティス』は Experience Manager にも当てはまります。
-
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-jpef-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
設定をこのように組み合わせると、ほとんどの状況において優れた結果になります。
画像をさらに最適化する必要がある場合は、半径を0.2または0.3に設定して、徐々にシャープニング（アンシャープマスク）パラメーターを微調整します。 その後、徐々に量を1.75から最大4に増やします（Adobe Photoshopでは400%に相当）。 目的の結果が得られることを確認します。
シャープニングの結果でも満足できない場合は、半径の小数点以下を増やします。 小数点以下を増やすごとに、量を 1.75 からやり直し、4 まで少しずつ増やします。 求めている結果になるまで、このプロセスを繰り返します。 上記の値は、クリエイティブスタジオが検証したアプローチですが、他の値から始めて、他の戦略に従うことができます。 結果が満足のいくものであるかどうかは主観的な問題であり、構造化された実験が不可欠です。
実験する際には、次の一般的な推奨事項がワークフローの最適化に役に立ちます。
- URLで異なるパラメーターをリアルタイムにテストします。
- ベストプラクティスとしては、Dynamic Media 画像サービングコマンドを画像プリセット内にまとめることができます。 画像プリセットは、
$thumb_low$や&product_high$などのカスタムプリセット名を持つURL コマンドマクロです。 URL パス内にカスタムプリセット名を指定すると、これらのプリセットが呼び出されます。 この機能によって、Web サイトでの様々な画像使用パターンに応じたコマンドと画質設定を管理でき、URL の全体的な長さを短縮することができます。 - Experience Managerでは、取り込み時にシャープを適用するなど、画質を調整する高度な方法も用意されています。 レンダリング結果を調整して最適化するために、アドビのコンサルティングサービスでは、カスタマイズされたインサイトとベストプラクティスを提供してユーザーを支援します。