放送回應式圖片

Katie Hempenius

舉例來說，如要在行動裝置上提供電腦版圖片，數據用量可能會比需求多出 2 到 4 倍。請按照本頁指南操作，為不同裝置提供不同的圖片大小，以改善使用者體驗。

回應式圖片和網站體驗核心指標

提供回應式圖片時，頁面會評估使用者裝置的顯示功能，並根據這些條件選出一組最適合顯示的圖片。這能為使用者節省資料，主要透過在螢幕較小的裝置上提供較小的圖片。

加快圖片載入速度也可能會影響網頁的最大內容繪製 (LCP)。舉例來說，如果網頁的 LCP 元素是圖片，即時提供圖片可以縮短資源載入時間。

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

調整圖片大小

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

清晰的套件很適合用來自動調整圖片大小 (例如，為網站上的所有影片產生多種大小的縮圖)。速度飛快，且能與建構指令碼和工具完美整合。ImageMagick 是完全從指令列執行，因此較不方便調整一次性圖片大小調整作業。

尖銳

如要使用清晰化做為節點指令碼，請將這個程式碼儲存為專案中的個別指令碼，然後執行該指令碼來轉換圖片：

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」屬性

尺寸屬性會告知瀏覽器圖片顯示時的寬度 (雖然不會影響圖片的顯示大小，所以仍須使用 CSS)。

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

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

額外加分：如果您想更靈活，也可以使用尺寸屬性指定多個版位大小。這適用於針對不同可視區域大小使用不同版面配置的網站。方法請參閱多個版位程式碼範例。

(更多) 額外課程功勞

除了已列出的所有額外功勞 (圖片相當複雜！)，您也可以在建立藝術方向時使用相同的概念。藝術方向是指在不同可視區域提供完全不同的圖片 (而非同一圖片的不同版本)。詳情請參閱 Art Direction 程式碼研究室。

驗證

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