srcset 实测 1,664 张首页图片：608 张写了，811 张连尺寸都没有

实测 · 2026-08-27 · 26 个首页 · 1,664 张图 · 一次抓取 · 只看原始 HTML

样本 / 口径：2026-08-15 起一直在用的那 30 个站，2026-08-27 各抓一次，浏览器 UA，不渲染。逐条读出原始 HTML 里的 <img>，记下 src、有没有 srcset 与 sizes、srcset 里用的是哪种描述符、width 与 height、以及 loading。

26 个首页共 1,664 张图，其中 608 张写了 srcset，811 张既没写 width 也没写 height。这是两件不同的事，而且是被不同的站做掉的：srcset 决定浏览器下载哪个文件，两个尺寸属性决定图片加载时页面会不会跳一下。六个站只做前一件。三个站一件都不做。

怎么测的

每站一次 HTTP 请求，不渲染，不重试。纳入规则跑数前写死：最终状态 200、解压后正文至少 10,000 字节、正文里有 <body。30 个里挂了 4 个 —— www.canva.com 返回 429，stackoverflow.com 与 medium.com 返回 403，www.reddit.com 返回一个 8,393 字节的空壳，剩下 26 个。

属性按「存在」判，不按值判，所以 width="" 算声明，属性不存在才算没有。描述符类型另跑了第二遍，直接从落盘字节用正则重数——解析器只告诉我们有没有 srcset，没告诉我们里面写的是 w 还是 x。两遍结果一致才发。

# 在自己的页面上数这三个数
curl -sL --compressed -A 'Mozilla/5.0' https://example.com/ > page.html
grep -o '<img[^>]*>' page.html | wc -l                 # 总数
grep -o '<img[^>]*srcset=[^>]*>' page.html | wc -l     # 带 srcset
grep -o '<img[^>]*>' page.html | grep -c 'width=.*height='

这次没测真实浏览器最后挑了哪一档。那取决于视口、像素密度和已经生效的 CSS，一次不渲染的抓取全看不到。下面全部是标记层给浏览器提供了什么，不是浏览器选了什么。

srcset 覆盖 37% 的图，两种描述符的比例并不对半

1,664 张图里 608 张带 srcset。26 个站里 20 个至少用过一次，6 个一次都没用。这 608 张里面，宽度描述符对像素密度描述符是二比一还多。

两种描述符不能互换。MDN 的 img 参考页 2026-08-27 读，把原因写得很清楚：宽度描述符「must match the intrinsic width of the referenced image」，而且「when a srcset contains 'w' descriptors, the browser uses those descriptors together with the sizes attribute to pick a resource」。像素密度描述符则完全不需要 sizes。同一页还有一条硬规矩：「It is incorrect to mix width descriptors and pixel density descriptors in the same srcset attribute.」本样本没有一张图混写。

覆盖率几乎是全有或全无。The Verge 是 108 张里 107 张带 srcset，Ars Technica 61 张里 59 张，Stripe 30 张里 29 张。Discord 是 171 张里 17 张，Webflow 是 168 张里 1 张。这是构建流水线的一个开关，不是逐张图的决定，数字上看得很明白。

811 张图一个尺寸都没声明，三个新闻站占了 239 张

接近一半——1,664 张里的 811 张——既没有 width 也没有 height。另有 51 张只写了其中一个，那等于什么也没预留。

MDN 把后果写得很直接：「Including height and width enables the aspect ratio of the image to be calculated by the browser prior to the image being loaded. This aspect ratio is used to reserve the space needed to display the image, reducing or even preventing a layout shift when the image is downloaded and painted to the screen.」

有三个站是整站所有图都不写尺寸属性——www.bbc.com（134 张）、www.nytimes.com（55 张）、www.wired.com（50 张），合计 239 张，三家都是新闻站，都在用一个把盒子交给 CSS 定的图片组件。反过来也有七个站是每一张图都写全两个：nextjs.org、vercel.com、www.notion.com、www.netlify.com、developer.mozilla.org、news.ycombinator.com、www.wikipedia.org。

