一个经常让网页在谷歌 SEO 测速评估里“吃鸭蛋红色警告”的重要原因，就是：不管谁来打开，都粗鲁地让浏览器啃下一张 5MB 大小的 PC 端超高清图！手机屏幕宽度窄，却要耗费用户多余的 5G 流量去下载几百万个根本挤不下的冗余物理像素点。今天我们来探讨一招优雅的原生应对方案——srcset 自适应图片插槽。

1. 过去粗放的网页引流方式

<!-- ❌ 坏习惯：给 2500px 视窗和 400px 掌上手机投喂相同的高强宽大图 -->
<img src="huge-hero-2560px.jpg" alt="产品展示图" />

2. 高阶自适应载入方案

利用 HTML5 规范中的 srcset 和 sizes 双剑合璧，提供一整套不同物理宽度的一揽子图片梯队。客户端浏览器会在开局算好当前的屏幕像素密度和显示网格尺寸，只选择精准相配的那张轻量图片下载：

<img src="hero-600px.jpg"
     srcset="hero-600px.jpg 600w,
             hero-1200px.jpg 1200w,
             hero-2000px.jpg 2000w"
     sizes="(max-width: 600px) 100vw,
            50vw"
     alt="自适应网页横幅" />

3. 理解属性参数中的数学含义

  • srcset="...": 告诉浏览器你准备了哪些规格的文件。注意，这里的单位必须使用字母 w（表示图片纯物理像素宽度），而不是 px 或 rem。
  • sizes="...": 告诉浏览器此图像在您精心布设的布局里到底要分得多少宽度。比如 (max-width: 600px) 100vw 表示在宽度小于600宽的小屏上占满整屏，如果是大台式机，可能只分到 50vw 的分界。

配置之后，手持手机访问的访客将聪明地忽略巨无霸 hero-2000px.jpg，仅轻快吸入 hero-600px.jpg，直接省去 80% 的过载流量，首屏闪电秒开！