放送回應式圖片

Katie Hempenius

向行動裝置提供電腦版大小的圖片，可能會比必要使用 2 到 4 倍的資料。請按照本頁規範，為不同裝置提供不同圖片大小，以改善使用者體驗。

回應式圖片和 Core Web Vitals

當您放送回應式圖片時，網頁會評估使用者裝置的顯示功能，並根據這些條件選擇一組最適合顯示的圖片候選圖片。這項功能可為使用者節省資料，主要是透過為螢幕較小的裝置提供較小的圖片。

加快圖片載入速度的效果，也可以延伸至網頁的最大內容繪製 (LCP)。舉例來說，如果網頁的 LCP 元素是圖片，則以回應式方式放送圖片，就能縮短其資源載入時間。

縮短資源載入時間可縮短 LCP 圖片的載入時間，進而提升網頁的 LCP 分數。LCP 越低，使用者就會覺得網站載入速度越快，尤其是最重要的內容 (LCP 元素) 載入速度越快。提供回應式圖片也可以減少網頁上其他資源的頻寬爭用情形，進而提升網頁的整體載入速度。

調整圖片大小

兩個最熱門的圖片大小調整工具是 sharp npm 套件和 ImageMagick CLI 工具。

如要自動調整圖片大小 (例如為網站上的所有影片產生多種尺寸的縮圖)，sharp 套件是不錯的選擇。這項工具速度快，且可與建構指令碼和工具完美整合。如要一次性調整圖片大小，使用 ImageMagick 會更方便，因為它完全透過命令列執行。

尖銳

如要使用 sharp 做為 Node 指令碼，請將這段程式碼儲存為專案中的獨立指令碼，然後執行該指令碼來轉換圖片：

const sharp = require('sharp');
const fs = require('fs');
const directory = './images';

fs.readdirSync(directory).forEach(file => {
  sharp(`${directory}/${file}`)
    .resize(200, 100) // width, height
    .toFile(`${directory}/${file}-small.jpg`);
  });

ImageMagick

如要將圖片的大小調整為原始大小的 33%，請在終端機中執行下列指令：

convert -resize 33% flower.jpg flower-small.jpg

如要調整圖片大小，使其可在 300 像素寬 x 200 像素高的空間內顯示，請執行下列指令：

# macOS/Linux
convert flower.jpg -resize 300x200 flower-small.jpg

# Windows
magick convert flower.jpg -resize 300x200 flower-small.jpg

應建立多少個圖片版本？

這個問題沒有單一「正確」答案。不過，通常會提供 3 到 5 種不同大小的圖片。提供更多圖片大小可提升效能，但會占用更多伺服器空間，且需要您編寫較多的 HTML。

其他選項

Thumbor (開放原始碼) 和 Cloudinary 等圖片服務也值得一試。這兩種方法都是建立回應式圖片的簡單方法，而且還可視需要提供圖片處理功能。如要設定 Thumbor，請在伺服器上安裝這項工具。Cloudinary 會為您處理詳細資料，因此您不需要設定伺服器。

提供多個圖片版本

指定多個圖片版本時，瀏覽器會選擇最適合的版本：

<img> 標記的 src、srcset 和 sizes 屬性都會互動，以達到這個最終結果。

「src」屬性

有了 src 屬性，這個程式碼就能在不支援 srcset 和 sizes 屬性的瀏覽器上運作。這些瀏覽器會改為載入 src 屬性中指定的資源。

「srcset」屬性

srcset 屬性是以逗號分隔的清單，其中包含圖片檔案名稱及其寬度或密度描述符。

這個範例使用寬度描述元，會向瀏覽器指出圖片的寬度，這樣就不必下載圖片就能找到。480w 是寬度描述元，可告知瀏覽器 flower-small.jpg 的寬度為 480 像素。1080w 是寬度描述符，可告知瀏覽器 flower-large.jpg 的寬度為 1080 像素。

額外獎勵：您不必瞭解密度描述符，也能提供不同大小的圖片。不過，如果您想瞭解密度描述符的運作方式，請參閱解析度切換程式碼實驗室。密度描述符可根據裝置的像素密度提供不同的圖片。

「sizes」屬性

sizes 屬性會告知瀏覽器圖片顯示時的寬度，但不會影響圖片的顯示大小，因此您仍需要使用 CSS。

瀏覽器會根據這項資訊以及對使用者裝置的瞭解 (包括尺寸和像素密度)，決定要載入的圖片。

如果瀏覽器無法辨識「sizes」屬性，就會改為載入「src」屬性指定的圖片。(sizes 和 srcset 同時推出，因此每個瀏覽器都會支援這兩個屬性，或完全不支援。)

額外加分：如果您想優先使用，也可以使用 size 屬性來指定多個運算單元大小。這可讓網站根據不同的可視區域大小使用不同的版面配置。操作方法請參閱多個運算單元程式碼範例。

(更多) 額外學分

除了上述所有額外功勞 (圖片很複雜！) 之外，您也可以將這些概念用於藝術指導。藝術指導是指為不同檢視區提供完全不同的圖片 (而非同一張圖片的不同版本)。詳情請參閱 Art Direction 程式碼研究室。

驗證

實作回應式圖片後，您可以使用 Lighthouse 確保不會錯過任何圖片。執行 Lighthouse 效能稽核 (依序前往「Lighthouse」>「選項」>「效能」)，查看「適當調整圖片大小」稽核結果。這些結果會列出仍需調整大小的圖片。