圖片成效

圖片通常是網路上最熱且最受歡迎的資源。身為 因此，最佳化圖片可大幅提升網站成效。 在大多數情況下，最佳化圖片意味著 也能將傳送給使用者的位元組數最佳化 提供符合使用者裝置大小的適當圖片。

你可以使用 <img> 或 <picture> 元素在網頁中加入圖片，或 CSS background-image 屬性。

圖片大小

使用圖片資源時，首先可以執行的最佳化作業是 以正確大小顯示圖片；在本例中，size 是指 圖片的尺寸。未含其他變數的圖片，而是顯示圖片 500 x 500 像素容器中的大小，會是 500 像素的最佳大小 500 像素。舉例來說，使用正方形 1000 像素的圖片時， 速度可達兩倍

不過，在選擇適當圖片大小時涉及「許多」變數 因此關鍵在於選擇適當圖片大小 變得複雜2010 年，iPhone 4 上市時，螢幕解析度 (640x960) 是 iPhone 3 (320x480) 的兩倍。不過，實體的 iPhone 4 的螢幕保持大約與 iPhone 3 相同。

以較高解析度顯示所有內容，都會形成文字和圖片 只有這一半的尺寸如先前所示。而是 1 像素 變成 2 裝置像素。也就是裝置像素比例 (DPR)。 iPhone 4 和之後推出的許多 iPhone 型號的 DPR 為 2。

請再次參考上述範例，如果裝置的 DPR 為 2，映像檔是 顯示在 500 x 500 像素容器中，接著是 1000 像素的正方形圖片 (稱為「內建大小」) 現在是最佳大小。同樣地， 裝置的 DPR 為 3，則 1500 像素的正方形圖片就是最佳尺寸。

srcset

<img> 元素支援 srcset 屬性，可讓您指定 瀏覽器可能使用的圖片來源清單。已指定每個圖片來源 必須包含圖片網址、寬度「或」像素密度描述元。

<img
  alt="An image"
  width="500"
  height="500"
  src="/image-500.jpg"
  srcset="/image-500.jpg 1x, /image-1000.jpg 2x, /image-1500.jpg 3x"
>

上述 HTML 程式碼片段使用像素密度描述元，向瀏覽器提示 以便在 DPR 為 1、image-1000.jpg 的裝置上使用 image-500.png DPR 為 2，且 DPR 為 3 的裝置上的 image-1500.jpg。

雖然看似流暢或乾燥，但畫面上的 DPR 並非唯一的選擇 因此會考量是否要為該網頁選擇最適合的圖片網頁的 layout 也是另一項考量重點

sizes

前一個解決方案只有在圖片相同 CSS 像素的情況下才能運作 所有可視區域的大小在許多情況下，網頁的版面配置 - 容器的配置 會視使用者的裝置而有所不同。

sizes 屬性可讓您指定一組來源大小，其中每個 來源大小包含媒體條件和值。sizes 屬性 說明瞭 CSS 像素的預期顯示圖片大小。合併時 帶有 srcset 寬度描述元，瀏覽器就能選擇圖片來源 以使用者的裝置來說是最佳選擇

<img
  alt="An image"
  width="500"
  height="500"
  src="/image-500.jpg"
  srcset="/image-500.jpg 500w, /image-1000.jpg 1000w, /image-1500.jpg 1500w"
  sizes="(min-width: 768px) 500px, 100vw"
>

在上述 HTML 程式碼片段中，srcset 屬性會指定圖片清單 瀏覽器選取的候選項目，以半形逗號隔開。這個領域的候選人 清單是由圖片網址構成，後面接著表示 圖片的內建寬度。圖片的「內建大小」是圖片的尺寸。適用對象 例如，1000w 的描述元表示圖片的內建寬度為 寬度為 1000 像素。

瀏覽器會使用這些資訊，評估 sizes 中的媒體條件 屬性；在這個例子中，系統會指示裝置的可視區域寬度 圖片的顯示寬度超過 768 像素，以 500 像素的寬度顯示。以下尺寸： 裝置時，圖片會設為 100vw 或完整的可視區域寬度。

如此一來，瀏覽器就可以將這項資訊與 srcset 圖片清單合併 找出最佳圖片舉例來說，如果使用者使用行動裝置 裝置的螢幕寬度為 320 像素，DPR 為 3，就會顯示圖片 通知時間：320 CSS pixels x 3 DPR = 960 device pixels。在此範例中，距離最近的 尺寸為 image-1000.jpg 的圖片，內建寬度為 1000 像素 (1000w)。

檔案格式

