詳細情報:
レスポンシブ画像と最新の画像形式(AVIFおよびWebP)
最新のブラウザーでは、ファイルサイズが小さい場合は AVIF と WebP を読み込み、フォールバックとして JPEG (または可逆圧縮または透明度の場合は PNG) を使用します。DIS の出力形式、品質、URLUtils と MediaFile のルールについては、「Dynamic Imaging Service」のトピックを参照してください。
「サポートされている変換」テーブルには、完全な形式、拡張、および品質の詳細が含まれています。このトピックでは、マークアップで各形式を使用するタイミングと、HTML の画像要素とソース要素で DIS URL を参照する方法について説明します。
各形式を使用する場合
| 書式 | 一般的な用途 | 注 |
|---|---|---|
| AVIF (英語) | 高圧縮の商品写真(ブラウザが対応している場合) | 多くの場合、最小です。サポートは買い物客のブラウザーとバージョンによって異なります。 |
| WebP | バランスの取れたサイズと最新のクライアントのサポート | AVIF よりも幅広いサポート。非常に古いクライアントではまだ普遍的ではありません。 |
| JPEG / PNG形式 | デフォルト、imgフォールバック、または PNG による透明度 |
URL のファイル拡張子を必要な形式に揃えます。 |
画像によるプログレッシブエンハンスメント
最初にAVIFまたはWebPを提供し、次にベースライン画像を提供します。正確な DIS URL (拡張子とsfrm値) は、サポートされている変換の表とURLUtilsまたはMediaFile呼び出しに従う必要があります。例 (Internet Store Markup Language (ISML)に依存しない) パターン:
<picture>
<source srcset="<your AVIF DIS URL>" type="image/avif" />
<source srcset="<your WebP DISS URL>" type="image/webp" />
<img src="<your JPEG DIS URL>" alt="..." />
</picture>実際には、HTML にsw=文字列をハードコーディングする代わりに、同じviewTypeまたはパスから各 URL をフォーマット/ファイル拡張子で生成し、サイトのオブジェクトを変換します。
パフォーマンスとキャッシュの衛生状態
- 変換パラメーターを安定させ、最小化する : 同一の論理サイズとパラメーターを 1 つのキャッシュ キーにマッピングすることで、CDN でのヒット率を向上させることができます。画像のガイドライン およびDynamic Imaging Service の Dynamic Imaging Caching を参照してください。
- 80 が既にデフォルトになっている場合は、ドキュメントに既にデフォルトが記載されている場合に文字列に不要な
qが入らないように、q=80を省略します。 - 画像の重量と4xxレートを監視します。スパイクは、多くの場合、不正な
OIMG値、無効なsw=/sh=のペア、または URL エンコードされていないオーバーレイ URL と相関しています。トラブルシューティングと移行を参照してください。
この記事で問題は解決されましたか?
ご意見をお待ちしております。
