針對行動裝置提供桌機大小的圖片，數據用量可以超過 2 到 4 倍 。遵循本頁面列出的指南，改善使用者體驗， 向不同裝置放送不同大小的圖片。
回應式圖片與 Core Web Vitals
提供回應式圖片時，網頁會評估顯示功能 並從中選出一組 根據這些條件盡可能放送多媒體廣告這麼做會為使用者儲存資料 主要是向螢幕較小的裝置提供較小的圖片。
加快圖片載入的速度，也會延伸到 Largest Contentful Paint (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
如要調整圖片大小，以符合 300px 寬 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，請在伺服器上安裝這項工具。雲朵 系統會為你完成詳細資料，而且無須設定伺服器。
提供多個映像檔版本
當您指定多個映像檔版本時，瀏覽器會選擇最適合的 而是使用：
| 變更前 | 變更後 |
|---|---|
| <img src="flower-large.jpg"> | <img src="flower-large.jpg"srcset="flower-small.jpg 480w、 「flower-large.jpg」(1080w)size="50vw"> |
<img> 標記的
src,
srcset,
和sizes
每個屬性都會相互互動來達成這項最終結果。
「src」屬性
src 屬性讓這個程式碼在不支援
支援 srcset 和 sizes
屬性。這些瀏覽器回頭載入
src 屬性。
「srcset」屬性
srcset 屬性是以半形逗號分隔的圖片檔案名稱及其名稱清單
寬度或密度描述元
本範例使用
寬度描述元
它會告訴瀏覽器圖片的寬度
如此一來就不必自行下載
圖片480w 是寬度描述元，會告知瀏覽器
flower-small.jpg 的寬度為 480 像素。1080w 是寬度描述元
瀏覽器的 flower-large.jpg 寬度為 1080 像素。
額外課程內容： 您不必瞭解密度描述元，即可提供不同的圖片大小。 不過，如果您想知道密度描述元的運作方式，請參考 解析度切換程式碼研究室。 密度描述元可用於根據裝置 像素密度。
「大小」屬性
size 屬性會告知瀏覽器圖片的寬度 但不會影響圖片的顯示大小，因此您仍然需要 適用的 CSS 系統
瀏覽器會使用這項資訊，以及已瞭解使用者的 裝置 (包括裝置尺寸和像素密度) 來決定該使用哪種圖片 載入。
如果瀏覽器無法辨識「sizes」會改回使用原始狀態
載入「src」指定的圖片屬性。(sizes 和 srcset)
同時導入，因此每個瀏覽器都支援這兩種類型的
或兩者皆無)。
額外課程內容： 如果您希望更加搶眼，可以使用 size [尺寸] 屬性來指定 多種版位大小也適合使用不同版面配置的網站 不同的可視區域大小查看多個運算單元程式碼範例 。
(更多) 額外學分
除了已列出的所有額外學程之外 (圖片相當複雜！)， 這些概念也能用於 圖片方向。 藝術方向是指放送完全不同以往的圖片 (而非同一張圖片的不同版本) 在不同可視區域中。個人中心 詳情請參閱 Art Direction 程式碼研究室。
驗證
導入回應式圖片後，可以使用 Lighthouse 確認 未偵測到任何圖片執行 Lighthouse 效能稽核 ([Lighthouse] > [選項] > [效能])，找出產生結果的結果 適當調整圖片大小稽核。這些結果會列出你仍需要的圖片 調整大小。