智慧型影像處理 smart-imaging

智慧型影像可套用每位使用者獨特的檢視特性,以針對其體驗自動最佳化的正確影像,進而提供更優異的效能和參與度。

關於智慧型影像 what-is-smart-imaging

智慧型影像技術可套用Adobe AI功能,並搭配現有的「影像預設集」運作。 它會根據使用者端瀏覽器功能自動最佳化影像格式、大小和品質,藉此增強影像傳送效能。

現在,透過改良的智慧型影像處理(現在同時支援AVIF和WebP),取得LCP (最大內容繪製)更好的Google Core Web Vital分數。

IMPORTANT
智慧型影像處理需要您使用隨Adobe Experience Manager - Dynamic Media提供的現成可用CDN (內容傳遞網路)。 此功能不支援任何其他自訂CDN。
TIP
嘗試使用Dynamic Media 快照,探索Dynamic Media影像修飾元和智慧型影像的優點。
Snapshot是視覺化展示工具,旨在說明Dynamic Media在最佳化及動態影像傳送方面的強大功能。 實驗測試影像或Dynamic Media URL,以視覺化方式觀察各種Dynamic Media影像修飾元的輸出,以及針對下列專案的智慧型影像最佳化:
  • 檔案大小(含WebP和AVIF傳送)
  • 網路頻寬
  • DPR (裝置畫素比率)
若要瞭解使用快照的簡易程度,請播放快照訓練影片 (3分17秒)。

智慧型影像可與Adobe同級最佳的高階CDN (內容傳遞網路)服務完全整合,進一步提升效能。 此服務會尋找伺服器、網路和對等點之間的最佳網際網路路由。 它會找到延遲最低、封包遺失率最低的路由,而不使用網際網路上的預設路由。

下列影像資產範例說明新增的智慧型影像最佳化:

影像(URL)
縮圖
大小(JPEG)
使用智慧型影像處理調整大小(WebP)
使用智慧型影像處理調整大小(AVIF)
使用WebP減少%
使用AVIF降低%
影像1
圖片1
145 KB
106 KB
90.2 KB
26.89%
37.79%
影像2
圖片2
412 KB
346 KB
113 KB
16.01%
72.57%
影像3
圖片3
221 KB
189 KB
87.1 KB
14.47%
60.58%
影像4
圖片4
594 KB
545 KB
286 KB
8.25%
51.85%

與上述類似,Adobe也使用較大的範例集執行測試。 與WebP相比,AVIF格式提供了20%的額外大小縮減,比JPEG提供了27%的縮減。 所有專案都具有相同的視覺品質。 相較於JPEG,AVIF總共可提供高達41%的平均大小縮減率。

比較WebP和AVIF與PNG,您可以看到WebP的大小減少84%,AVIF的大小減少87%。 此外,由於WebP和AVIF格式都支援透明和多種影像動畫,因此非常適合取代透明的PNG和GIF檔案。

See also Image Optimization with Next-gen Image Formats (WebP and AVIF)

Benefits of Smart Imaging what-are-the-key-benefits-of-smart-imaging

Smart Imaging enhances image delivery by automatically optimizing file size based on the user's browser, device display, and network conditions. This approach ensures faster loading times and a better viewing experience across different environments. Because images constitute most of a page's load time, any performance improvement can have a profound impact on business KPIs such as the following:

  • Higher conversion rates.
  • Time spent on a site.
  • Lower site bounce rates.

The newest key benefits of the latest Smart Imaging include the following:

  • Supports next generation AVIF format.
  • PNG to WebP and AVIF now supports lossy conversion. Because PNG is a lossless format, earlier WebP and AVIF being delivered were lossless.
  • Browser Format Conversion (bfc)
  • Device Pixel Ratio (dpr)
  • Network bandwidth (network)

About Browser Format Conversion (bfc) bfc

