画質を最適化するためのベストプラクティス 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 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 Image Serving で実行される最も一般的なタスクの 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を使用すると、取り込み時、配信時またはその両方で画像にシャープを適用できます。 ただし、通常は、1 つの方法のみを使用して画像にシャープを適用します。両方を使用することはできません。 通常は、配信時に 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=

    • The 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圧縮パラメーター ( &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