[AEM Assets]{class="badge positive" title="AEM Assetsに適用）。"}
OpenAPI機能を備えたDynamic Mediaを使用して画像を最適化する Optimize-images-using-Dynamic-Media-with-OpenAPI-Capabilities
Dynamic Media with OpenAPI capabilitiesは、Smart Crop、Image Presets、Smart Imagingなどの画像最適化機能を提供しています。 これらの機能により、異なるデバイスやネットワークをまたいで、高速に読み込む高品質なレスポンシブ画像を提供できます。
スマート切り抜き smart-crop-using-dynamic-media-with-openapi-capabilities
スマート切り抜きは、Dynamic Media with OpenAPI capabilitiesの動的サイズ変更機能です。 Smart Cropは、AIを活用したコンテンツに応じた切り抜きを使用して、切り抜きバージョンの視覚的なコンテキストを維持しながら、様々な画面サイズに合わせて画像をインテリジェントに切り抜く高度な画像処理技術です。 AIは画像を分析して焦点または注目すべき点を特定し、画像を自動的に切り抜いて、切り抜かれたすべてのバージョンで焦点を維持します。 レスポンシブデザインの重要な要素であるSmart Cropは、費用対効果が高く、時間効率の高い画像の切り抜き方法を提供します。
Dynamic Media画像プロファイル の記事を参照して、Admin Viewで スマート切り抜きレンディション を作成する方法、それらをフォルダーに適用する方法、または既に画像またはフォルダーに適用されている レンディションを編集する方法について説明します。 この ビデオ の手順でSmart Cropを作成する方法を説明します。
Smart Crop パラメーターは、名前付きスマート切り抜きプロファイルが存在し、アセットに適用されていることを想定しています。 Smart Crop パラメーターと名前付きSmart Crop プロファイルの適用方法について詳しくは、 スマート切り抜きプロファイル を参照してください。
画像プリセット image-presets-using-dynamic-media-with-openapi-capabilities
Dynamic Media with OpenAPI capabilitiesの画像プリセット 機能を使用して、即座に画像を変換します。 image presetは、出力画像のサイズ設定と書式設定ルールの事前定義済みセットです。
Dynamic Media with OpenAPI capabilitiesは、プリセット名を使用して画像を即座に変換し、レンディションを即座に生成します。 プリセットパラメーターを含むDynamic Media with OpenAPI配信URLを介して画像をリクエストすると、DM with OpenAPIはプリセットの変換を適用し、レンディションをオンデマンドで作成してユーザーに配信します。
Dynamic Media with OpenAPI配信URLを使用して、1つのプリセットを複数の画像に適用できます。 これにより、各アセットを手作業で編集することなく、アセット間で一貫性のあるフォーマットを実現できます。
画像プリセットの管理の記事を参照して、管理者ビュー🔗で画像プリセットを作成する方法と、異なる画面サイズに合わせてアセットを自動的に調整するレスポンシブ画像プリセット を作成する方法について学んでください。
画像プリセットを使用するメリット benefits-of-image-presets
Image Presetsには、Dynamic Media with OpenAPIでの画像の管理と配信に関して、いくつかの利点があります。 主な利点には次のようなものがあります。
- プリセットを使用すると、画像配信URLを短くできます。 配信URLを長くする複数の画像修飾子を追加する代わりに、1つのプリセットを使用します。 短いURLは、web サイト、モバイルアプリ、電子メールなどのチャネルをまたいで、容易に管理し、一貫した画像配信を確保します。
- 画像プリセット ソース画像ファイルからジャストインタイムのレンディションを作成します。 このオンデマンドレンディション生成機能により、同じファイルの複数の静的レンディションを作成して保存する必要がなくなり、時間とストレージの両方を節約できます。
- 単一のプリセットを大規模なアセットに一度に適用することで、各アセットの手作業による編集を避け、フォーマットの一貫性を確保し、スケーラビリティを確保できます。
- プリセットのパラメーターを更新すると、そのプリセットを使用するすべての画像が自動的に再フォーマットされます。 これにより、フォーマットを一元的に更新することで編集が合理化され、個々のアセットやweb コードを再編集する必要がなくなります。
- CDNによってキャッシュされた動的レンディションにより、効率性とパフォーマンスが向上し、その結果、読み込みが高速化され、デバイスやネットワークをまたいでパフォーマンスが最適化されます。
画像プリセットの使用 use-image-presets-using-dynamic-media-with-openapi-capabilities
Image Presetsを作成した後、次のワークフローに使用できます。
画像配信URLでのプリセットの使用 use-presets-in-delivery-urls
プリセットを使用すると、配信URLをより短く簡単に使用できます。 各プリセット名は、配信URLで一意の識別子として機能します。 アセットの配信URLに複数の修飾子を追加する代わりに、プリセット名を参照して、即座にレンディションを生成します。 画像にDynamic Media画像プリセットを適用する方法を学ぶ。
次の例では、プリセットを含むURLと、プリセットを含まないURLを比較します。
プリセットのないURL （長いURL）:
https://delivery-p30902-e145436-cmstg.adobeaemcloud.com/adobe/assets/urn:aaid:aem:393d5579-5be2-49a5-ac5f-8fed72bfb614/as/AdobeStock_63266433.avif?width=400&height=300&fit=crop&qualit=85&sharpen=true
プリセットを含むURL （短いURL）:
https://delivery-p30902-e145436-cmstg.adobeaemcloud.com/adobe/assets/urn:aaid:aem:393d5579-5be2-49a5-ac5f-8fed72bfb614/as/AdobeStock_63266433.avif?preset=thumbnail
プリセットサムネールには、同じ画像修飾子設定がバンドルされます。
AEM Sitesでのオーサリング時にプリセットを使用する use-presets-during-authoring-in-aem-sites
作成者は、Dynamic Mediaのサポートが有効になっている場合、AEM Sitesのオーサリングページでページ編集中にImage Presetsを選択できます。
オーサリングページで画像プリセットを使用するには、次の手順を実行します。
- Sites オーサリングページに移動します。
- AEM ページエディター🔗 セクションの リモートアセットにアクセスする手順を実行して、Asset Selector パネルを使用してアセットを選択します。
- asset selector パネルで、プリセットタイプまでスクロールし、画像修飾子 フィールドに
Preset=Preset Nameを指定して、完了をクリックします。
スマートイメージング use-smart-imaging-using-dynamic-media-with-openapi-capabilities
画像配信にDynamic Media with OpenAPI capabilitiesを使用すると、 スマートイメージング を通じて画像が自動的に最適化されます。 配信の最適化により、画像の読み込みが速くなり、視覚的な品質が最大限に高まり、ファイルサイズが最小限に抑えられます。 その結果、最小限の帯域幅でweb サイトの読み込みを高速化し、応答性を向上させながら、デバイスやネットワークをまたいで一貫して高いビジュアル品質を実現できます。
Smart Imagingには次の機能が含まれています：
自動書式変換 auto-format-conversion
Dynamic Media with OpenAPI は、AVIFやWEBPなど、最新のweb最適化形式に画像を自動的に変換します。 変換は、要求された形式に関係なく、ブラウザーの機能と ライセンス使用権限によって異なります。
AVIFおよびWEBP形式では、より優れた圧縮が提供され、画像の配信と読み込みが小さく高速になります。 AVIFは、すべてのブラウザー機能を処理するため、デフォルトの形式として使用されます。
Dynamic Media with OpenAPIは、auto-format クエリパラメーターを使用して、最適化された配信のために画像をさまざまな形式に変換するためのブラウザーの動作を制御します。 自動フォーマット変換には、自動プロモーションと 自動デモ が含まれます。 Webに最適化されたフォーマット（AVIFまたはWEBP）をJPEGまたはPNG経由で配信する場合は、自動プロモーションと呼ばれます。
デフォルトでは、auto-format クエリパラメーターはtrueに設定されています。 auto-formatが有効（true）になっている場合、システムは要求された形式を無視し、画像の特徴、ブラウザーの機能、および ライセンスの使用権限に基づいて、webに最適化された形式（AVIFまたはWEBP）を自動的に選択します。
auto-formatがtrueの場合、システムは次の順序で画像形式を配信します。
- AVIF: AVIFは、ブラウザーがサポートしており、ライセンスで許可されている場合に配信されます。 これを自動プロモーションと呼びます。
- WEBP: AVIFがサポートされていないか、ライセンスが付与されていない場合は、WEBPが配信されます。 これも自動車プロモーションです。
- JPEG: JPEGは、AVIFおよびWEBPがサポートされておらず、画像にアルファチャンネル（透明度）がない場合にのみ配信されます。 これを自動デモと呼びます。
- PNG: PNGは、ブラウザーが最新の形式をサポートしておらず、画像にアルファチャンネル（透明度）がある場合に配信されます。 これは自動デモとも呼ばれます。
クエリパラメーターをfalseに設定してauto-formatを無効にし、必要な形式を指定して、その形式で配信される画像を取得します。
ネットワーク帯域幅の最適化 network-bandwidth-optimisation
画像は、クライアントのネットワーク条件に基づいて自動的に最適化され、より迅速な配信とスムーズな読み込みを実現します。 品質および最高品質 パラメーターは、画像圧縮レベルを1 ～ 100の値で制御することで、自動的に画質を調整します。
qualityおよびmax-quality パラメーターの次の主要な動作を参照してください。
- qualityとmax-qualityの両方が指定されている場合、qualityが優先されます。
- qualityのみが指定されている場合、ネットワーク速度に基づいて、読み込み時間に関係なく品質が配信されます。
- max-qualityのみが指定されている場合、ネットワークの状態に基づいて画質が自動的に調整され、指定されたmax-quality値まで最高の画質が提供されます。
- どちらも指定しない場合、システムはデフォルトの
max-quality/85で動的最適化を適用します。
品質パラメーター quality-parameter
品質パラメーターは、読み込み速度よりも画質を優先します。 出力画質を要求された値（1から100の間）に固定し、ネットワーク条件を無視します。 品質パラメーターについて詳しく説明します。
最大品質パラメーター max-quality-parameter
Max-qualityは、クライアントのネットワーク速度に基づいて、画質と読み込み時間をバランスさせます。 特定のネットワーク条件に対して可能な限り高い画質（1～100）を提供しながら、低速ネットワークでの画質を下げることで、より高速な読み込み時間を優先します。 最高品質パラメーターについて詳しく説明します。
関連情報