Turning on Browser Format Conversion by appending bfc=on to the image URL automatically converts JPEG and PNG to lossy AVIF, lossy WebP, lossy JPEGXR, lossy JPEG2000 for different browsers. For browsers that do not support those formats, Smart Imaging continues to serve the JPEG or PNG. Smart Imaging recalculates the quality of the new format along with the format change.

You can turn off Smart Imaging by appending bfc=off to the image's URL.

See also bfc in the Dynamic Media Image Serving and Rendering API.

About Device Pixel Ratio (dpr) optimization dpr

Device Pixel Ratio (DPR), also called CSS Pixel Ratio, represents the relationship between a device's physical pixels and logical pixels. With the rise of retina displays, the pixel resolution of modern mobile devices has been rapidly increasing.

Enabling Device Pixel Ratio optimization renders the image at the native resolution of the screen, which makes it sharp.

目前,顯示器的畫素密度來自Akamai CDN標題值。

影像URL中的允許值
說明
dpr=off
關閉個別影像URL層級的DPR最佳化。
dpr=on,dprValue
使用自訂值(任何使用者端邏輯或其他方式偵測到的值)覆寫智慧型影像偵測到的DPR值。 dprValue的允許值是大於0的任何數字。
NOTE
  • 即使公司層級DPR設定為off,您仍可使用dpr=on,dprValue
  • 由於DPR最佳化,當產生的影像大於MaxPix Dynamic Media設定時,一律會透過維持影像的外觀比例來辨識MaxPix寬度。
要求的影像大小
裝置畫素比率(dpr)值
傳遞的影像大小
816 x 500
1
816 x 500
816 x 500
2
1632 x 1000

另請參閱處理影像時處理智慧型裁切

關於網路頻寬最佳化 network

開啟網路頻寬會自動根據實際網路頻寬調整影像品質。 因為網路頻寬太低,DPR (裝置畫素比)最佳化功能即使已經開啟,也會自動關閉。

您的公司可以將network=off附加至影像URL,以停用個別影像的網路頻寬最佳化。

影像URL中的允許值
說明
network=off
關閉個別影像URL層級的網路最佳化。

DPR和網路頻寬值是根據偵測到的套件式CDN使用者端值。 這些值有時不準確。 例如,DPR=2的iPhone5和dpr=3的iPhone12都顯示dpr=2。 不過,對於高解析度裝置,傳送dpr=2還是比傳送dpr=1好。 然而,克服這種不正確性的最佳方式是使用使用者端DPR,為您提供100%正確的值。 而且它適用於任何裝置,不論是Apple或任何其他已啟動的裝置。 請參閱使用智慧型影像搭配使用者端裝置畫素比率

智慧型影像處理的其他主要優點

  • 改善使用最新智慧型影像處理之網頁的Google SEO排名。
  • 立即提供最佳化內容(在執行階段)。
  • 使用Adobe AI技術,根據影像要求中指定的品質(qlt)進行轉換。
  • 不受TTL (存留時間)影響。 之前,智慧型影像處理至少必須有12小時的TTL才能運作。
  • 先前,原始和衍生影像都會經過快取,而且是使快取失效的兩步驟程式。 在最新的智慧型影像處理中,只會快取衍生專案,進行單一步驟的快取失效程式。
  • 在規則集中使用自訂標題的客戶可受益於最新的智慧型影像,因為這些標題不會遭到封鎖,不像舊版的智慧型影像。

常見問題

智慧型影像是否有任何相關的授權成本?

不行。 智慧型影像包含於您現有的授權中。 此規則適用於Dynamic Media Classic或Experience Manager - Dynamic Media (內部部署、AMS和Experience Manager as a Cloud Service)。

note note
NOTE
智慧型影像不適用於Dynamic Media — 混合型客戶。
智慧型影像如何運作?

