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

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

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

​ スマートイメージング ​も参照してください。

TIP
Dynamic Media スナップショットを使用して、Dynamic Media画像修飾子とスマートイメージングのメリットを試してみて確認します。
Snapshotは、最適化されたダイナミックな画像配信を実現する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 Image Servingはデフォルトで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でのシャープとアンシャープマスクの仕組みについては、次の参考資料を参照してください。

PDFのベストプラクティスのホワイトペーパー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、シャープ化されたオブジェクトの周囲に描画される「シャープ化ライン」の幅(ピクセル単位))

        パラメーターradiusamountは相互に作用することに注意してください。 radiusを減らすと、amountを増やすことで補正できます。 Radiusを使用すると、値を小さくするとエッジのピクセルのみがシャープになり、値を大きくするとピクセルの幅が広くなり、細かく制御できます。

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

        このパラメーターは、シャープを適用するピクセルが周囲の領域とどの程度異なれば、端のピクセルとみなされフィルターによりシャープが適用されるかを指定します。 しきい値は、肌のトーンのような類似した色の領域に過度なシャープが適用されることを防ぐために使用できます。 例えば、しきい値を12に設定すると、肌のトーンの明るさにわずかな変化が無視され、「ノイズ」が加えられるのを避けながら、まつげと肌の位置などの高いコントラスト領域にエッジコントラストが加わります。

        フィルターで使用するベストプラクティスを含め、これら3つのパラメーターを設定する方法について詳しくは、「Adobe Dynamic Media ClassicおよびImage Serverで画像をシャープにする」を参照してください。

      • Adobe Dynamic Media Classicでは、4番目のパラメーターであるモノクロ(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=でchroma フラグを使用しています

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

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=で画像が返されます。 それ以外の場合は、画像が許容される最大サイズに収まるまで、&qlt=が徐々に減少します。 または、システムが適合できないと判断してエラーを返すまで。

メモリが限られているデバイスにJPG イメージを配信する場合は、ベストプラクティスとして、&jpegSize=を設定し、パラメーター&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%に相当)。 求められる結果が得られたかを確認します。

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

テストを行う際には、次の一般的な提案がワークフローの最適化に役立ちます。

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