請先確定圖片是否為圖片 事實上，才能達到期望的效果 良好的設計簡單，而且隨時都能產生最佳成效。 如果排除圖片資源 相對於 HTML、CSS、JavaScript 和網頁上的其他素材資源，這類素材資源通常需要大量位元組 那一直都是最合適的最佳化策略 即便如此，放置適當圖片就能傳達更多資訊，而不是一千個字。 因此你必須在兩者之間找出平衡點
接著，請評估是否有其他技術可提供所需結果 但更加有效率：
- CSS 效果 (例如陰影或漸層) 和 CSS 動畫 可用來產生與解析度無關的資產，無論解析度和縮放等級都相同， 通常只佔圖片檔所需的位元組比例
- 網頁字型可讓您使用美觀的字體 同時保有選取、搜尋 以及調整文字大小 - 使用便利性大幅提升
如果您發現自己對圖片素材資源中的文字進行編碼，請停止操作並重新考慮。 良好的字體排版是良好的設計、品牌宣傳和可讀性。 但會使用文字做為圖片，卻會造成使用者體驗不佳： 文字無法選取、無法搜尋、無法縮放 而且不適合高 DPI 裝置使用。 使用網路字型時，需要用到專屬的最佳化做法， 但它可以解決上述所有問題，而且在顯示文字時是更好的選擇。
選擇合適的圖片格式
如果您確定圖片是正確的選項，請謹慎為工作選取正確的圖片種類。
每種格式各有優缺點。 向量格式最適合包含由簡單幾何形狀 (例如標誌、文字或圖示) 組成的圖片。 不論解析度和變焦設定，都能提供清晰的成果。 因此是理想的格式，適用於需要以不同大小顯示的高解析度螢幕和素材資源。
不過，當場景十分複雜 (例如相片) 時，向量格式可能就會偏低： 用來說明所有形狀的 SVG 標記量 生成的結果可能不是「擬真」， 在這種情況下，應該使用光柵圖片格式。 例如 PNG、JPEG、WebP 或 AVIF
光柵圖片與解析度或各自縮放沒有相同的好屬性 — 放大光柵圖片時，您會發現圖形變得模糊且模糊。 因此，您可能需要儲存多個解析度不同的光柵圖片版本 讓使用者享有最佳體驗。
高解析度螢幕的影響
像素可分為兩種：CSS 像素和裝置像素。 單一 CSS 像素都可以直接對應到單一裝置像素，也可以由多個裝置像素支援。 重點是什麼？裝置上的像素越多，畫面顯示的內容就會越詳細。
高 DPI (HiDPI) 螢幕會產生精美的結果，但有一個明顯的優缺點： 圖片素材資源需要更多細節，才能善用較高的裝置像素數量。 好消息是，向量圖片非常適合用於這項工作 這種圖片能以任何解析度呈現 而且結果清晰可辨 但可能需要較高的處理費用 才能呈現更詳盡的資料 但基礎資產是相同的，而且與解析度無關。
另一方面，光柵圖片是以每個像素為基礎編碼圖片資料，因此難度更高。 因此像素數越大，光柵圖片的檔案大小也越大。 舉例來說，假設以 100x100 (CSS) 像素顯示的相片素材資源之間的差異如下：
| 螢幕解析度 | 像素總數 | 未壓縮檔案大小 (每像素 4 位元組) |
|---|---|---|
| 1x | 100 x 100 = 10,000 | 40,000 個位元組 |
| 2 倍 | 100 x 100 x 4 = 40,000 | 160,000 個位元組 |
| 3 倍 | 100 x 100 x 9 = 90,000 | 360,000 個位元組 |
只要將實體螢幕的解析度設為兩倍 像素總數會加倍 將水平像素數量的兩倍，乘以直向像素數量的兩倍。 因此，「2 倍」螢幕不僅是兩倍，也增加了四倍所需的像素！
實務上該怎麼做呢？ 高解析度螢幕可讓你拍出精美的圖片，是優異的產品功能。 不過，高解析度螢幕也需要使用高解析度圖片，因此：
- 請盡可能優先使用向量圖片，因為向量圖片與解析度無關，而且可呈現清晰的結果。
- 如果需要拍攝光柵圖片，請提供回應式圖片。
各種光柵圖片格式的功能
除了不同的有損和無損壓縮演算法之外 不同的圖片格式支援不同功能，例如動畫和透明度 (Alpha 版) 頻道。 因此，您可以選擇「正確格式」，即可結合所需的影像結果和功能性要求
系統支援的光柵圖片格式有兩種：PNG 和 JPEG。 除了這些格式外，新式瀏覽器也支援較新的 WebP 格式，但只有部分瀏覽器支援較新的 AVIF 格式。這兩種新格式都能提供更優異的整體壓縮品質，並提供更多功能。那麼，該使用哪一種格式呢？
WebP 和 AVIF 的壓縮效果通常比舊格式更好 並盡可能使用 您可以使用 WebP 或 AVIF 圖片，搭配 JPEG 或 PNG 圖片做為備用圖片。 詳情請參閱使用 WebP 圖片。
就舊版圖片格式而言，請考慮以下幾點：
- 是否需要動畫？使用
<video>元素。- 那 GIF？GIF 會限制調色盤最多顯示 256 種顏色，
並且製作比
<video>元素更大的檔案。詳情請見 將動畫 GIF 替換成影片。
- 那 GIF？GIF 會限制調色盤最多顯示 256 種顏色，
並且製作比
- 是否需要以最高解析度保留精細細節？使用 PNG 或無損 WebP。
- 除了調色盤大小之外，PNG 並不支援任何有損壓縮演算法。 因此，這個解碼器會產生最高畫質的圖片 但檔案大小卻遠高於其他格式請謹慎使用。
- WebP 提供無損編碼模式，可能比 PNG 更有效率。
- 如果圖片素材資源包含由幾何形狀組成的圖像，建議你轉換為向量 (SVG) 格式！
- 如果圖片素材資源含有文字，請停止並重新考慮。圖片中的文字無法選取、搜尋或「可縮放」。 如果您需要傳達自訂外觀 (為了宣傳品牌或其他原因)，請改用網路字型。
- 想對相片、螢幕截圖或類似圖片素材資源進行最佳化嗎？請使用 JPEG、有損 WebP 或有損壓縮的 AVIF。
- JPEG 結合有損和無損的最佳化組合，縮減圖片素材資源的檔案大小。建議你嘗試數種 JPEG 品質等級，來找出最佳品質與檔案大小之間的取捨。
- 有損 WebP 或有損 AVIF 是可接受的 JPEG 替代方案，但請注意，WebP 的失真模式特別會捨棄部分色域資訊，以縮小圖片。這表示選取的顏色可能不會與對應的 JPEG 相同。
最後請注意，如果您使用 WebView 在平台專屬應用程式中呈現內容， 則您可以完全掌控用戶端，而且可以單獨使用 WebP！ Facebook 和許多其他使用者使用 WebP 將他們所有的圖片傳遞到自己的應用程式中， 省下的費用絕對值得
對大型內容繪製 (LCP) 的影響
圖片可能為 LCP 候選項目。也就是說，圖片大小會影響其載入時間。如果圖片是 LCP 候選人，那麼有效率地編碼該圖片有助於提升 LCP。
請盡力採用本文提供的建議，讓網頁的感知顯示速度盡可能快，讓所有使用者都能看到。LCP 是感知效能的一部分，用於衡量網頁上最大 (以及最明顯) 元素的顯示速度。