Web に最適化された画像配信

コアコンポーネントで AEM as a Cloud Service の web に最適化された画像配信機能を活用して画像をより効率的に配信する方法について説明します。

概要

AEM as a Cloud Service の web に最適化された画像配信機能は、DAM から WebP 形式で画像アセットを配信します。WebP は、画像のダウンロードサイズを平均で約 25%削減できるので、ページの読み込みが高速になります。

Web に最適化された画像配信をコアコンポーネントでアクティブ化するのは簡単です。一般的なブラウザーはすべて WebP をサポートしているので、エンドユーザーに対して透過的なエクスペリエンスになります。 顕著な違いは、コンテンツの読み込みが早くなる点だけです。

コアコンポーネントでの web に最適化された画像配信のアクティブ化

Web に最適化された画像配信を有効にするには、画像コンポーネントのデザインダイアログ内でページテンプレートを編集し「Web 最適化画像を有効にする」オプションを有効にするだけです（画像コンポーネントについてはこちらを参照）。このオプションは、画像コンポーネントの v1、v2 および v3 で使用できます。

デザインダイアログと AEM ページテンプレートについて詳しくは、このドキュメントを参照してください。

デザインダイアログでの web に最適化された画像配信の有効化

これで作業は完了です。画像は、画像コンポーネントによって WebP 形式で配信されるようになりました。

Web に最適化された画像配信をアクティブ化した後は、Dispatcher 設定を調べて、画像サービスへのリクエストがブロックされないことも確認しておくとよいでしょう。このサービスの URL は、次の形式を取ります。

/adobe/dynamicmedia/deliver/dm-aid--741ed388-d5f8-4797-8095-10c896dc9f1d/skitouring.jpg?quality=80&preferwebp=true

これは、次の正規表現で一般化できます。

\/adobe\/dynamicmedia\/deliver\/([^:[]|*\/])\/([\w-])\.(gif|png|png8|jpg|pjpg|bjpg|webp|webpll|webply)(?[a-z0-9=&]*)?

WebP 配信の確認

Web に最適化された画像配信は、コンテンツの利用者に対して透過的で、マークアップには影響しません。エンドユーザーが気付くのは、読み込み時間が短くなることだけです。

したがって、動作の実際の変化を確認するには、ページのソースを表示する必要があります。

  1. AEM で、画像コンポーネントの Web に最適化された画像配信をアクティブ化したテンプレートに基づくページを編集します。
  2. ページエディター内で、左上の「ページ情報」ボタンを選択してから、「公開済みとして表示」を選択します。
  3. ブラウザーの開発者ツールを使用して、ページのソースを表示し、レンダリングされたマークアップは同じままでも、src 属性の画像が新しい画像サービスの URL を指していることを確認します。

Web に最適化された画像配信が使用できない場合

Web に最適化された画像配信は、AEM as a Cloud Service でのみ使用できます。AEM 6.5 をオンプレミスで実行したりローカル開発インスタンスで実行したりするなどして、使用できない場合、画像配信はフォールバックしてアダプティブ画像サーブレットが使用されるようになります。

Web に最適化された画像配信を有効にしてもマークアップに影響しないのと同様に、アダプティブ画像サーブレットにフォールバックしてもマークアップには影響しません。img 要素の src 属性の URL のみが変更されるからです。

よくある質問

Web に最適化された画像を有効にするオプションが自分の環境にないのはなぜですか？

この機能は、AEM as a Cloud Service でのみ使用できます。AEM をローカルまたはオンプレミスで実行すると、画像コンポーネントはフォールバックして、アダプティブ画像サーブレットが使用されるようになります。

このサービスがローカル SDK で動作しないのはなぜですか？

localhost で AEM SDK を使用する場合、画像サービスは使用できず、画像レンダリングはフォールバックして、アダプティブ画像サーブレットが使用されるようになります。