瀏覽器支援多種不同的圖片檔格式，現代圖片格式包括 與 PNG 或 JPEG 相比，WebP 和 AVIF 的壓縮效果較佳， 圖片檔案大小會變小，進而減少下載時間。依提供服務 新格式的圖片可縮短資源的載入時間， 會導致最大內容繪製 (LCP) 效能降低。

WebP 是廣泛支援的格式，適用於所有新式瀏覽器。WebP 壓縮效果通常比 JPEG、PNG 或 GIF 更好，具有 lossy 和 無損壓縮。WebP 也支援 Alpha 通道透明度 使用失真壓縮 - JPEG 轉碼器不提供的功能。

AVIF 是新的圖片格式，雖然沒有廣泛支援 WebP 格式， 都享有合理的瀏覽器支援。AVIF 支援兩種有失真率 和無損壓縮，且測試結果顯示，如果能省下超過 50% 的費用， 與 JPEG 相比AVIF 也提供廣色域 (WCG) 和 高動態範圍 (HDR) 功能。

壓縮

針對圖片，壓縮作業分為兩種類型：

1. 阻斷壓縮
2. 不失真壓縮

失真壓縮可透過量化降低圖像準確率， 和額外顏色資訊可能會遭到色度向下取樣捨棄。 失真壓縮在含有大量雜訊的高密度圖片上效果最佳 和色彩 (通常是內容相似的相片或圖像)。這是因為 損失壓縮後產生的成果不太可能會引起使用者的注意 都能拍出清晰的影像但是，對損失的壓縮效果可能較差 包含銳利邊緣 (如線條藝術) 或類似的星狀細節，或 文字。有損壓縮可套用至 JPEG、WebP 和 AVIF 圖片。

無損壓縮會壓縮不含資料的圖片，藉此縮減檔案大小 損失無損壓縮會根據圖像 相鄰像素。無損壓縮適用於 GIF、PNG、WebP 和 AVIF 圖片格式。

您可以使用 Squoosh、ImageOptim 或圖片壓縮圖片 最佳化服務壓縮時沒有合適的通用設定 以及各種適用的模型建議您嘗試 直到圖片品質和圖片品質都差不多 檔案大小部分進階圖片最佳化服務可為您代勞 但可能無法為所有使用者獲利

<picture> 元素

<picture> 元素可讓您更靈活地指定多個 候選圖片：

<picture>
  <source type="image/avif" srcset="image.avif">
  <source type="image/webp" srcset="image.webp">
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image.jpg"
  >
</picture>

在 <picture> 元素中使用 <source> 元素時，您可以 支援 AVIF 和 WebP 圖片，但改用更相容的舊版映像檔 格式。透過這個方法 瀏覽器會選擇第一個符合的 <source> 元素。如果可以 模型就會使用該圖片如果沒有，瀏覽器 移至下一個指定的 <source> 元素。在上述 HTML 中 程式碼片段，AVIF 格式的優先順序高於 WebP 格式，但會改回使用 。

<picture> 元素需要內嵌的 <img> 元素。 alt、width 和 height 屬性是在 <img> 上定義，並使用 無論已選取哪個 <source>。

<source> 元素也支援 media、srcset 和 sizes 屬性。與前面的 <img> 範例類似，這些都會指示 瀏覽器該選取不同檢視點的圖片

<picture>
  <source
    media="(min-resolution: 1.5x)"
    srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

media 屬性採用媒體條件。在上述範例中， 裝置的 DPR 用做媒體條件。任何 DPR 大於的裝置 或等於 1.5 會使用第一個 <source> 元素。<source> 元素 告訴瀏覽器，在可視區域寬度超過 768 像素的裝置上， 候選圖片的大小為 500 像素。在小型裝置上 這會佔用整個可視區域寬度結合 media 和 srcset 也可以更精準地控制要使用的圖片

如下表所示，現在有數種可視區域寬度和 系統會評估以下指標：

