放送回應式圖片

Katie Hempenius
Katie Hempenius

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

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

圖片載入速度加快的效果也可能延伸到網頁的最大內容繪製 (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="flower-large.jpg"> <img src="flower-large.jpg" srcset="flower-small.jpg 480w, flower-large.jpg 1080w" sizes="50vw">

<img> 標記的 srcsrcsetsizes 屬性都會互動,以達到這個最終結果。

「src」屬性

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

「srcset」屬性

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

這個範例使用寬度描述項,可告知瀏覽器圖片的寬度,因此瀏覽器不必下載圖片即可得知。480w 是寬度描述項,可告知瀏覽器 flower-small.jpg 的寬度為 480 像素。1080w 是寬度描述符,可告知瀏覽器 flower-large.jpg 的寬度為 1080 像素。

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

「sizes」屬性

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

瀏覽器會使用這項資訊,以及它所知的使用者裝置資訊 (包括尺寸和像素密度),判斷要載入哪個圖片。

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

額外獎勵:如果您想讓應用程式更精緻,也可以使用 sizes 屬性指定多個版位大小。這可讓網站根據不同的可視區域大小使用不同的版面配置。請參閱這個多個版位程式碼範例,瞭解如何執行這項操作。

(更多) 額外學分

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

驗證

導入回應式圖片後,您可以使用 Lighthouse 確認沒有遺漏任何圖片。執行 Lighthouse 成效稽核 (依序前往「Lighthouse」>「選項」>「成效」),查看「適當調整圖片大小」稽核結果。這些結果會列出仍需調整大小的圖片。