使用經過最佳化的圖片政策，確保您的網站使用成效最佳的圖片。
圖片通常會佔用大量的視覺空間，並構成網站上下載的位元組中的大部分。最佳化圖片可以改善載入效能並減少網路流量。
令人驚訝的是，網路上有超過半數的網站提供低壓縮或不必要的大型圖片。因此，只透過將圖片最佳化，就有更多空間可以提升效能。
比方說，要怎麼知道圖片是否經過最佳化處理？我該如何將圖片最佳化？我們正在實驗一組新的圖片最佳化功能政策：oversized-images、unoptimized-lossy-images、unoptimized-lossless-images 和 unoptimized-lossless-images-strict。上述所有功能現在皆可用於來源試用。
最佳化圖片政策
權限政策即將推出一組新的映像檔限制，適用於開發期間強制執行的映像檔。系統會將違反任何限制的圖片轉譯為預留位置圖片，方便您輕鬆找出並加以修正。您可以在報表專用模式中指定這些政策，讓圖片在沒有強制執行的情況下正常顯示，而系統也會透過報表觀察違規情事。(詳情請參閱下方的「公開報表模式」一節)。
超大型圖片
oversized-images 權限政策會限制圖片的內建函式尺寸，相對於其容器大小。
當文件使用 oversized-images 政策時，任何內建函式解析度大於任一尺寸容器大小 X 倍的 <img> 元素，都會替換為預留位置圖片。
為什麼？
如果提供比檢視畫面裝置可轉譯的圖片還要多 (例如向行動裝置環境提供電腦版圖片，或是將高像素密度圖片提供給低像素密度裝置)，就會浪費網路流量和裝置記憶體。請參閱「提供圖片尺寸正確的圖片」和「提供回應式圖片」，瞭解如何最佳化圖片。
示例
以下提供幾個範例來說明。下圖顯示將圖片顯示大小減半時的預設行為。
如果我套用下列權限政策，就會改為顯示預留位置圖片，
Permissions-Policy: oversized-images *(2);
如果只調降寬度或高度，會取得類似的結果。
How to use
總結來說，你可以透過下列任一方式指定 oversized-images 政策：
Permissions-PolicyHTTP 標頭<iframe>allow屬性
如要宣告 oversized-images 政策，您需要提供：
- 特徵名稱
oversized-images(必填) - 來源清單 (選填)
- 起點的門檻值 (即縮小比例 X)，以括號指定 (選填)
我們建議將縮放比率設為 2.0 以下。建議您使用不同解析度的回應式圖片，為各種螢幕大小、解析度等條件提供最佳圖片。
其他示例
Permissions-Policy: oversized-images *(2.0)
這項政策會針對門檻值為 2.0 的所有來源強制執行。系統不允許使用縮小比例大於 2.0 的圖片任何 <img> 元素，並替換成預留位置圖片。
Permissions-Policy: oversized-images *(inf) 'self'(1.5)
這項政策會對網站來源強制執行，且門檻值為 1.5。
只有在縮減比率小於或等於 1.5 時，頂層瀏覽情境中的 <img> 元素和相同來源巢狀瀏覽環境才會正常顯示。其他所有位置的 <img> 個元素都會正常顯示。
un 最佳化-{lossy,lossless} 圖片
unoptimized-lossy-images、unoptimized-lossless-images、unoptimized-lossless-images-strict 功能政策會限制圖片的內建函式解析度：
unoptimized-lossy-images- Lossy 格式不得超過每像素像素比 X 的 X，而且負荷允許固定為 1 KB。以寬 x H 圖片來說，檔案大小門檻的計算方式為寬 x 高 x X + 1024。
unoptimized-lossless-images- 無限制格式不得超過每像素像素比 X，固定 10 KB 的負擔。以寬 x H 圖片來說，檔案大小門檻的計算方式為寬 x 高 x X + 10240。
unoptimized-lossless-images-strict- 無限制格式不得超過每像素像素比 X，固定 1 KB 的負擔。以寬 x H 圖片來說，檔案大小門檻的計算方式為寬 x 高 x X + 1024。
當文件使用以下任一政策時，任何違反限制的 <img> 元素都會替換為預留位置圖片。
為什麼？
下載檔案大小越大，載入圖片所需的時間就越長。最佳化圖片時，請盡量縮減檔案大小，例如移除中繼資料、挑選合適的圖片格式、使用圖片壓縮等。請參閱「使用 Imagemin 壓縮圖片」和「使用 WebP 圖片」，瞭解如何最佳化圖片。
範例
以下顯示預設的瀏覽器行為。如果沒有權限政策，未最佳化的失真圖片將僅像最佳化圖片一樣顯示。
如果我套用下列權限政策，就會改為顯示預留位置圖片，
Permissions-Policy: unoptimized-lossy-images *(0.5);
How to use
如果您是第一次使用權限政策，請參閱「權限政策簡介」一文瞭解詳情。
總結來說，您可以透過以下方式指定 unoptimized-{lossy,lossless}-images 政策：
Permissions-PolicyHTTP 標頭<iframe>allow屬性
如要宣告 unoptimized-{lossy,lossless}-images 政策，您需要提供：
- 地圖項目名稱，例如
unoptimized-lossy-images(必填) - 來源清單 (選填)
- 起點的門檻值 (即每像素的位元組比率 X)，以括號指定 (選填)
我們建議 unoptimized-lossy-images 的每像素像素使用率應設為 0.5 以下，unoptimized-lossless-images 和 unoptimized-lossless-images-strict 則建議將每像素像素使用率設為 1 以下。
WebP 格式的壓縮比其他格式更好。如果可以，請以 WebP 失真格式提供所有圖片。如果不夠充分，請嘗試使用 WebP 無損格式。在不支援 WebP 格式的瀏覽器上使用 JPEG。如果所有格式都無效，請使用 PNG。
如果您使用的是 WebP 格式，請嘗試設定更嚴格的門檻：
- 0.2 為 WEBPV8
- 0.5 代表 WEBPL
其他示例
Feature-Policy: unoptimized-lossy-images *(0.5);
unoptimized-lossless-images *(1.0);
unoptimized-lossless-images-strict *(1.0);
這項政策會對所有閾值為 0.5 (適用於有損格式) 和 1 (無失真格式) 的來源強制執行。如果 <img> 元素的圖片每像素比例超出限制，則一律禁止，並替換成預留位置圖片。
Feature-Policy: unoptimized-lossy-images *(inf) 'self'(0.3);
unoptimized-lossless-images *(inf) 'self'(0.8);
unoptimized-lossless-images-strict *(inf) 'self'(0.8);
這項政策是在網站來源強制執行，且閾值為 0.3 (針對損失格式) 和 0.8 (適用於無損格式)。頂層瀏覽環境中的 <img> 元素和相同來源巢狀瀏覽內容只會在符合這些限制時一般轉譯。任何其他位置都可以正常算繪的 <img> 元素。
公開的報表模式
這可能不適合發布含有預留位置圖片的網站。您可以在開發和測試期間，在強制執行模式下使用政策 (以預留位置圖片轉譯未最佳化的圖片)，並在實際工作環境中使用僅報表模式。(詳情請參閱權限政策報告)。與 Permissions-Policy HTTP 標頭類似，Permissions-Policy-Report-Only 標頭可讓您即時觀察違規報表，不必執行任何強制執行作業。
限制
圖片政策僅適用於 HTML 圖片元素 (<img>、<source> 等)，且目前不支援背景圖片或產生的內容。如果您希望針對較廣泛的內容提出政策支援，請告訴我們。
將圖片最佳化
我已經談過最佳化圖片的方式，但還沒說是可行的。這個主題不在本文的探討範圍內，但如要進一步瞭解詳情，請瀏覽下方連結和文章結尾列出的程式碼研究室。
請提供寶貴意見
希望這篇文章已讓您充分瞭解圖片政策，並期待您有所期待。我們非常希望各位能試用相關政策， 並提供意見回饋。
您可以透過郵寄清單，針對本文提及的各項功能提供意見回饋：feature-control@chromium.org。
我們想瞭解您使用的門檻值，是否對您有幫助。我們很樂意瞭解 unoptimized-lossless-images 或 unoptimized-lossless-images-strict 是否更直覺易用，或者是否應改為使用差異負擔配額。試用期即將結束時，我們會發送問卷調查敬請期待！