當消費者要求影像時,「智慧型影像」會分析使用者特性,並根據瀏覽器將其轉換為適當的格式。 這些格式轉換的進行方式不會降低視覺的逼真度。 智慧型影像會根據瀏覽器功能,以下列方式自動將影像轉換為不同格式。

  • 如果您的瀏覽器支援格式,則自動轉換為AVIF

  • 如果AVIF轉換沒有好處或瀏覽器不支援AVIF,則自動轉換成WebP

  • 如果Safari不支援WebP,則自動轉換為JPEG2000

  • 自動轉換為IE 9+適用的JPEGXR,或如果Edge不支援WebP

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2
    影像格式 支援的瀏覽器
    AVIF https://caniuse.com/avif
    WebP https://caniuse.com/webp
    JPEG 2000 https://caniuse.com/jpeg2000
    JPEGXR https://caniuse.com/jpegxr
  • 對於不支援這些格式的瀏覽器,會提供最初請求的影像格式。

如果原始影像大小小於智慧型影像產生的大小,則會提供原始影像。

支援哪些影像格式?

智慧型影像支援下列影像格式:

  • JPEG
  • PNG

智慧型影像在轉換為新格式時,會重新計算JPEG影像檔案格式的品質。

對於支援PNG等透明度的影像檔案格式,您可以設定「智慧型影像」以傳送有損的AVIF和WebP。 針對有損格式轉換,「智慧型影像處理」會使用影像URL中所述的品質,或是在Dynamic Media公司帳戶中設定的品質。

智慧型影像如何處理我已在使用的現有影像預設集?

智慧型影像可順暢整合您現有的影像預設集,並符合您所有的影像設定。

唯一的調整涉及影像格式、品質或兩者。 在格式轉換期間,智慧型影像處理會根據您的預設設定保留完整的視覺精確度,但會提供較小的檔案大小。 只要將bfc=ondpr=on,dprValuenetwork=on或全部三個引數設定新增到您現有的URL或預設集,即可啟用它。

例如,假設影像預設集指定了500 × 500畫素的JPEG格式,其中有quality=85unsharp mask=0.1,1,5。 智慧型影像可偵測使用者是否位在Chrome瀏覽器上。 接著會以相同尺寸(500 × 500)將影像轉換為WebP,並加上符合JPEG設定的銳利化遮色片。 然後,系統會比較WebP和JPEG版本的檔案大小,並將較小版本提供給使用者。

Does Smart Imaging working with HTTPS? How about HTTP/2?
Smart Imaging works with images delivered over HTTP or HTTPS. In addition, it also works over HTTP/2.
Am I eligible to use Smart Imaging?

Smart Imaging is available immediately for all customers. To start enjoying its benefits, just add bfc=on, or dpr=on,dprValue, or network=on, or all three parameter settings to your existing URLs or presets.

To use Smart Imaging, your company's Dynamic Media Classic or Dynamic Media on Experience Manager account must include the Adobe bundled CDN (Content Delivery Network) as part of your license.

What is the process to enable Smart Imaging for an account?

To start using Smart Imaging, append bfc=on, or dpr=on,dprValue, or network=on, or all three parameter settings to your existing URLs or presets. If you prefer not to make these changes manually, you can enable Smart Imaging by default by creating a support case.

When creating the support case, specify which Smart Imaging features you want activated on your account:

  • Browser Format Conversion (WebP or AVIF)
  • Network Bandwidth Optimization
note note
NOTE
DPR requires client-side adjustments to determine the correct dprValue. Therefore, Adobe recommends enabling DPR through URLs by appending dpr=on,dprValue.

