Web に最適化された画像配信 web-optimized-image-delivery
コアコンポーネントで AEM as a Cloud Service の web に最適化された画像配信機能を活用して画像をより効率的に配信する方法について説明します。
概要 overview
AEM as a Cloud Service の web に最適化された画像配信機能は、DAM から WebP 形式で画像アセットを配信します。WebP は、画像のダウンロードサイズを平均で約 25%削減できるので、ページの読み込みが高速になります。
Web に最適化された画像配信をコアコンポーネントでアクティブ化するのは簡単です。一般的なブラウザーはすべて WebP をサポートしているので、エンドユーザーに対して透過的なエクスペリエンスになります。 顕著な違いは、コンテンツの読み込みが早くなる点だけです。
コアコンポーネントでの web に最適化された画像配信のアクティブ化 activating
Web に最適化された画像配信を有効にするには、画像コンポーネントのデザインダイアログ内でページテンプレートを編集し「Web 最適化画像を有効にする」オプションを有効にするだけです（画像コンポーネントについてはこちらを参照）。このオプションは、画像コンポーネントの v1、v2 および v3 で使用できます。
デザインダイアログと AEM ページテンプレートについて詳しくは、このドキュメントを参照してください。
これで作業は完了です。画像は、画像コンポーネントによって WebP 形式で配信されるようになりました。
Web に最適化された画像配信をアクティブ化した後は、Dispatcher 設定を調べて、画像配信サービスへのリクエストがブロックされないことを確認します。詳しくは、このよくある質問（FAQ）を参照してください。
WebP 配信の確認 verifying
Web に最適化された画像の配信は、コンテンツの消費者に対して透過的です。エンドユーザーが気付くのは、読み込み時間が短くなることだけです。したがって、実際の動作の変化を観察するには、ブラウザーでレンダリングされた画像のコンテンツタイプを確認する必要があります。最新のブラウザーはすべて WebP をサポートしています。ブラウザーのサポートについて詳しくは、こちらのサイト参照してください。
- AEM で、画像コンポーネントの Web に最適化された画像配信をアクティブ化したテンプレートに基づくページを編集します。
- ページエディター内で、左上の「ページ情報」ボタンを選択してから、「公開済みとして表示」を選択します。
- ブラウザーの開発者ツールを開き、「ネットワーク」タブを選択します。
- ページをリロードし、画像をロードする HTTP リクエストを探し、ブラウザーが受信した画像のコンテンツタイプを確認します。
Web に最適化された画像配信が使用できない場合 fallback
Web に最適化された画像配信は、AEM as a Cloud Service でのみ使用できます。AEM 6.5 をオンプレミスで実行したりローカル開発インスタンスで実行したりするなどして、使用できない場合、画像配信はフォールバックしてアダプティブ画像サーブレットが使用されるようになります。
アダプティブ画像サーブレットにフォールバックすると、ページソース内の img 要素の src 属性を変更します。
よくある質問 faq
Web に最適化された画像を有効にするオプションが自分の環境にないのはなぜですか？ missing-option
この機能は、AEM as a Cloud Service でのみ使用できます。AEM をローカルまたはオンプレミスで実行すると、画像コンポーネントはフォールバックして、アダプティブ画像サーブレットが使用されるようになります。
このサービスがローカル SDK で動作しないのはなぜですか？ local-sdk
localhost で AEM SDK を使用する場合、画像サービスは使用できず、画像レンダリングはフォールバックして、アダプティブ画像サーブレットが使用されるようになります。
Web に最適化された画像配信サービスを使用するには、プロジェクトを AEMaaCS 開発環境にデプロイして、画像サービスの動作を正確にテストできるようにします。
このサービスがページの一部の画像に対して機能しないのはなぜですか？ some-images
画像サービスは /content/dam 下にあるアセットに対してのみ機能し、ページに直接アップロードされて cq:Page オブジェクト下に保存された画像に対しては機能しません。このようなアセットは、フォールバックとしてアダプティブ画像サーブレットで引き続き配信されます。
このサービスで表示される画質が低下したり、画像のサイズが制限されたりするのはなぜですか？ quality
/content/dam 下の画像アセットが処理されると、AEM as a Cloud Service 環境は、様々な次元の最適化されたレンディションを生成します。Web に最適化された画像サービスは、画像コアコンポーネントによって要求された幅を分析し、元の画像と 2048 ピクセル以下のすべてのレンディションを考慮し、それらの最大のものを（画像サービスが処理できるサイズと寸法の制限内、現在 50 MB および 12k x 12k）を要求された設定（幅、切り抜き、形式、画質など）を適用するベースとして選択します。
出力の精度を維持するために、画像サービスは画像をアップスケールしません。したがって、前述のレンディションは、画像サービスで配信できる最適な画質を定義します。元の画像アセットのサイズや寸法に影響を与えることができない場合が多いので、すべての画像アセットに 2048 ピクセルのズームレンディションがあることを確認し、そうでない場合は再処理してください。
画像 URL の末尾が .WEBP ではなく依然として .JPG または .PNG で、SRCSET 属性または PICTURE 要素がありません。最適化された web 形式を本当に使用しているのでしょうか？ content-negotiation
WebP 形式を配信するために、web に最適化された画像配信サービスではサーバー主導型コンテンツネゴシエーションを実行します。これは、クライアントがアドバタイズした機能に基づいて画像の最適な出力形式を選択するのに役立つので、画像配信サービスがファイル拡張子を無視できるようになります。
コンテンツネゴシエーションを利用する利点は、WebP のサポートをアドバタイズしないブラウザーでも、ページのマークアップを変更せずに JPG または PNG ファイル形式を取得できることです。これにより、既存のサイトの互換性が最適化され、web に最適化された画像配信に移行するためのパスが可能な限りスムーズになります。
Web 最適化画像の配信を独自のコンポーネントで使用できますか？
はい、web 最適化画像の配信サービスは、画像コンポーネントを拡張して作成されたカスタムコンポーネントで使用できます。
次に、アセット URL の生成に役立つサービスインターフェイスを示します。
com.adobe.cq.wcm.spi.AssetDelivery.getDeliveryURL(Resource resource, Map<String, Object> parameterMap)
Web 最適化画像を有効にした後、画像の表示に失敗することはありますか？ failure-to-deliver
いいえ、次の理由により、それは決して起こりません。
- HTML では、web 最適化画像を有効にしてもマークアップは変更されず、画像要素の
src属性の値のみが変更されます。 - 新しい画像サービスが使用できない場合や、目的の画像を処理できない場合は、生成された URL がアダプティブ画像サーブレットにフォールバックします。
ただし、Dispatcher ルールにより、web に最適化された画像配信サービスがブロックされる場合があります。画像配信サービスの URL は /adobe で始まり、拒否されたリクエストの Dispatcher ログを調べると（詳細はこちらを参照）、ブラウザーへの画像の配信でエラーが発生した場合、そのトラブルシューティングに役立ちます。