那三个新闻站到底会不会真的抖，标记层判不了——CSS 的 aspect-ratio 能做同样的事，我们没有在浏览器里验过任何一个。抓取能说的只有一句：那个几乎零成本的声明，在 862 张图上是缺的。

106 张图写了 sizes=auto，全部配了懒加载

sizes="auto" 这个关键字比这批标记里的大多数写法都新，本样本只有两个站在用：Ars Technica 54 张，TechCrunch 52 张。106 张全部同时带 loading="lazy"，正好是 MDN 给它附的条件：「This is only valid when combined with loading='lazy', as the page is expected to already have CSS and other layout information by the time the image loads.」

这是个干净结果，也出乎我们意料。两个站用了一个相当冷门的关键字，配对一个都没写错。与它相邻的那个错误——写了 sizes 却没有 srcset 可作用，纯属白写——在 1,664 张图里出现 0 次。真正的缺口也比预想的小：485 张用宽度描述符的图里，21 张没写 sizes，这 21 张会按 100vw 兜底。

117 个 img 元素连 src 都没有

对任何不执行 JavaScript 就读页面的东西来说，这是本篇最要紧的一条。四个站合计 117 个 <img> 元素完全没有 src 属性：Slack 69 个，Wired 24 个，纽约时报 23 个，Vercel 1 个。Slack 和 Wired 把真实地址放在 data-src 里，等脚本跑起来再换。

这 117 个里也没有一个带 srcset。对一个取到 HTML 就停的客户端而言，它们是空元素。Google 的图片文档要的正好相反：「We recommend that you always specify a fallback URL using the src attribute.」

srcset 决定浏览器下载哪个文件。src 缺不缺，决定别的东西看不看得见这张图。

这对你意味着什么

三件事，按回报排序。第一件不花钱，而且能把本篇最大的那个数字直接抹掉。

1. 每张图都写上 width 和 height，填文件的原始像素。两个属性，在任何 CSS 加载之前就把跳动消掉。
2. 用了 w 描述符就配 sizes，否则接受 100vw 的兜底。如果那张图本来就是固定尺寸的 logo，改用 x 描述符，sizes 一行都不用写。
3. 哪怕脚本待会儿会替换，也给每张图留一个真的 src。三件里只有这一件是「你自己的浏览器看不出来、别的东西全看得见」。

这三件背后的做法，包括搜索引擎到底读图片的哪几样、又忽略哪几样，写在 seo 图片的六个属性。同一批图的 loading 属性早前统计过，在 1,677 张首页图片的懒加载。脚本不跑时页面还剩什么，见 AI 爬虫会不会执行 JavaScript。想看引擎从你自己的页面上拿到了什么，可以 看看 QueryWin 怎么运转。

常见问题

你们是怎么测的？

2026-08-27 每个首页发一次请求，浏览器 UA，正文落盘，img 元素用 HTML 解析器读一遍，描述符类型再从落盘字节正则重数一遍，两遍对得上才发。

srcset 到底做了什么？

它把同一张图的几个文件一起给浏览器，让浏览器自己挑。写 w 描述符时，挑哪一个取决于 sizes 和设备；写 x 描述符时只取决于像素密度。挑的是浏览器，不是你。

srcset 一定要配 sizes 吗？

只有宽度描述符要。MDN 写的是规范要求：「The sizes attribute only be present when srcset uses width descriptors.」用像素密度描述符时 sizes 会被忽略，而本样本里也确实没人在那种情况下写它。

srcset 对 SEO 有没有帮助？

单独看没有。Google 的图片文档把它当成一种投递手段——「The srcset attribute allows specifying different versions of the same image, specifically for different screen sizes」——并要求旁边留一个兜底的 src。能测到的影响在字节数和版面上，不在这张图被怎么理解上。

为什么用 picture 的站这么少？

26 个站里 7 个用，覆盖 183 张图、181 个 <source> 元素。它解决的问题和 srcset 不同：给的是不同的文件而不是同一文件的不同尺寸，通常是为了换格式或者换构图。光 Wired 一家就占了 181 个 source 里的 85 个。