使用具備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引數預期named-smartcrop-profiles存在且已套用至資產。 請參閱智慧型裁切設定檔以進一步瞭解Smart Crop引數以及名稱Smart Crop設定檔的套用方式。

IMPORTANT
您只能在管理員檢視中建立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,將單一預設集套用至多個影像。 這可確保跨資產的一致格式,無需手動編輯每個資產。

請參閱管理影像預設集文章以瞭解如何在管理員檢視中建立影像預設集,以及如何建立可自動調整資產以符合不同熒幕大小的回應式影像預設集

使用影像預設集的好處 benefits-of-image-presets

Image Presets在Dynamic Media with OpenAPI中管理和傳遞影像有幾項優點。 主要優點包括:

  • 預設集會縮短影像傳送URL。 請使用單一預設集,而非新增多個影像修飾元來拉長傳送URL。 較短的URL更容易管理,並確保跨網站、行動應用程式、電子郵件和其他頻道的一致影像傳送。
  • 影像預設集會從來源影像檔案中建立即時轉譯。 這種隨選轉譯產生功能消除了建立並儲存相同檔案的多個靜態轉譯的需求,同時節省了時間和儲存空間。
  • 一次將單一預設集套用至大型資產集,避免個別手動編輯每個資產,確保一致的格式並啟用擴充性。
  • 當您更新預設集的引數時,使用該預設集的所有影像都會自動重新格式化。 透過集中格式更新,這簡化了編輯,無需重新編輯個別資產或網頁程式碼。
  • 透過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

啟用Image Presets支援時,作者可以在AEM Sites編寫頁面中選取Dynamic Media進行頁面編輯。
執行以下步驟,以在編寫頁面中使用影像預設集:

  1. 導覽至您的「網站」撰寫頁面。
  2. 執行存取AEM頁面編輯器中的遠端資產區段中的步驟,以使用Asset Selector面板來選取資產。
  3. 在asset selector面板中,向下捲動至​ 預設型別,並在Preset=Preset Name影像修飾元​ 欄位中指定,然後按一下​ 完成
    預設集

智慧型影像處理 use-smart-imaging-using-dynamic-media-with-openapi-capabilities

當您使用Dynamic Media with OpenAPI capabilities傳送影像時,影像會透過智慧型影像自動最佳化。 最佳化的傳送方式可確保影像載入更快、視覺品質最佳,且檔案大小最少。 如此一來,各個裝置和網路的頁面載入速度最快,視覺品質也始終如一,同時耗用最少的頻寬,讓您的網站更快速、回應更迅速。

Smart Imaging包含下列功能:

自動格式轉換 auto-format-conversion

Dynamic Media with OpenAPI 會自動將影像轉換為現代的、網頁最佳化的格式,例如AVIF或WEBP。 轉換取決於瀏覽器的功能和授權權利,無論請求的格式為何。

AVIF和WEBP格式提供更好的壓縮,讓影像變得更小、傳送和載入更快。 AVIF在處理所有瀏覽器功能時會用作預設格式。

Dynamic Media with OpenAPI使用auto-format查詢引數來控制將影像轉換為各種格式以進行最佳化傳遞的瀏覽器行為。 自動格式轉換包含​ 自動促銷 ​和​ 自動降級。 當系統透過JPEG或PNG促銷網頁最佳化格式(AVIF或WEBP)以進行傳送時,這稱為自動促銷。

根據預設,auto-format查詢引數設定為true。 啟用auto-format (true)時,系統會忽略要求的格式,並根據影像特性、瀏覽器功能和授權權利自動選取網頁最佳化格式(AVIF或WEBP)。

auto-format為true時,系統會依下列順序傳送影像格式:

  • AVIF:如果瀏覽器支援AVIF,而且授權允許,就會傳送AVIF。 這稱為自動促銷活動。
  • WEBP:如果AVIF不受支援或授權,則會傳送WEBP。 這也稱為自動促銷活動。
  • JPEG:只有在不支援AVIF和WEBP時,才會傳送JPEG,而且影像沒有Alpha色版(透明度)。 這稱為自動降級。
  • PNG:瀏覽器不支援新式格式,且影像有Alpha色版(透明度)時,會傳送PNG。 這也稱為自動降級。

將查詢引數設定為auto-format以停用false,然後指定所需的格式,以取得該格式傳送的影像。

網路頻寬最佳化 network-bandwidth-optimisation

影像會根據使用者端的網路狀況自動最佳化,以確保更快速的傳送和平順的載入。 QualityMax-quality引數會藉由控制影像壓縮等級來自動調整品質,其值範圍介於1到100之間。

檢視qualitymax-quality 引數的下列主要行為:

  • 如果同時指定quality和max-quality,則會以quality優先。
  • 如果只指定quality,則不論載入時間為何,都會根據網路速度傳送品質。
  • 如果只指定max-quality,則影像品質會根據網路狀況自動調整,提供最佳品質至指定max-quality值。
  • 若兩者皆未指定,系統會套用預設值max-quality85的動態最佳化。

品質引數 quality-parameter

品質引數會將影像品質優先於載入速度。 它會將輸出影像品質修正為要求的值(介於1到100之間)並忽略網路條件。 深入瞭解品質引數

Max-quality引數 max-quality-parameter

最大品質會根據使用者端的網路速度來平衡影像品質和載入時間。 它藉由降低較慢網路上的影像品質來排定較快的載入時間,同時仍提供特定網路狀況下的最高品質(1-100)。 深入瞭解max-quality引數

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab