以前把圖片當(dāng)襪子用：抓一張就塞進(jìn)去，<img src="photo.jpg">——收工。 在筆電上看著“也行”，就不再多想。

后來(lái)同一個(gè)站點(diǎn)換到手機(jī)、4G 網(wǎng)絡(luò)一試，頁(yè)面喘得像爬樓的老煙槍。 一查網(wǎng)絡(luò)面板：橫幅圖5 MB 的 JPEG。好家伙……

那會(huì)兒（還沒(méi)用上 ChatGPT ??）我開(kāi)始瘋狂搜索，最后遇見(jiàn)了 srcset。

這玩意兒，真能救站。

srcset 的基本盤

別再?gòu)?qiáng)迫所有人下載同一張圖了。srcset 讓你把多個(gè)版本交給瀏覽器： 小、中、大各來(lái)一份，由它根據(jù)設(shè)備與布局自行挑。

不需要任何 JS 小把戲，行數(shù)越少越香，不是嗎？

瀏覽器實(shí)際會(huì)怎么“挑”

瀏覽器沒(méi)你想的笨，它會(huì)同時(shí)參考：

• 屏幕尺寸：手機(jī)？平板？還是 6K 顯示器？
• 像素密度：普通屏還是能數(shù)毛孔的 Retina？
• sizes 提示：這張圖在布局里到底要占多寬？

兩種常用寫(xiě)法

1) 寬度描述符（w）

同一張圖的不同寬度版本，用 w：

<img 
  src="photo-800.jpg" 
  srcset="
    photo-400.jpg 400w,
    photo-800.jpg 800w,
    photo-1600.jpg 1600w
  "
  sizes="(max-width: 600px) 100vw, 800px"
  alt="A mountain at sunrise">

• 400w / 800w / 1600w 告訴瀏覽器文件本身的固有寬度。
• sizes 是關(guān)鍵：它是“布局占位”的預(yù)告單。沒(méi)有它，瀏覽器會(huì)以為這圖總是全寬，為“保險(xiǎn)”直接抓最大那張。

規(guī) 則：用了 w，就必須寫(xiě) sizes。

2) 密度描述符（x）

更“懶”的方式，適合不會(huì)伸縮的圖標(biāo)/界面元素：

<img 
  src="icon.png" 
  srcset="icon.png 1x, icon@2x.png 2x" 
  alt="App icon">

• 普通屏拿 1x；Retina 屏拿 2x。
• 此處不需要sizes。

警 告：同一個(gè) srcset 里別把 w 和 x 混著用。這是無(wú)效寫(xiě)法。

大家最容易踩的坑

• 把 w 和 x 混搭在同一個(gè) srcset 里（無(wú)效）。
• 用了 w 卻 忘了寫(xiě) sizes（最大殺手）。
• 以為 srcset 會(huì)自動(dòng)幫你壓縮/裁圖（不會(huì)！你要自己產(chǎn)出小圖版本）。

什么時(shí)候上 <picture>

當(dāng)素材本身需要切換（比如不同裁剪或不同格式）時(shí)，用 <picture>：

<picture>
  <source type="image/avif" srcset="hero-800.avif 800w, hero-1600.avif 1600w" sizes="100vw">
  <source type="image/webp" srcset="hero-800.webp 800w, hero-1600.webp 1600w" sizes="100vw">
  <img src="hero-800.jpg" alt="Hero image" width="1600" height="900">
</picture>

語(yǔ)義相當(dāng)于：能用 AVIF 就用 AVIF，不行就 WebP，再不行退回 JPEG。 就像點(diǎn)餐：先上壽司，不吃魚(yú)就披薩，還不行——給你來(lái)份樸素三明治，不驚艷但頂飽。

實(shí)戰(zhàn)清單

• 永遠(yuǎn)寫(xiě)上 width / height（避免 CLS 抖動(dòng)）。
• 選一種體系：w或x，別混用。
• 一組實(shí)用寬度：320 / 480 / 768 / 1024 / 1366 / 1600 / 2048 px。
• 壓縮文件：手機(jī)直出的原圖不適合上網(wǎng)，那是“磚”。
• 打開(kāi) DevTools → Network → 過(guò)濾 Img，看實(shí)際加載了哪張；瀏覽器挑選有時(shí)會(huì)超出你預(yù)期。

總結(jié)

srcset 不是魔法，它只是給瀏覽器選擇題。 你喂的信息爛，它做的選擇就爛； 你把信息說(shuō)清楚，它就能省流量、提速度，用戶和你都開(kāi)心。

我親眼見(jiàn)過(guò)——只是補(bǔ)齊 srcset + sizes，圖片總傳輸體積直接砍掉 70%。 不夸張，那真是“哇，現(xiàn)在網(wǎng)站終于會(huì)飛了”的瞬間。

用 srcset，但要用得對(duì)。