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

画質の最適化には多くの時間がかかります。 許容可能な結果のレンダリングには、多くの要因が関与します。 知覚される画質は各個人で異なるので、結果はある程度主観的なものと言えます。構造的に実験を行うことが重要です。

Adobe Dynamic Media Classicには、画像をチューニングおよび最適化して結果をレンダリングするための、100 を超える画像サービングコマンドがあります。 重要なコマンドおよびベストプラクティスを使用して、このプロセスを効率化し、良い結果をすばやく得るために、次のガイドラインが役に立ちます。

関連トピック スマートイメージング.

TIP
Dynamic Mediaを使用して、Dynamic Mediaの画像修飾子とスマートイメージングのメリットを体験してみましょう スナップショット.
スナップショットは、最適化された動的な画像配信におけるDynamic Mediaのパワーをわかりやすく伝えるために作られた、視覚的なデモツールです。 テスト画像やDynamic Mediaの URL を試して、様々なDynamic Media画像修飾子の出力を視覚的に観察し、次の項目に対するスマートイメージング最適化を確認します。
  • ファイルサイズ (WebP および AVIF 配信を使用)
  • ネットワーク帯域幅
  • DPR (デバイスピクセル比)
スナップショットの使用がどれほど簡単かを知るには、 スナップショットのトレーニングビデオ (3 分 17 秒)。

画像形式(&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

画像サイズの動的な縮小は、Dynamic Media画像サービングで実行される最も一般的なタスクの 1 つです。 このタスクでは、サイズを指定し、さらにオプションとして画像の縮小に使用するダウンサンプリングモードを指定します。

  • 画像のサイズ設定には、を使用するのが最適で最も簡単なアプローチです &wid=<value> および &hei=<value> または &hei=<value>. これらのパラメーターにより、縦横比に応じて画像の幅が自動的に設定されます。
  • &resMode=<value> ダウンサンプリングに使用するアルゴリズムを制御します。 次から開始 &resMode=sharp2. この値により、最良の画質になります。ダウンサンプリング値の使用中 =bilin より高速な場合、アーティファクトのエイリアシングが発生します。

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

画像へのシャープ適用のベストプラクティス best-practices-for-image-sharpening

画像へのシャープ適用は、Web サイト上の画像を管理する上で最も複雑な側面であり、ミスが多く起きるところです。次の役立つリソースを参照し、Adobe Dynamic Media Classicでのシャープニングおよびアンシャープマスクの仕組みについて詳しく学んでください。

ベストプラクティスに関するホワイトペーパー Adobe Dynamic Media Classicおよび Image Server での画像のシャープニング.

Adobe Dynamic Media Classicを使用すれば、取り込み時、配信時またはその両方で画像をシャープにすることができます。 ただし、通常は、両方の方法ではなくどちらか一方のみを使用して画像をシャープにします。 通常は、配信時に 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 つのパラメータの設定方法の詳細については、を参照してください。 Adobe Dynamic Media Classicおよび Image Server での画像のシャープニング.

      • Adobe Dynamic Media Classicでは第 4 パラメーターの monochrome ( 0,1)に設定します。 このパラメーターは、値を使用して、各カラーコンポーネントに個別にアンシャープマスクを適用するかどうかを決定します 0 または、値を使用して画像の明るさ/強さに変更します 1.

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

  • Web サイト:0.2 ~ 0.3 pixel
  • 写真印刷(250 ~ 300 ppi):0.3 ~ 0.5 pixel
  • オフセット印刷(266 ~ 300 ppi):0.7 ~ 1.0 pixel
  • カンバス印刷(150 ppi):1.5 ~ 2.0 pixel

amount を 1.75 から 4 まで徐々に増やします。シャープ適用で必要な効果が得られない場合は、radius を小数単位で増やして、もう一度 amount を 1.75 ~ 4 の間で動かします。必要に応じて繰り返します。

monochrome パラメーター設定は 0 のままにします。

JPEG 圧縮(&qlt=)のベストプラクティス best-practices-for-jpeg-compression-qlt

  • このパラメーターは JPG エンコーディングの画質を制御します。値を高く設定すると画質は上がりますがファイルサイズが大きくなり、低く設定すると画質は下がりますがファイルサイズが小さくなります。このパラメーターの範囲は 0 ~ 100 です。

  • 高画質を目的として最適化する場合にも、このパラメーターの値を 100 以外に設定してください。90 や 95 の設定と 100 の設定の違いはほぼ認識できない程度ですが、100 を設定すると画像ファイルのサイズが不必要に増加します。したがって、画質は最適化するものの、イメージファイルが大きくなりすぎないようにするには、 qlt= 値は 90 または 95 です。

  • 小さい画像ファイルサイズに対して最適化を行い、画質を許容レベルに保つには、 qlt= 値を 80 に設定します。 70 ~ 75 以下の値に設定すると、画質が大幅に低下します。

  • ベストプラクティスとして、真ん中に留まるには、を設定します qlt= 値を 85 に設定すると、中間に保たれます。

  • でのクロマフラグの使用 qlt=

    • この qlt= パラメーターには、正常値を使用したRGB色度のダウンサンプリングをオンにできる 2 つ目の設定があります ,0 (デフォルト)を選択するか、値を使用してオフにします ,1.
    • 簡単にするために、まず、RGB色度のダウンサンプリングをオフにします( ,1)に設定します。 この設定により通常は画質が上がります。特にシャープなエッジやコントラストを多く含む人工的な画像ではそうなります。

JPG圧縮使用のベストプラクティスとして &qlt=85,0.

JPEG サイズ(&jpegSize=)のベストプラクティス best-practices-for-jpeg-sizing-jpegsize

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

  • このパラメーターはキロバイト単位( jpegSize=<size_in_kilobytes>)に設定します。 このパラメーターには、画像配信で許可される最大サイズを定義します。
  • &jpegSize= JPG圧縮パラメーターとやり取りする &qlt=. JPG指定したJPG圧縮パラメーター( &qlt=)が次を超えていません jpegSize 値の場合、画像はで返されます。 &qlt= 定義したとおりに。 そうでない場合、 &qlt= は、画像が許容される最大サイズに収まるまで、またはシステムが収まらないと判断してエラーを返すまで、徐々に減少します。

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

ベストプラクティスのまとめ 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% に相当)の範囲で徐々に増やします。求められる結果が得られたかを確認します。

