[AEM Assets]{class="badge positive" title="適用於AEM Assets)。"}

最佳化影像品質的最佳做法 best-practices-for-optimizing-the-quality-of-your-images

TIP
您是 Dynamic Media 的新手嗎? 如需 Dynamic Media 的快速、高階概觀,請參閱使用 Dynamic Media。

Adobe Experience Manager提供​超過100個Dynamic Media影像傳遞命令,可用於調整、最佳化和轉譯影像。 這個廣泛的指令集可以控制影像處理及提供方式的幾乎每個方面,從解析度、壓縮,到銳利化及色彩演算。

最佳化影像品質是一項反複的、有時很耗時的程式,因為有幾個不同的因素會影響可接受的結果,包括​解析度、壓縮等級、檔案格式、銳利化​以及​色彩精確度。 結果也會有部分主觀,因為個人對影像品質的感知會有所不同,且觀看條件會因顯示器、瀏覽器或裝置而異。 由於這種變化,結構化實驗是必要的:一次有條不紊地調整一個變數並比較演算後的輸出是取得一致品質的最可靠途徑。

下列最佳實務會使用一組核心命令和經過實證的技術,簡化流程並有效提供高品質的結果。 套用這些概念絕不僅限於美學:正確最佳化的影像可減少檔案大小和載入時間,進而改善頁面效能、使用者體驗,以及在所有裝置和網路狀況下的傳送。

影響影像品質的關鍵因素

  • 解析度和尺寸 — 將傳送的畫素尺寸與實際顯示大小配對,以避免不必要地放大或縮小成品。
  • 壓縮 — 平衡檔案大小與可見品質損失,因為主動壓縮會減少頻寬,但可能會引入成品。
  • 檔案格式 — 選取最適合影像內容與目標裝置的格式,以平衡品質與傳遞效率。
  • 銳利化 — 套用銳利化以抵消調整大小期間發生的柔化效果,這會還原感知到的細節。
  • 色彩演算 — 保留精確色彩,讓影像在不同的顯示器和檢視環境中看起來一致。

建議做法

  1. 建立基準線。 使用預設設定來演算影像,以便您擁有參考點來進行比較。
  2. 一次調整一個變數。 變更單一命令或引數,然後評估結果,因為隔離變數可清楚顯示哪個調整產生了哪個效果。
  3. 以視覺化方式比較演算後的輸出。 由於影像品質部分地受到主觀影響,因此在代表性裝置和顯示裝置上並排檢閱結果。
  4. 平衡品質與效能。 確認品質改善不會增加檔案大小,使頁面載入時間和傳送受到影響。
  5. 將成功的設定標準化。 一旦您識別出產生一致結果的命令組合,請重複使用它們以簡化未來的最佳化。

藉由結合這些重要命令與結構化實驗,您可以快速且可重複地在您的Dynamic Media資產上實現高品質、高效能的影像傳送。

在Dynamic Media中啟用智慧型影像 bp-enable-smart-imaging

智慧型影像處理:

  • 在Dynamic Media中啟用智慧型影像可讓您根據使用者端瀏覽器功能自動最佳化影像​格式、大小​和​品質。 智慧型影像處理會針對每個請求執行這種格式交涉,提供指定瀏覽器支援的最有效率影像,讓頁面載入速度更快,而且耗用的頻寬更少。
    如需詳細資訊,請前往智慧型影像。
  • 它透過動態調整這些引數來增強影像傳送效能,因為傳送每個瀏覽器最小的適用檔案可減少傳送的裝載並改善頁面載入時間。
  • 管理員和開發人員可以使用自我評估工具快照來評估智慧型影像。

影像格式:

  • 避免在URL中使用明確的fmt=webp (WebP)或fmt=avif (AVIF)命令,除非使用案例特別需要。 以URL對格式進行硬式編碼會覆寫自動交涉,且可能妨礙智慧型影像處理為支援更有效率替代方案的瀏覽器提供最佳格式。
  • 智慧型影像會自動為每個請求選取最佳格式。 這樣可以減少傳輸的位元組,並產生最佳的頻寬增益。

