您應該先問自己，是否真的需要圖片才能達到想要的效果。如果您可以移除圖片資源 (通常需要大量位元組，相較於網頁上的 HTML、CSS、JavaScript 和其他素材資源)，那麼這一做法一向是最佳的最佳化策略。不過，適當放置的圖片也能傳達比千言萬語更豐富的資訊，因此請自行權衡。
接著，請考慮是否有其他技術可提供更優異的結果，但以更有效率的方式運作：
- 您可以使用 CSS 效果 (例如陰影或漸層) 和 CSS 動畫，產生不受解析度影響的素材資源，在任何解析度和縮放等級下都能呈現清晰的畫面，而且通常只需使用圖片檔案所需的字節一小部分。
- 網路字型可讓您使用美觀的字體，同時保留選取、搜尋及調整文字大小的功能，大幅提升可用性。
如果您發現自己在圖片素材資源中編碼文字，請停止並重新考慮。優質的字體排版對於良好的設計、品牌和可讀性至關重要，但圖片中的文字會導致使用者體驗不佳：文字無法選取、無法搜尋、無法縮放、無法存取，且不利於高 DPI 裝置。使用網路字型時，需要進行一系列最佳化，但這可解決所有這些疑慮，而且在顯示文字時，網路字型一向是較佳的選擇。
選擇合適的圖片格式
如果您確定圖片是正確的選項，請仔細為工作選取正確類型的圖片。
每種格式各有優缺點。向量格式最適合用於包含較不複雜幾何圖形的圖片，例如標誌、文字或圖示。無論在哪種解析度和縮放設定下，都能提供清晰的結果，因此非常適合用於高解析度螢幕和需要以不同大小顯示的素材資源。
不過，在場景複雜 (例如相片) 的情況下，向量格式就會顯得不足：用來描述所有形狀的 SVG 標記量可能會過高，且輸出結果仍可能看起來不夠「逼真」。在這種情況下，您應該使用光柵圖片格式，例如 PNG、JPEG、WebP 或 AVIF。
光柵圖片不具備解析度或縮放獨立的相同優質特性，因此當您放大光柵圖片時，會看到鋸齒狀和模糊的圖形。因此，您可能需要以不同解析度儲存多個版本的點陣圖，才能為使用者提供最佳體驗。
高解析度螢幕的影響
像素有兩種：CSS 像素和裝置像素。單一 CSS 像素可能直接對應至單一裝置像素，也可能由多個裝置像素支援。重點在哪裡？裝置像素越多，螢幕上顯示的內容細節就越精細。
高 DPI (HiDPI) 螢幕可產生精美的圖片，但有一個明顯的取捨：圖片素材資源需要更多細節，才能充分利用裝置較高的像素數量。好消息是，向量圖片非常適合這項工作，因為向量圖片可在任何解析度下算繪，並產生清晰的結果。雖然您可能需要付出較高的處理成本，才能算繪更精細的細節，但底層素材資源相同，且不受解析度影響。
另一方面，因為點陣圖會逐像素編碼圖像資料，因此難度更高。因此，像素數量越多，影像檔案大小就越大。請比較以下兩種顯示方式：
| 螢幕解析度 | 總像素 | 未壓縮的檔案大小 (每像素 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 個位元組 |
當我們將實體螢幕的解析度加倍時，像素總數會增加四倍：水平像素數量加倍，乘以垂直像素數量加倍。因此，「2x」螢幕的必要像素數量並非只增加一倍，而是增加四倍！
那麼，這在實務上代表什麼呢？高解析度螢幕可讓你呈現精美的圖片，這也是不錯的產品特色。不過，高解析度螢幕也需要高解析度圖片，因此：
- 盡可能使用向量圖片，因為向量圖片不受解析度影響，且一律會提供清晰的結果。
- 如果需要使用點陣圖，請提供回應式圖片。
不同光柵圖片格式的功能
除了不同的有損和無損壓縮演算法，不同圖片格式也支援不同的功能，例如動畫和透明度 (alpha) 通道。因此，選擇特定圖片的「正確格式」時，請同時考量適當的視覺效果和功能需求。
系統普遍支援兩種光柵圖片格式：PNG 和 JPEG。除了這些格式之外，新版瀏覽器也支援較新的 WebP 和 AVIF 圖片格式。這兩種新格式都能提供更優異的整體壓縮效果，並提供更多功能。那麼，您應該使用哪種格式？
WebP 和 AVIF 的壓縮效果通常比舊格式好，因此應盡可能使用這兩種格式。您可以使用 WebP 或 AVIF 圖片，並搭配 JPEG 或 PNG 圖片做為備用。詳情請參閱「使用 WebP 圖片」。
針對舊版圖片格式，請考量以下事項：
- 是否需要動畫？使用
<video>元素。- 那 GIF 呢？GIF 的調色盤最多可使用 256 種顏色，且產生的檔案大小會比
<video>元素大得多。APNG 提供的色彩比 GIF 多，但相較於視覺品質相當的影片格式，APNG 的檔案大小明顯較大。請參閱如何用影片取代 GIF 動畫。
- 那 GIF 呢？GIF 的調色盤最多可使用 256 種顏色，且產生的檔案大小會比
- 是否需要以最高解析度保留精細細節？使用 PNG 或無損 WebP。
- 除了選擇調色盤的大小之外，PNG 不會套用任何有損壓縮演算法。因此，這種格式可產生最高品質的圖片，但檔案大小會比其他格式大得多。請謹慎使用。
- WebP 提供低失真率編碼模式，可能比 PNG 更有效率。
- 如果圖片素材資源包含由幾何圖形組成的圖像，請考慮將其轉換為向量 (SVG) 格式！
- 如果圖片素材資源含有文字，請先停下腳步再考慮。圖片中的文字無法選取、搜尋或「縮放」。如果您需要傳達自訂外觀 (例如品牌宣傳或其他原因)，請改用網路字型。
- 您是否要最佳化相片、螢幕截圖或類似圖片素材資源？使用 JPEG、有損失的 WebP 或 AVIF。
- JPEG 會同時使用有損和無損最佳化技術，縮減圖片資產的檔案大小。嘗試使用幾種 JPEG 品質等級，找出最適合素材資源的品質與檔案大小折衷點。
- 有損 WebP 或有損 AVIF 是網路品質圖片的絕佳 JPEG 替代方案，但請注意，有損模式會捨棄部分資訊以縮小圖片大小。也就是說，選取的顏色可能與 JPEG 相片相同。
最後，請注意，如果您使用 WebView 在特定平台應用程式中轉譯內容，則可完全控制用戶端，並且可以專門使用 WebP！Facebook 和許多其他公司都會使用 WebP 在應用程式中提供所有圖片，因為這樣一來可節省大量空間。
對最大內容繪製 (LCP) 的影響
圖片可能為低延遲處理的候選項目。也就是說，圖片大小會影響載入時間。如果圖片是 LCP 候選項目，則必須有效編碼該圖片，才能改善 LCP。
您應盡力依照本指南提供的建議操作，讓所有使用者都能盡可能以最快的速度體驗網頁。LCP 是感知效能的一部分，因為它可評估網頁上最大 (因此最容易察覺) 的元素顯示速度。