[AEM Assets]{class="badge positive" title="AEM Assetsに適用）。"}
画質最適化のベストプラクティス best-practices-for-optimizing-the-quality-of-your-images
Adobe Experience Managerでは、画像の調整、最適化、レンダリング用に 以上の100個のDynamic Media画像配信コマンド を提供しています。 この広範なコマンドセットにより、解像度や圧縮からシャープニングやカラーレンダリングまで、画像の処理や提供のほぼすべての側面を制御できます。
画質の最適化は、反復的で時間のかかるプロセスです。いくつかの異なる要因が許容される結果に貢献します。例えば、解像度、圧縮レベル、ファイル形式、シャープニング、色精度などです。 また、画像の画質に関する認識が異なり、表示条件がディスプレイ、ブラウザー、デバイスごとに異なるため、結果も部分的に主観的なものになります。 この変動のため、構造化された実験が不可欠です。一度に1つの変数を体系的に調整し、レンダリングされた出力を比較することが、一貫した品質を得るための最も信頼できる方法です。
次のベストプラクティスは、一連のコアコマンドと実証済みの手法を活用して、プロセスを合理化し、高品質な結果を効率的に提供するのに役立ちます。 それらを適用することは、デザインだけでなく重要です。適切に最適化された画像は、ファイルサイズと読み込み時間を短縮し、あらゆるデバイスとネットワーク条件をまたいで、ページパフォーマンス、ユーザーエクスペリエンス、配信を向上させます。
画質に影響する主な要因
- 解像度とディメンション – 不要なアップスケーリングやダウンスケーリングのアーティファクトを避けるために、配信されたピクセルサイズを実際の表示サイズに一致させます。
- 圧縮 – 積極的な圧縮によって帯域幅が減少しますが、アーティファクトが発生する可能性があるため、表示画質の損失に対してファイルサイズのバランスを取ります。
- ファイル形式 – 品質と配信効率のバランスを取るために、画像コンテンツとターゲットデバイスに最適な形式を選択します。
- シャープニング — シャープニングを適用して、サイズ変更時に発生するソフト化を修正し、知覚されたディテールを復元します。
- カラーレンダリング – 異なるディスプレイや表示環境で画像が一貫性を持って表示されるように、正確なカラーを保持します。
推奨アプローチ
- ベースラインを設定します。 デフォルト設定を使用して画像をレンダリングすると、比較のための参照点が得られます。
- 一度に1つの変数を調整します。 単一のコマンドまたはパラメーターを変更し、その結果を評価します。変数を分離すると、どの調整がどの効果を生み出したかが明確になるからです。
- レンダリングされた出力を視覚的に比較します。 画質は部分的に主観的であるため、代表的なデバイスやディスプレイで結果を並べて確認します。
- パフォーマンスに対する品質のバランスを取ります。 品質の改善により、ページの読み込み時間と配信に悪影響が及ぶほどファイルサイズが増加しないことを確認してください。
- 成功した設定を標準化します。 一貫した結果を生み出すコマンドの組み合わせを特定したら、それらを再利用して将来の最適化を合理化します。
これらの重要なコマンドと構造化された実験を組み合わせることで、Dynamic Media アセット全体で迅速かつ反復的に、高品質でパフォーマンスの高い画像配信を実現します。
Dynamic Media でスマートイメージングを有効にする bp-enable-smart-imaging
スマートイメージング：
- Dynamic Mediaでスマートイメージングを有効にすると、クライアントブラウザーの機能に基づいて、画像format、size、および quality を自動的に最適化できます。 スマートイメージングでは、各リクエストに対してこの形式のネゴシエーションが実行され、特定のブラウザーがサポートする最も効率的な画像が提供されるため、ページの読み込みが速くなり、帯域幅が少なくなります。
詳しくは、 スマートイメージング にアクセスしてください。 - 各ブラウザーに最適な最小のファイルを配信することで、転送されるペイロードを削減し、ページ読み込み時間を短縮できるため、これらのパラメーターを動的に調整することで、画像配信のパフォーマンスが向上します。
- 管理者と開発者は、自己評価ツール スナップショット を使用してスマートイメージングを評価できます。
画像形式：
- ユースケースに特に必要な場合を除き、URLで
fmt=webp（WebP）またはfmt=avif（AVIF）コマンドを明示的に使用しないでください。 URLの形式をハードコーディングすると、自動ネゴシエーションが上書きされ、スマートイメージングがより効率的な代替手段をサポートするブラウザーに最適な形式を提供するのを防ぐことができます。 - スマートイメージングは、各リクエストに最適な形式を自動的に選択します。 これにより、転送されるバイト数を減らし、最適な帯域幅のゲインを実現します。
デフォルトの動作：
- URLにformat コマンドが指定されておらず、スマートイメージングが有効になっていない場合、Dynamic Mediaの画像配信はデフォルトで JPEG 形式になります。 その結果、WebPや AVIF などの次世代形式は、スマートイメージングが有効になるまで自動的に提供されません。
画像フォーマットを十分な情報にもとづいて選択し、スマートイメージングを有効にすることで、配信パフォーマンスとユーザーエクスペリエンスを直接向上させることができます。
ソース画像を選択するためのベストプラクティス bp-select-source-image
ソース画像を操作する際の基本的な考慮事項は次のとおりです。
-
ソース画像の形式：
- 可逆フォーマット — PNG （Portable Network Graphics）、TIFF（Tagged Image File Format）、またはPSD（Photoshop Document）を使用すると、画質が高くなり、JPEGなどの非可逆フォーマットによって生じる見える歪みである圧縮アーティファクトが排除されます。
- これらの形式は、元のすべてのピクセルデータを保持します。 これにより、ファイルが処理されるたびに品質が失われないので、編集、レタッチ、繰り返し再保存に最適になります。
-
ソース画像のサイズ：
- 高解像度の画像から開始すると、小さな画像をアップスケーリングしてもキャプチャされなかったディテールを復元できないため、より詳細で柔軟性が高まります。
- 画像を異なるサイズ（デバイスや画面解像度など）で表示する必要がある場合は、大きなソース画像を使用すると、すべてのターゲットディメンションでより適切な拡大とシャープな結果を得ることができます。
- 顧客が細部を検査する製品写真など、ズームをサポートする画像の場合は、最も長い側に約2,000 ピクセル以上のサイズを目指します。
- ズームを必要としないロゴやバナーは、意図した使用に必要な最大サイズでアップロードできます。
これらの選択をソースレベルで行うと、最終的なビジュアルコンテンツの品質が直接決定されます。なぜなら、ダウンストリームのサイズ変更、切り抜き、圧縮の各ステップは、元のファイルの強みや弱みを継承しているからです。
画像サイズのベストプラクティス best-practices-for-image-size
画像サイズを動的に縮小することは、画像配信で最も一般的な作業のひとつです。 ターゲット寸法を指定し、オプションで、画像のダウンスケーリングに使用するダウンサンプリングモードを選択する必要があります。 推奨されるベストプラクティス URL パターンは&wid=<value>&hei=<value>&resMode=sharp2 （高さのみが設定されている場合は&hei=<value>&resMode=sharp2）で、サイズ変更された画像に対して最高のビジュアル品質を提供します。
サイズ変更パラメーター
画像のサイズを変更するには、&wid=<value>と &hei=<value> を使用します。
&wid=<value>は画像の幅を設定します。&hei=<value>は画像の高さを設定します。- 1つの寸法のみを指定すると、これらのパラメーターは、画像の縦横比に従って他の寸法を自動的に計算し、元の縦横比を維持し、歪みを防ぎます。
ダウンサンプリングモード（resMode）
&resMode=<value>は、ダウンサンプリングに使用されるアルゴリズム （画像のピクセル寸法を縮小するプロセス）を制御します。 アルゴリズムの選択は、最終的に拡大/縮小された画像のシャープと画質に直接影響します。
&resMode=sharp2で始める。 この値は、画像を縮小する際のエッジのディテールと細かいテクスチャを保持し、鮮明でアーティファクトのない結果を生み出すため、最高の画質を提供します。&resMode=bilin（バイリニア）は高速ですが、ピクセルを平均化するため、多くの場合、エイリアシングのアーティファクト（目に見えるギザギザのエッジ、モアレ パターン、細かいディテールの損失）が生成されます。 その結果、bilinは画質を処理スピードと交換します。
bilinとは異なり、sharp2 モードでは視覚的な忠実性が優先されるため、高品質のサイズ変更された画像を配信する場合に最適です。
ベストプラクティス
画像のサイズ変更のベストプラクティスとして、&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では、取り込み、配信時、またはその両方で画像をシャープにすることができます。 ベストプラクティスとして、両方ではなく、1つの方法のみを使用して画像をシャープ化します。 URLを使用して配信時に画像をシャープ化すると、取り込んだアセットにシャープ化をベイク化するのではなく、最終的にレンダリングされるサイズに合わせてシャープを調整できるため、ほとんどのワークフローで最高の結果が得られます。
画像のシャープニングでは、次の 2 つの方法を使用できます。
-
シンプル シャープ （
&op_sharpen） - Adobe Photoshop シャープフィルターと同様に、動的なサイズ変更の後に基本的なシャープを適用します。 このメソッドはユーザー設定できません。必要でない限り&op_sharpenの使用を避けてください。 -
アンシャープマスク （
&op_USM） - アンシャープマスクは、エッジのコントラストを上げて画像を鮮明に見せるための業界標準のシャープフィルターです。 ベストプラクティスは、以下のガイドラインに従ってアンシャープマスクを使用して画像をシャープニングすることです。 アンシャープマスクによって、次の 3 つのパラメーターを制御できます。-
&op_sharpen=amount,radius,threshold- amount （0-5、効果の強さ）
- 半径 （0-250、シャープ化されたオブジェクトの周囲に描かれた「シャープ線」の幅（ピクセル単位））
半径と 量 のパラメーターには反対の効果があります。半径を小さくすると効果が弱くなるため、量を増やすことで補正できます。 Radiusでは、値を小さくするとエッジのピクセルだけがシャープになり、値を大きくするとピクセルの幅が広くなり、ハローがより強調されるので、細かい制御が可能です。
- しきい値 （0-255、効果の感度）
このパラメーターは、シャープにされるピクセルが周囲の領域とどの程度違えば、そのピクセルをエッジのピクセルと見なしてフィルターによりシャープにするかを決定するものです。 この threshold パラメーターによって、肌のトーンなど、同じような色の領域を過剰にシャープニングすることを防ぎます。 例えば、しきい値 12 を指定すると、肌のトーンの明るさにわずかな変化が無視され、「ノイズ」が加えられるのを避けながら、まつげと肌が合う場所などの高コントラスト領域にエッジコントラストが加わります。
フィルターを使用したベストプラクティスを含む、これら 3 つのパラメーターの設定方法について詳しくは、次のリソースを参照してください。
-
ベストプラクティスに関するホワイトペーパー『Adobe Dynamic Media Classic の画質とシャープ処理のベストプラクティス』は Experience Manager にも当てはまります。
-
Experience Managerでは、4番目のパラメーターを制御することもできます：モノクロ（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の圧縮に推奨されるベストプラクティス設定は
&qlt=85,0です。 この値は、大部分の画像に対して、制御されたファイルサイズに対して高い画質をバランスさせます。 -
このパラメーターでは、JPG エンコーディング品質を制御します。 より大きい値は、高画質の画像ですが、ファイルサイズが大きいことを意味します。より小さい値は、低画質の画像ですが、ファイルサイズが小さいことを意味します。 有効な範囲は 0 ～ 100 です。
-
品質を最適化するには、パラメーター値を 100 に設定しないでください。 90または95と 100 の設定の違いは、人間の目にはほとんど認識できません。 このため、100の設定は、視覚的な利益を得ることなく、画像ファイルのサイズを不必要に大きくします。 したがって、サイズが大きすぎるファイルを避けながら品質を最適化するには、
qlt= valueを 90または95 に設定します。 -
画質を許容レベルに保ちながら、ファイルサイズを小さく最適化するには、
qlt= valueを 80 に設定します。 70 ～ 75未満の値は、アーティファクトのブロック、バンディング、ディテールの損失など、目に見える大きな劣化を招くため、実稼動イメージには推奨されません。 -
一般的なベストプラクティスとして、
qlt= valueを 85 に設定します。これにより、幅広い画像コンテンツで品質とファイルサイズの間に信頼性の高い中間基盤が提供されます。 -
qlt=でクロマフラグを使用qlt=パラメーターには、RGBの色度ダウンサンプリングを制御する2番目の設定があります。この設定は、輝度の詳細を維持しながらカラー（色度）情報の解像度を下げる圧縮技術です。 値,0を使用して、値,1または off を使用して、onのダウンサンプリングを開始します。- ほとんどのワークフローでは、RGBの色度ダウンサンプリングがoff （
,0）に変わりました。 この設定では、フル解像度のカラーデータが保持されるため、ダウンサンプルのアーティファクトが表示される場合に、シャープなエッジ、高コントラスト、細かいカラー変化を備えた合成画像で最も重要なカラーのデータが保持されます。
JPG圧縮のベストプラクティスとして、&qlt=85,0を使用してください。
JPEG サイズ変更のベストプラクティス （&jpegSize=） best-practices-for-jpeg-sizing-jpegsize
&jpegSize= パラメーターは、配信済み画像が指定された最大サイズを超えないことを保証するため、JPEG画像を限られたメモリを持つ デバイス に配信するために必須です。 ファイルサイズに上限を適用することで、大きすぎる画像が制約のあるクライアントで利用可能なメモリを圧倒するのを防ぎます。
&jpegSize=の仕組み
- 構文
jpegSize=<size_in_kilobytes>を使用して&jpegSize=をキロバイト単位で設定します。 この値は、画像配信に許可される最大ファイルサイズ を定義します。 &jpegSize=は、JPEGの画質（圧縮）パラメーター&qlt=と組み合わせて使用できます。 指定された&qlt=値のJPEGの応答が not がjpegSize制限を超えない場合、画像は定義されたとおりに&qlt=で返され、要求された画質が保持されます。- 画像 が指定された
&qlt=でjpegSizeの制限を超えている場合、画像が許容される最大サイズに収まるまで、システムは&qlt=を段階的に減少させます。 その結果、サイズ制約を満たすために必要な分だけ品質を低下させ、ターゲットデバイスとの互換性を確保する。 - 画像を最大許容サイズ内に収まるように縮小できないとシステムが判断した場合、準拠していない画像を配信するのではなくエラーを返します。
制限付きメモリデバイスのベストプラクティス
ベストプラクティスとして、は&jpegSize=を設定し、メモリが限られているデバイスにJPEG イメージを配信する場合は&qlt=と組み合わせます。 この組み合わせにより、ターゲット品質とハードサイズの両方を指定できるので、システムはデバイスのメモリ制限内に収まる最高の品質を提供します。
ベストプラクティスのまとめ best-practices-summary
小さなファイルサイズ で高画質を実現するには、Dynamic Media画像サービングパラメーターの次の推奨される組み合わせから始めます。
fmt=jpg&qlt=85,0&resMode=sharp2&op_usm=1.75,0.3,2,0
この組み合わせは、ほとんどの状況で優れた結果を生み出し、大部分の画像の信頼性の高いベースラインとして機能します。 op_usmの値は アンシャープマスク（USM） のシャープ化を適用します。パラメーターは、効果の量、半径、しきい値、およびモノクロの動作を制御します。
シャープの微調整（アンシャープマスク）
画像をさらに最適化する必要がある場合は、次の手順を使用して、アンシャープマスク（USM） パラメーターを徐々に調整します。
- 開始点として 半径を0.2または0.3 に設定します。
- Adobe Photoshop の 400%に相当する、金額を1.75から最大4まで増やします。
- レンダリングされた画像を確認して、目的の結果が得られることを確認します。
- シャープ化の結果がまだ満足できない場合は、半径を10進数で増加させます。
- 半径の10進数ごとに、1.75で量を再開し、徐々に 4 に増やします。
- 目的の結果が達成されるまで、手順4と5を繰り返します。
上記の値は、クリエイティブスタジオが検証したアプローチを表していますが、他の値から始めて、他の戦略に従うことができます。 結果が満足のいくものであるかどうかは主観的な問題であるため、構造化された反復的な実験を行うことで、各画像のシャープネス、画質、ファイルサイズの最適なバランスを取ることができます。
ワークフロー最適化のヒント
テストを行う際には、次の一般的な提案がワークフローの最適化に役立ちます。
- パラメーターをURLでリアルタイムにテストします。 URLで値を直接調整すると、エフェクトをすぐにプレビューし、すばやく反復できます。
- コマンドを画像プリセットにグループ化します。 Dynamic Media画像サービングコマンドは、画像プリセットにグループ化できます。 画像プリセットは、
$thumb_low$や&product_high$など、カスタムプリセット名が割り当てられたURL コマンドマクロのセットです。 URL パスでカスタムプリセット名を参照すると、これらのプリセットが呼び出されます。 この機能は、web サイト全体のさまざまな画像使用パターンのコマンドと品質設定を管理し、再利用によって一貫した設定を促進し、URLの全体的な長さを短縮するのに役立ちます。 - Experience Managerで高度な調整オプションを使用します。 Experience Managerでは、取り込み時にシャープを適用するなど、画質を調整する高度な方法も用意されています。 レンダリング結果を調整および最適化するために、Adobeのコンサルティングサービス では、カスタマイズされたinsightとベストプラクティスを提供できます。