使用 srcset 即可自動選擇合適的圖片大小。
根據 HTTP 封存， 一般行動網頁的檔案大小超過 2.6 MB，超過三分之二 重量是圖片這就是最佳化的大好機會！
摘要
- 不要儲存大於顯示大小的圖片。
- 為每張圖片儲存多種尺寸，然後使用
srcset敬上 屬性讓瀏覽器能夠選擇最小尺寸。w值會向瀏覽器指出各個版本的寬度：
<img src="small.jpg"
srcset="small.jpg 500w,
medium.jpg 1000w,
large.jpg 1500w"
alt="…">
儲存適當大小的圖片
您可使用 符合顯示大小的尺寸換句話說，在圖片上 設定時，請使用寬度和高度屬性。
請看下方的圖片。
這兩個檔案看起來幾乎完全相同，但只有一個檔案大小超過 10 次 因此大於 100%
第一張圖片是依尺寸儲存，因此檔案較大 遠大於顯示大小兩張圖片都顯示固定 寬度為 300 像素，因此建議使用儲存在相同裝置的映像檔 大小
如果是固定寬度，請使用儲存尺寸與 顯示大小
但是...如果顯示大小不同，該怎麼辦？
在多款裝置中，圖片不一定是以固定大小顯示。
圖片元素可能有百分比寬度，或屬於回應式版面配置的一部分 其中圖片顯示大小會配合螢幕大小調整尺寸。
...對 Retina 螢幕這類容易飢餓的裝置有什麼影響呢？
協助瀏覽器選擇適當的圖片大小
如果您可以讓每張圖片不同大小，那就太棒了 要讓瀏覽器選擇最適合裝置的尺寸和顯示大小？ catch-22 並找出成效最佳的圖片。瀏覽器會根據 但是如果不下載圖片進行檢查，就無法得知圖片的寬度。
這時 srcset 能夠派上用場。您儲存了不同大小的圖片
向瀏覽器指出每個版本的寬度：
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
alt="…">
w 值會顯示每張圖片的寬度 (以像素為單位)。例如：
small.jpg 500w 會告知瀏覽器 small.jpg 為 500
像素寬。讓瀏覽器能選擇最小的圖片大小
實際情況取決於螢幕類型和可視區域大小
然後下載圖片來檢查其大小
您可以從下方圖片查看「srcset」的實際運作情形。如果你使用筆記型電腦
請變更瀏覽器視窗大小，然後重新開啟這個網頁。
然後使用瀏覽器工具的「網路」面板查看使用的圖片。
(您必須在無痕或私人視窗中進行，否則
即可快取原始圖片檔)。
如何建立多種圖片大小？
您需要為要使用的每張圖片提供多種尺寸
只在 srcset。
針對一次性圖片 (例如主頁橫幅)，您可以手動儲存不同大小。如果 例如產品相片等大量圖片 就必須自動化 為此，有兩種方法
在建構程序中加入圖片處理機制
在建構程序中，您可以新增步驟，以建立不同大小 或是映像檔的版本請參閱「使用 Imagemin 壓縮圖片」 。
使用圖片服務
您可以使用以下商業服務自動製作及提交圖片： Cloudinary，或同等的開放原始碼，例如 您自行安裝與經營的幽默感。
你會自動上傳高解析度圖片，而且圖片服務會自動顯示。
根據網址建立並放送不同的圖片格式和大小
參數。舉例來說，請開啟 Cloudinary 上的這個範例圖片，然後嘗試變更 w 值或網址列中的副檔名。
圖片服務還提供更進階的功能，例如 「智慧裁剪」，並自動提交 WebP 圖片 如此不必變更 JPEG 檔案，而是支援此格式的瀏覽器 。
如果圖片在不同大小的情況下無法呈現最佳效果，該怎麼辦？
在這種情況下，您必須使用 <picture> 元素做為「藝術方向」：
提供不同大小的圖片或圖片裁剪。瞭解詳情
請查看「圖片方向」程式碼研究室。
那像素密度呢？
高階裝置的實體像素較小 (密度較高)。舉例來說 高階手機的每一列像素 像素化的裝置中。
這可能會影響圖片儲存的大小。我們不會離開 詳細說明，但你也可以前往 「使用密度描述元」程式碼研究室。
圖片的顯示大小怎麼辦？
您可以使用 sizes 讓 srcset 更臻完善。
如果沒有這個視窗，瀏覽器在選擇
擷取自 srcset 的圖片sizes 屬性會向瀏覽器指出
圖片元素就會顯示
圖片檔案，再進行版面配置計算。
在以下範例中，sizes="50vw" 會告知瀏覽器此圖片將
顯示在可視區域寬度的 50% 處
<img src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
sizes="50vw"
alt="…">
您可以在下列網址查看實際運作情況： simpl.info/sizes 和「指定多個運算單元寬度」程式碼研究室。
瀏覽器支援呢？
srcset 和 sizes 支援超過 90%
全域瀏覽器。
如果瀏覽器不支援 srcset 或 sizes，就會改回使用 src 屬性。
這會讓 srcset 和 sizes 的漸進式強化功能更臻完善！
瞭解詳情
查看「最佳化圖片」一節 的 web.dev 中，以便深入瞭解圖片最佳化作業。如需更多指引 不妨試試免費的「回應式」設計 圖片"課程，提供者： Udacity.