預設行為:

  • 當URL中未指定格式命令,且未啟用智慧型影像處理時,Dynamic Media影像傳遞會預設為​ JPEG ​格式。 因此,新一代格式(例如​ WebP ​和​AVIF)不會自動提供,直到智慧型影像啟用為止。

透過針對影像格式做出明智的選擇,並啟用智慧型影像處理,您可以直接改善傳送效能和使用者體驗。

選取來源影像的最佳作法 bp-select-source-image

使用來源影像的基本考量事項:

  • Source影像格式:

    • 使用​不失真格式 — PNG (可攜式網路圖形)、TIFF (標籤影像檔案格式)或PSD (Photoshop檔案) — 保持高影像品質並消除壓縮不自然感,這是JPEG等失真格式所引入的可見扭曲。
    • 這些格式會保留所有原始畫素資料。 這使其非常適合編輯、潤飾和重複重新儲存,因為每次處理檔案時都不會失去品質。
  • Source影像大小:

    • 從​ 高解析度影像 ​開始,提供更多細節和更大的彈性,因為升級小型影像無法復原從未擷取的細節。
    • 當影像需要以不同大小(例如,跨裝置或熒幕解析度)顯示時,較大的來源影像可在每個目標維度提供更好的縮放比例和更清晰的結果。
    • 對於支援縮放的影像(例如客戶檢查細微細節的產品像片),請將最大的一面​ 的尺寸設為 ​約2,000畫素或更多。
    • 不需要縮放的標誌或橫幅可以按照預期用途所需的最大尺寸上傳。

在原始檔層級做出這些選擇,會直接決定最終視覺內容的品質,因為每個下游的調整大小、裁切和壓縮步驟都會繼承原始檔案的優點或弱點。

影像大小相關最佳實務 best-practices-for-image-size

動態縮減影像大小是影像傳送中最常見的工作之一。 它涉及指定目標尺寸,以及選擇性地選取用來縮小影像的縮減取樣模式。 建議的最佳實務URL模式為​&wid=<value>&hei=<value>&resMode=sharp2 (或僅設定高度時為​&hei=<value>&resMode=sharp2),這可提供調整大小影像的最高視覺品質。

調整引數大小

若要調整影像大小,請使用​ &wid=<value> ​和​&hei=<value>:

  • &wid=<value>​設定影像寬度。
  • &hei=<value>​設定影像高度。
  • 如果只指定了一個尺寸,這些引數會自動根據影像的外觀比例計算另一個尺寸,以保留原始比例並防止扭曲。

縮減取樣模式(resMode)

&resMode=<value>​控制縮減取樣所使用的演演算法 — 減少影像畫素尺寸的程式。 演演算法的選擇會直接影響最終縮放影像的銳利度和品質。

  • 以&resMode=sharp2開始。 這個值可提供最佳影像品質,因為當縮放影像時,它可以保留邊緣細節和精細紋理,產生清晰、無人工因素的結果。
  • &resMode=bilin (雙線性)速度較快,但由於其平均畫素更為簡單,因此經常會產生鋸齒狀不自然感 — 可見的鋸齒狀邊緣、疊印圖案以及遺失細微細節。 因此,bilin以影像品質換取處理速度。

不同於 bilin,sharp2模式會優先處理視覺逼真度,使其成為提供高品質調整大小影像的偏好選擇。

建議的最佳實務

如需調整影像大小的最佳作法,請使用​ &wid=<value>&hei=<value>&resMode=sharp2 ​或​&hei=<value>&resMode=sharp2。 此組合會設定目標維度、維持正確的外觀比例,並套用最高品質的縮減取樣演演算法。

影像銳利化的最佳作法 best-practices-for-image-sharpening

影像銳利化是控制網站上影像的最複雜方面,也會造成許多錯誤。 若要進一步瞭解銳利化和不銳利化遮色片在Experience Manager中的運作方式,請參閱下列實用資源:

在Experience Manager中,您可以在擷取、傳送或兩者同時進行期間銳利化影像。 最佳作法是隻使用一種方法來銳利化影像,而非同時使用兩者。 透過URL傳送影像時進行銳利化,可在大部分工作流程中提供最佳結果,因為可讓您調整銳利化至最終演算大小,而非將其烘焙至內嵌資產。