Web に最適化された画像配信サービスを使用するには、プロジェクトを AEMaaCS 開発環境にデプロイして、画像サービスの動作を正確にテストできるようにします。

このサービスがページの一部の画像に対して機能しないのはなぜですか？

画像サービスは /content/dam 下にあるアセットに対してのみ機能し、ページに直接アップロードされて cq:Page オブジェクト下に保存された画像に対しては機能しません。このようなアセットは、フォールバックとしてアダプティブ画像サーブレットで引き続き配信されます。

このサービスで表示される画質が低下したり、画像のサイズが制限されたりするのはなぜですか？

Web に最適化された画像サービスは、2048 px 以下のすべての画像レンディションを考慮し、要求された設定（幅、切り抜き、形式、品質など）を適用するベースとして最大の画像レンディションを選択します。

画像サービスでは画像をアップスケールしません。したがって、これらのレンディションは、画像サービスで配信できる最適なサイズと品質を定義します。そのため、すべてのアセットに 2048 px のズームレンディションが含まれていることを確認し、含まれていない場合は再処理します。

画像 URL の末尾が .WEBP ではなく依然として .JPG または .PNG で、SRCSET 属性または PICTURE 要素がありません。最適化された web 形式を本当に使用しているのでしょうか？

WebP 形式を配信するために、web に最適化された画像配信サービスでは「コンテンツネゴシエーション」と呼ばれる技術を使用します。これは、JPG または PNG ファイル拡張子を要求した場合でも、WebP ファイル形式を返すことで構成されますが、要求を行ったブラウザーが image/webp HTTP 受け入れヘッダーを提供した場合に限ります。この技術をサポートするブラウザーは、このヘッダーを提供でき、古いブラウザーは引き続き JPG または PNG ファイル形式を取得します。

この技術の利点は、 img 要素とその属性を同じにしておくと、既存のサイトの最適な互換性が確保され、web 最適化画像の配信に移行する際の最もスムーズなパスが保証されます。

Web 最適化画像の配信を独自のコンポーネントで使用できますか？

はい、web 最適化画像の配信サービスは、カスタムコンポーネントで使用できます。この場合、画像コンポーネントを拡張することをお勧めします。

次に、アセット URL の生成に役立つサービスインターフェイスを示します。

com.adobe.cq.wcm.spi.AssetDelivery.getDeliveryURL(Resource resource, Map<String, Object> parameterMap)

このサービスは、アセットリソースを必須の最初のパラメーターとして受け取り、適用する必要のある画像変換のオプションのマップを取得します。このマップには、次のパラメーターを含めることができます。

  • path – 配信するアセット ID。パターン ([^:\[\]\|\*\/]+) である必要があります（例： unicorn–1234）
  • seoname – 画像 URL に追加するユーザー定義の SEO 中心の名前。ハイフンを含めることができます。パターン ([\w-]+) である必要があります（例： my-friend-the-unicorn）
  • format – 目的の画像形式。gif、png、png8、jpg、pjpg、bjpg、webp、webpll、webply にすることができます（例：webp）
  • preferwebp – 可能な場合は、format パラメーター（コンテンツネゴシエーションに関する FAQ を参照）、ブール値（例：true）を無視して、WebP 出力を配信します
  • width – 目的の画像解像度（ピクセル単位）。1 より大きい値にする必要があります（例： 400）
  • quality – 1 と 100 の間の目的の圧縮（例： 75）
  • c – 目的の画像切り抜き座標。コンマ区切りのピクセル値（例：100,100,400,200）
  • r – 目的の画像の回転。90、180、270 にすることができます（例：90）
  • flip – 目的の画像反転。h、v、hv のいずれかにすることができます（例：h）

新しい画像サービスで配信される画像の URL はどのようなものですか？

URL と正規表現の例については、前の節のコアコンポーネントの web 最適化画像の配信のアクティベートを参照してください。

Web 最適化画像を有効にした後、画像の表示に失敗することはありますか？

いいえ、そのようなことは起こりません。

このページ