画質を最適化するためのベストプラクティス best-practices-for-optimizing-the-quality-of-your-images
画質の最適化には多くの時間がかかります。 許容可能な結果のレンダリングには、多くの要因が関与します。 知覚される画質は各個人で異なるので、結果はある程度主観的なものと言えます。構造的に実験を行うことが重要です。
Adobe Dynamic Media Classicには、画像をチューニングおよび最適化して結果をレンダリングするための、100 を超える画像サービングコマンドがあります。 重要なコマンドおよびベストプラクティスを使用して、このプロセスを効率化し、良い結果をすばやく得るために、次のガイドラインが役に立ちます。
スマートイメージングも参照してください。
- ファイルサイズ (WebP および AVIF 配信を使用)
- ネットワーク帯域幅
- DPR (デバイスピクセル比)
画像形式(&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
は互いに反作用することに注意してください。amount
を増やすことで減radius
を補うことができる。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=
パラメーターには、2 つ目の設定があり、標準値,0
(デフォルト)を使用してRGB色度のダウンサンプリングをオンにしたり、値,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=
)を使用したJPG response がjpegSize
の値を超えない場合、画像は定義された&qlt=
を返します。 それ以外の場合は、画像が許容される最大サイズに収まるまで、&qlt=
を徐々に小さくします。 または、システムが適合しないと判断し、エラーを返すまで有効です。
ベストプラクティスとして、メモリ容量が限られているデバイスにJPG イメージを配信する場合は、&jpegSize=
を設定して &qlt=
パラメーターを追加します。
ベストプラクティスのまとめ 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画像サービングコマンドを画像プリセットにグループ化できます。 画像プリセットは、基本的に、
$thumb_low$
や&product_high$
などのカスタムプリセット名を持つ URL コマンドマクロです。 URL パス内にカスタムプリセット名を指定すると、これらのプリセットが呼び出されます。 この機能により、Web サイト上での様々な画像使用パターンに関するコマンドおよび画質設定を管理でき、URL 全体の長さを短縮することもできます。 - Adobe Dynamic Media Classicでは、取り込み時に画像のシャープニングを適用するなど、画質を調整するためのより高度な方法も提供します。 レンダリングされた結果をさらに調整および最適化することが可能な高度なユースケースについては、Adobe Professional Servicesを参照してカスタマイズされたインサイトやベストプラクティスに役立ててください。