シャープの結果にまだ満足できない場合は、radius を小数単位で増やします。小数単位で増やすたびに、もう一度 amount を 1.75 から始め、徐々に 4 まで増やします。求められる結果が得られるまで、このプロセスを繰り返します。上記の値は、制作スタジオで検証されてきたアプローチですが、他の値から始めて、別の方法に従っても問題ありません。ユーザーが満足できる結果であるかどうかは主観的な問題であるので、構造化された実験が重要になります。

実験する際には、次の一般的な推奨事項がワークフローの最適化に役立ちます。

  • URL 上で直接、またはAdobe Dynamic Media Classicの画像調整機能を使用して、様々なパラメーターをリアルタイムで試し、テストします。 調整操作のリアルタイムプレビューが表示されます。
  • ベストプラクティスとして、Dynamic Media画像サービングコマンドを画像プリセットにグループ化できます。 画像プリセットは、基本的に、などのカスタムプリセット名を持つ URL コマンドマクロです $thumb_low$ および &product_high$. URL パス内にカスタムプリセット名を指定すると、これらのプリセットが呼び出されます。 この機能により、Web サイト上での様々な画像使用パターンに関するコマンドおよび画質設定を管理でき、URL 全体の長さを短縮することもできます。
  • Adobe Dynamic Media Classicでは、取り込み時に画像のシャープニングを適用するなど、画質を調整するためのより高度な方法も提供します。 レンダリングされた結果をさらに調整および最適化することが可能な高度なユースケースについては、Adobe Professional Servicesを参照してカスタマイズされたインサイトやベストプラクティスに役立ててください。
recommendation-more-help
ba789e76-bace-4e0e-bd26-52691fb2cb26