如果裝置 DPR 為 1，就會下載 image-500.jpg 映像檔 (包括大多數 電腦使用者：以外尺寸 (寬度為 500 像素) 查看圖片。啟用 另一方面，DPR 為 3 的行動裝置使用者 image-1500.jpg：DPR 為 3 的電腦裝置所用的圖片。

<picture>
  <source
    media="(min-width: 560px) and (min-resolution: 1.5x)"
    srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <source
    media="(max-width: 560px) and (min-resolution: 1.5x)"
    srcset="/image-1000-sm.jpg 1000w, /image-1500-sm.jpg 1500w"
    sizes="(min-width: 768px) 500px, 100vw"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

在這個範例中，<picture> 元素會經過調整，加入額外的 <source> 元素，針對高 DPR 的寬螢幕裝置使用不同的圖片：

這個額外查詢可以顯示 image-1000-sm.jpg 「image-1500-sm.jpg」會顯示在小型可視區域上。這項額外資訊 可讓您進一步壓縮圖片，因為壓縮成果並不高 圖片上的大小和密度都能看見，而且不會影響圖片品質 電腦裝置。

或者，調整 srcset 和 media 屬性，則可避免 在小型可視區域中放送大型圖片：

<picture>
  <source
    media="(min-width: 560px)"
    srcset="/image-500.jpg, /image-1000.jpg 2x, /image-1500.jpg 3x"
  >
  <source
    media="(max-width: 560px)"
    srcset="/image-500.jpg 1x, /image-1000.jpg 2x"
  >
  <img
    alt="An image"
    width="500"
    height="500"
    src="/image-500.jpg"
  >
</picture>

上述 HTML 程式碼片段已移除寬度描述元，並做出明智決策 裝置像素比例描述元的高低在行動裝置上顯示的圖片會受到限制 至 /image-500.jpg 或 /image-1000.jpg，即使是 DPR 為 3 的裝置也一樣。

如何管理複雜度

使用回應式圖片時，你會發現 每張圖片的大小變化與格式在前例中 ，但排除 AVIF 和 WebP你該提供幾個變化版本 有？和許多工程問題一樣，答案通常都是「取決於」。

你可能會想製作許多變化版本來獲得最佳的尺寸， 額外的圖片變化版本都會產生成本，而且使用 瀏覽器快取只有一個子類時，每位使用者都會收到相同的圖片 以便非常有效率地快取資料

另一方面，如果有多個變化版本，則每個變化版本都需要 快取項目。如果 子類的快取項目已過期，因此系統必須從 來源伺服器

除此之外，每一種變化形式的 HTML 文件大小也都會增加。個人中心 每項圖片都要提供好幾 KB 的 HTML 程式碼

依據 Accept 要求標頭提供圖片

Accept HTTP 要求標頭會告知伺服器哪些內容類型 才能正確判斷您的伺服器可使用這項資訊來提供 不將額外的位元組加入 HTML 回應中的最佳圖片格式。

if (request.headers.accept) {
  if (request.headers.accept.includes('image/avif')) {
    return reply.from('image.avif');
  } else if (request.headers.accept.includes('image/webp')) {
    return reply.from('image.webp');
  }
}

return reply.from('image.jpg');

上述 HTML 程式碼片段是簡化版程式碼，可加到 伺服器的 JavaScript 後端，選擇並放送最佳的圖片格式。 如果要求 Accept 標頭包含 image/avif，則 AVIF 圖片會是 廣告。否則，如果 Accept 標頭包含 image/webp，則 WebP 圖片 。如果上述兩個條件皆不同，則 JPEG 圖片 廣告。

您可以根據 Accept 要求標頭的內容修改回應 幾乎所有類型的網路伺服器，例如您可以重新編寫圖片要求 由 Apache 伺服器建立，以使用 mod_rewrite 的 Accept 標頭為依據。

這與在圖片內容傳遞聯播網上提供的行為不同 (CDN)。Image CDNs 是絕佳解決方案，適合最佳化圖片，以及傳送 根據使用者的裝置和瀏覽器顯示最適合的格式。

重點在於找出平衡、產生合理的候選圖片數量 以及評估對使用者體驗的影響不同的圖片 不同結果，而每張圖片套用的最佳化作業都取決於 網頁和裝置之間的空間大小舉例來說 全寬度主頁橫幅需要更多變化版本， 電子商務產品資訊頁面

延遲載入

您可以指示瀏覽器 使用 loading 屬性建立可視區域。lazy 屬性值會指出 除非圖片位於 (或接近) 可視區域，否則瀏覽器不會下載圖片。這個 可節省頻寬，可讓瀏覽器優先採用所需的資源 會轉譯檢視點中原有的重要內容。

decoding

decoding 屬性會告訴瀏覽器應如何解碼圖片。A 罩杯 async 值會指示瀏覽器能否以非同步方式解碼圖片。 縮短轉譯其他內容所需的時間sync 值會指出 ，這類圖片在顯示時應與其他內容同時呈現。 預設值 auto 可讓瀏覽器決定最適合 內容。

圖片示範

學以致用

下一項：影片成效

圖片是網路最受歡迎的媒體類型，但距離到 您只需要留意這個簡單的架構即可視訊 是網路使用的另一種常見媒體，且有 效能注意事項在本課程的下一個單元中 影片最佳化及如何有效率地載入影片