您可以使用兩種影像銳利化方法:

  • 簡單銳利化(&op_sharpen) — 類似於Adobe Photoshop銳利化濾鏡,它會在動態調整大小後套用基本銳利化。 這個方法不是使用者可設定的;除非必要,否則請避免使用&op_sharpen。

  • 不銳利化遮色片(&op_USM) — 不銳利化遮色片是業界標準的銳利化濾鏡,可增加邊緣對比度,讓影像看起來更清晰。 最佳作法是依照下列方針,使用遮色片銳利化來銳利化影像。 「不銳利化遮色片」可讓您控制下列三個引數:

    • &op_sharpen=金額,半徑,臨界值

      • amount (0-5,效果的強度。)
      • 半徑 (0-250,在銳利化物件周圍繪製的「銳利化線條」寬度(以畫素為單位)。

      半徑​和​ 數量 ​引數具有相反的效果:因為減少半徑會削弱效果,您可以增加數量來進行補償。 「半徑」允許更細微的控制,因為較低的值只會銳利化邊緣畫素,而較高的值會銳利化較寬的畫素範圍,產生更明顯的光暈。

      • 臨界值 (0-255,影響敏感度。)

      此引數會決定銳化畫素與周圍區域的差異程度,之後才會被視為邊緣畫素,濾鏡會銳化這些畫素。 threshold​引數有助於避免色彩相似的區域過度銳利化,例如膚色。 例如,12​的臨界值會忽略膚色亮度的細微變化,以避免加上「雜訊」,同時仍會加上邊緣對比度至高對比區域,例如睫毛與皮膚相遇的區域。

      如需如何設定這三個引數的詳細資訊,包括篩選使用的最佳實務,請參閱下列資源:

最佳作法是從「遮色片銳利化調整半徑」引數開始。 您可以開始使用的半徑設定如下:

  • 網站: 0.2-0.3畫素
  • 像片列印(250-300 ppi): 0.3-0.5畫素
  • 膠印列印(266-300 ppi): 0.7-1.0畫素
  • 畫布列印(150 ppi): 1.5-2.0畫素

請依照下列步驟來調整銳利化:

  1. 逐漸將數量從​1.75增加到4。
  2. 如果銳利化仍不令人滿意,請將半徑增加小數點。
  3. 再次執行從​ 1.75到4 ​的金額。
  4. 視需要重複此步驟,直到結果滿意為止。

將單色引數設定保留在​0。

JPEG壓縮的最佳作法(&qlt=) best-practices-for-jpef-compression-qlt

  • 建議的JPG壓縮最佳實務設定為&qlt=85,0。 這個值可平衡大部分影像的高視覺品質與控制檔案大小。

  • 此引數會控制JPG編碼品質。 較高的值​表示影像品質較高,但檔案大小較大;較低的值​表示影像品質較低,但檔案大小較小。 有效範圍是​0-100。

  • 若要最佳化品質,請勿將引數值設為​100。 90或95​的設定與​ 100 ​之間的差異幾乎肉眼看不見。 因此,設定​ 100 ​會不必要地增加影像檔案大小,而不會造成可察覺的視覺增益。 因此,若要在避免檔案過大時最佳化品質,請將qlt= value設為​90或95。

  • 若要將影像品質維持在可接受的等級,同時針對較小的檔案大小最佳化,請將qlt= value設定為​80。 低於​ 70-75 ​的值會產生顯著的可見降低效果,例如封鎖成品、分段和遺失細節,因此不建議用於製作影像。

  • 一般最佳作法是將qlt= value設為​85,這可在各種影像內容中,在品質與檔案大小之間提供一個可靠的中間點。

  • 在qlt=​中使用色度旗標

    • qlt=引數有第二個設定,可控制​RGB色度縮減取樣 — 此壓縮技術可降低色彩(色度)資訊的解析度,同時保留明度細節。 使用值​ ,1 ​開啟縮減取樣​​,或使用值​ ,0 ​關閉​​。
    • 對於大多數工作流程,從RGB色度縮減取樣關閉​開始 (,0)。 此設定可提供較佳的影像品質,因為它可保留全解析度的色彩資料,這對具有銳利邊緣、高對比和精細色彩轉換的合成影像最為重要,否則縮減取樣偽像將會顯示。

作為JPG壓縮的最佳作法,請使用​&qlt=85,0。

JPEG大小調整的最佳實務(&jpegSize=) best-practices-for-jpeg-sizing-jpegsize

&jpegSize=引數可保證傳送的影像不會超過指定的大小上限,因此必須將JPEG影像傳送至記憶體有限的​裝置。 藉由強制設定檔案大小的上限,防止超大影像超出受限使用者端上的可用記憶體。

&jpegSize=的運作方式

  • 使用語法jpegSize=<size_in_kilobytes>設定&jpegSize= (以KB為單位)。 此值定義影像傳遞允許的最大檔案大小​為。
  • &jpegSize=與​JPEG品質(壓縮)引數 &qlt=搭配使用。 當指定&qlt=值的JPEG回應​ 不 ​超過jpegSize限制時,會傳回與定義完全相同的&qlt=影像,保留要求的品質。
  • 如果影像​ 在指定的&qlt=超過jpegSize限制,則系統會遞增減少&qlt=,直到影像符合允許的大小上限。 ​因此,品質只會因滿足大小限制而降低,以確保與目標裝置相容。
  • 如果系統判斷影像​ 無法 ​縮小為符合最大允許大小,它會傳回錯誤,而不是傳送不符合規範的影像。

記憶體有限裝置的最佳作法

最佳實務是,將JPEG影像傳遞至記憶體有限的裝置時,設定&jpegSize=並將其與&qlt=​配對。 此組合可讓您同時指定目標品質和硬體大小上限,讓系統提供最高品質,同時符合裝置的記憶體限制。

最佳實務摘要 best-practices-summary

若要以較小的檔案大小​ 達到 ​高影像品質,請從下列建議的Dynamic Media影像伺服參陣列合開始:

fmt=jpg&qlt=85,0&resMode=sharp2&op_usm=1.75,0.3,2,0

此組合在大部分情況下都能產生優異的結果,是大部分影像的可靠基準。 op_usm值會套用​ 不銳利化遮色片(USM) ​銳利化,其中引數會控制效果的數量、半徑、臨界值和單色行為。

微調銳利化(不銳利化遮色片)

如果影像需要進一步最佳化,請使用下列程式逐步調整​ 不銳利化遮色片(USM) ​引數:

  1. 將​ 半徑設定為0.2或0.3 ​作為起點。
  2. 將​數量從1.75增加到最大4 — 相當於Adobe Photoshop 中的 400%。
  3. 檢閱演算後的影像,確認已達成所需的結果。
  4. 如果銳利化結果仍不令人滿意,請以小數點增量​ 增加 ​半徑。
  5. 對於半徑的每增加一個小數,請在​ 1.75 ​重新啟動該數量,並逐漸將其增加到​4。
  6. 重複步驟4和5,直到達到想要的結果為止。

雖然上述值代表創意工作室已驗證的方法,但您可以從其他值開始,並遵循其他策略。 結果是否令人滿意是主觀問題,因此​結構化的反複實驗是必要的,以便在每個影像的清晰度、品質和檔案大小之間達到最佳平衡。

工作流程最佳化秘訣

實驗時,以下一般建議有助於最佳化您的工作流程:

  • 在URL上即時測試引數。 直接在URL中調整值可讓您立即預覽效果並快速反複運算。
  • 將命令群組至影像預設集。 「動態媒體影像伺服」命令可以分組為影像預設集。 影像預設集是一組URL命令巨集,指派了自訂預設集名稱,例如$thumb_low$和&product_high$。 在URL路徑中參照自訂預設集名稱會呼叫這些預設集。 此功能可協助您管理整個網站中不同影像使用模式的命令和品質設定、透過重複使用促進一致的設定,以及縮短URL的整體長度。
  • 在Experience Manager中使用進階調整選項。 Experience Manager也提供更進階的方式來調整影像品質,例如在擷取時套用銳利化。 若要調整並最佳化演算結果,Adobe的諮詢服務可提供自訂的insight和最佳實務。
recommendation-more-help
experience-manager-cloud-service-help-main-toc