インポートした画像は、AEM Edge Delivery Servicesではレスポンシブアセットではなく静的アセットとしてレンダリングされます
Adobe Experience Manager（AEM）Edge Delivery Servicesでは、ページに読み込まれた画像は、レスポンシブ Dynamic Media アセットではなく静止画像としてレンダリングできます。 その結果、複数の画像サイズや変換の自動生成などのDynamic Media機能は、画像にメリットをもたらしません。 この問題を解決するには、サポートされているAEM Assets配信URLを使用して、レスポンシブ画像マークアップを生成します。
説明 description
環境
- Adobe Experience Manager（AEM）Edge Delivery Services
- AEM Cloud Service
問題/症状
- ページに読み込まれた画像は、レスポンシブ Dynamic Media アセットではなく静止画像としてレンダリングされます。
- 画像は、複数の画像サイズや変換の自動生成などのDynamic Media機能の恩恵を受けません。
- この問題は、一般的に、画像の参照がプログラムによって入力される自動移行中に発生します。
- エラーメッセージは表示されませんが、画像はレスポンシブ動作を示しません。
解決策 resolution
問題を解決するには、次の手順に従います。
-
AEM Cloud Service インスタンスで、画像が承認済みAEM Assetsとしてアップロードまたは解決されていることを確認します。
-
各イメージについて、サポートされているAEM Assets配信URLを取得します。 これを行うには、Assets OpenAPIを使用するか、アセットを
jcr:uuid経由で解決し、配信URLを取得します。 -
インポーターまたはEDS ブロックロジックを更新して、AEM Assets配信URLを使用してレスポンシブ画像マークアップを生成します。 幅、切り抜き、形式、品質のパラメーターを含めて、Dynamic Media変換を有効にします。
レスポンシブ画像マークアップの例：
code language-none <img src="https://assets.example.com/asset-id.jpg?width=800&format=webp&quality=80" srcset="https://assets.example.com/asset-id.jpg?width=400&format=webp&quality=80 400w, https://assets.example.com/asset-id.jpg?width=800&format=webp&quality=80 800w, https://assets.example.com/asset-id.jpg?width=1200&format=webp&quality=80 1200w" sizes="(max-width: 800px) 100vw, 800px" alt="Description of image"> -
読み込んだコンテンツに配信URL参照を保存して、EDS ブロックがレンダリング時にレスポンシブマークアップを生成できるようにします。
-
レンダリングされたページをテストして、画像がレスポンシブに配信され、Dynamic Media変換が適用されていることを確認します。
experience-cloud-kcs-help-kbarticles