To create a support case to enable Smart Imaging on your account:

  1. Use the Admin Console to start the creation of a new support case.

  2. Provide the following information in your support case:

    • Primary contact details:

      • Provide your name, email, and phone number.
    • Smart Imaging features to enable:

      • List the capabilities that you want for your account:

        • Browser format conversion: WebP or AVIF
        • Network bandwidth optimization
        • DPR: DPR需要使用者端進行調整,以決定正確的dprValue。 因此,Adobe建議藉由附加dpr=on,dprValue,透過URL啟用DPR。
    • 智慧型影像的​網域:

      • 列出所有相關網域,例如​ company.com ​或​mycompany.scene7.com

      • 智慧型影像支援一般和自訂網域。

      • 若要識別您的網域,請開啟Dynamic Media Classic案頭應用程式並登入您的公司帳戶。

        1. 瀏覽至​設定 > 應用程式設定 > 一般設定
        2. 尋找​ 發佈的伺服器名稱 ​欄位以確認您的網域。
        3. 確認您使用的是Adobe的CDN,而非其他提供者所管理的CDN。
    • 表示HTTP/2支援:

      • 指定您是否需要「智慧型影像」才能透過HTTP/2運作。
  3. Adobe客戶支援預設會啟用所要求的智慧型影像處理功能,而不需要手動將引數附加至URL。

  4. Adobe建議將存留時間(TTL)設定為至少24小時,以便透過快取發揮最大效能。
    若要調整TTL:

    1. Dynamic Media Classic的​

      1. 瀏覽至​設定 > 應用程式設定 > 發佈設定 > 影像伺服器
      2. 將​ 預設使用者端快取存留時間 ​值設定為24小時或更長。
    2. 適用於Adobe Experience Manager上的Dynamic Media

      1. 遵循這些指示
      2. 設定24小時或更多的​ 到期 ​值。
我何時可以預期帳戶會啟用「智慧型影像」?

「客戶支援」會依接收順序處理請求,並遵循「等待清單」處理。

note note
NOTE
由於啟用智慧型影像處理需要Adobe清除快取,因此前置時間可能會較長。 因此,在任何指定時間只能處理少數客戶轉換。
切換至使用智慧型影像有何風險?

There is no risk to a customer web page. However, the transition to Smart Imaging does clear out your CDN cache. This operation involves moving to a new configuration of Dynamic Media Classic or Dynamic Media on Experience Manager.

During the initial transition, the non-cached images directly hit Adobe's origin servers until the cache is rebuilt again. 因此,Adobe計劃一次處理幾個客戶轉換,以便在從來源提取請求時維持可接受的效能。 For most customers, the cache is fully built up again at the CDN within ~1 – 2 days.

How can I verify whether Smart Imaging is working as expected?
  1. After your account is configured with Smart Imaging, load a Dynamic Media Classic or Adobe Experience Manager - Dynamic Media image URL in the browser.

  2. Open the Chrome developer pane by going to View > Developer > Developer Tools in the browser. Or, choose any browser developer tool of your choice.

  3. Ensure that the cache is disabled when developer tools are open.

    • On Windows®, navigate to settings in the developer tool pane, then select Disable cache (while devtools is open) check box.
    • On macOS, in the Developer pane, under the Network tab, select disable cache.
  4. Observe the Content Type is transformed to the appropriate format. The following screenshot shows a PNG image being converted dynamically to WebP on Chrome. If your domain has AVIF enabled, you can also expect to see AVIF in the Content Type.

  5. Repeat this test on different browsers and user conditions.

note note
NOTE
Not all images are converted. Smart Imaging decides if the conversion can improve performance. Sometimes, where there is no expected performance gain or the format is not JPEG or PNG, the image is not converted.

image2017-11-14_15398

How do I know the performance gain? Is there a way to know the benefits of Smart Imaging?

The Smart Imaging Header determines the benefits of Smart Imaging. When Smart Imaging is enabled, after you request an image, under the Response Headers heading, you can see -X-Adobe-Smart-Imaging as seen in the following highlighted example:

智慧型影像標題

此標題會告訴您下列內容:

  • 智慧型影像處理功能適用於本公司。
  • 正值表示轉換成功。 在這種情況下,會傳回新的WebP影像。
  • 負值表示轉換不成功。 在這種情況下,會傳回原始要求的影像(如果未指定,則預設為JPEG)。
  • 正值會顯示要求的影像與新影像之間的位元組差異。 在上述範例中,儲存的位元組為75048或一個影像約75 KB。
  • 負值表示要求的影像小於新影像。 會顯示負數大小差異,但提供的影像僅為原始要求的影像。
note note
NOTE
X-Adobe-Smart-Imaging = -1,正在傳遞WebP
如果X-Adobe-Smart-Imaging的值為–1,而且WebP仍在傳遞,則智慧型影像處理為作用中。 但是,由於快取已過時,因此未計算大小優勢。 您可以在影像的URL中使用cache=update (僅一次)來修正此問題。
使用修飾元的範例:
https://smartimaging.scene7.com/is/image/SmartImaging/sample1?cache=update>若要讓整個快取失效,您必須建立支援案例。
如何在智慧型影像中停用AVIF最佳化?
如果您想要依預設切換回提供WebP,請為相同專案建立支援案例。 如同往常,您可以新增引數bfc=off至影像的URL來關閉智慧型影像。 不過,您無法在智慧型影像的URL修飾元中選取WebP或AVIF。 此能力在您的公司帳戶層級進行維護。
智慧型影像處理是否可因任何要求而關閉?

可以。 您可以新增下列任何修飾元來關閉智慧型影像:

有哪些「調整」可供使用? 是否有任何可定義的設定或行為?

智慧型影像有三個可啟用或停用的選項。

我在Chrome網頁瀏覽器上有一個包含fmt=tif的URL。 但我的要求失敗,並出現ImageServer錯誤。 原因為何?

如果您的帳戶未啟用智慧型影像處理,就不會發生這個錯誤。 智慧型影像僅適用於JPEG或PNG格式。

若要避免此錯誤,您可以:

  • 指定JPEG或PNG,或
  • 完全不使用fmt修飾元,或
  • 使用智慧型影像定義的瀏覽器偏好格式。 例如,您可以將WebP用於Chrome網頁瀏覽器。
我想從影像的URL下載TIFF影像。 我應該怎麼做?
fmt=tifbfc=off新增至影像的URL路徑。
智慧型影像處理是否只管理影像格式,或同時管理影像品質設定以獲得最佳結果?
智慧型影像使用格式和品質。 其餘的引數則維持不變(如果影像的URL中有要求)。
如果智慧型影像確實能管理品質設定,我可以設定最小值和最大值嗎? 換句話說,品質不小於60且不大於80?
目前沒有這類布建。
智慧型影像處理會自動調整百分比品質輸出設定,還是手動調整的設定,且會套用至所有影像? 在哪個範圍內?
智慧型影像會自動調整品質百分比。 此品質是由Adobe開發的機器學習演演算法所決定。 此百分比不限範圍。
使用智慧型影像時,支援或忽略哪些「影像伺服」命令?
唯一被忽略的命令是fmtqlt。 支援所有剩餘的命令。
智慧型影像是否只會取代JPEG影像? 如果我請求WebP、PNG或其他什麼怎麼辦?
此功能僅適用於JPEG和PNG。
為何JPEG影像有時會傳回Chrome而非WebP?
智慧型影像可判斷轉換是否有效。 它只會傳迴轉換有利的新影像。
為何裝置畫素比(dpr)功能無法如預期運用於複合影像?
如果複合影像涉及太多圖層,則使用position修飾元時,dpr功能可能會受到影響。 此問題已知,且應在未來版本的「智慧型影像」中修正。 如果其他智慧型影像功能無法如預期運作,您可以建立支援案例來報告問題。
為何智慧型影像處理PNG仍會轉換為不失真WebP/AVIF?

由於PNG是無損格式,因此先前傳送的WebP和AVIF是無損的,因此產生的大小比預期大。 智慧型影像處理現在支援有損轉換。 您可以在影像要求中使用修飾元cache=update (僅限一次)來修正此問題。 使用此修飾元的範例:

https://smartimaging.scene7.com/is/image/SmartImaging/sample1?cache=update

若要讓整個快取失效,您必須建立要求此類努力的支援案例。

如何在智慧型影像中繼續使用PNG進行無損轉換?
智慧型影像處理現在支援根據品質等級進行有損轉換。 您可以透過您公司的設定或將qlt=100新增至影像的URL路徑,將品質設定為100,以繼續使用無損轉換。
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2