Web 平台 API / 响应式图片 · 让浏览器挑对那一张 待审核 10 页

响应式图片 · 让浏览器挑对那一张

<img src> 只能指向一个文件，而这个文件要同时满足三类互相冲突的屏幕：像素密度从 1 到 3 不等、布局宽度从手机的 360px 到桌面的 1440px 不等、网络从光纤到弱信号不等。按桌面 2x 屏准备的 2160px 图，落在 360px 宽的 2x 手机上是所需像素的 9 倍；按手机准备的 720px 图，放到桌面栏宽里又明显发虚。

浏览器最早能做的只有下载 src。2012 到 2014 年间，srcset（Apple 提出）与 <picture>（社区提出）两套方案在 WHATWG 与 W3C 之间争论了两年，最后合并成今天的形态：srcset 列候选、sizes 报布局宽度、<picture> 负责 art direction 与格式协商。此后十年又陆续补上 loading="lazy"、宽高比映射、fetchpriority，直到 2026 年三家引擎全部落地的 sizes="auto"，把「布局宽度」这项最难手写的输入交还给布局本身。

每页都把属性设到真实的 <img> 上，候选图由 canvas 现画、图上印着自己的像素宽，浏览器选中哪一张既能看到，也由 currentSrc 回读。正文里的选择结果与像素值均出自 Chrome 154 的实测；其中几处与规范文本或常见说法不符，分别在 w 描述符与 sizes、sizes="auto" 与 loading 三页写明。

问题与来历

一张图为什么不够用，以及 srcset 与 <picture> 两条路线如何从对立走到合并。

2010–2026

一张图不够用：问题与来历

像素密度、布局宽度与画面裁切三个变量，让单一的 src 无法满足所有屏幕。srcset 与 <picture> 在 2012–2014 年间从对立走向合并，此后十年陆续补上懒加载、优先级与 sizes="auto"。

选择哪一张

浏览器在下载之前就要定下候选：x 描述符对应像素密度，w 描述符配合 sizes 对应布局宽度，sizes="auto" 让布局给出宽度，<picture> 在更上一层按媒体条件与格式切换来源。

srcset · 1x 2x 3x

x 描述符与像素密度

x 描述符按 devicePixelRatio 选图，只适用于布局宽度固定的图。选中的候选会改写天然尺寸：400px 宽的 2x 图，naturalWidth 是 200。实测的取档规则是不小于 DPR 的最小密度。

srcset · 640w · sizes

w 描述符与 sizes

w 描述符写出候选的像素宽，sizes 写出布局宽度，两者之比即密度。sizes 是一份手抄的 CSS，抄错时浏览器照错的选；内存缓存里已有的大图会优先复用。

sizes=auto · loading=lazy

sizes="auto"：让布局给出宽度

sizes="auto" 让懒加载的图直接取布局宽度选图，不再手抄 CSS。它只在 loading="lazy" 时生效，随附的 contain: size 会抹掉图片的宽高比，不写宽高时高度停在 150px。

picture · source media / type

picture 与 source：换图与格式协商

<source> 的 media 与 type 是命令而不是提示，第一个满足条件的必须采用。media 做 art direction，type 做格式协商，都不读文件内容；各分支的宽高写在 <source> 上。

何时加载、怎样占位

选定之后还有三个问题：下载前盒子该占多大、屏外的图何时开始下载、首屏的图如何抢到带宽与解码时机。

width / height · aspect-ratio

尺寸与占位：width、height 与 object-fit

width / height 映射为 aspect-ratio: auto w / h，图片下载前就按比例占位。属性只需给出比例，写错时图片自身的比例在加载后接管；盒子比例固定时由 object-fit 决定内容怎样落入。

loading="lazy" · scroll margin

loading：懒加载的提前量

loading="lazy" 把下载推迟到图片接近视口，提前量由浏览器决定，实测纵向 1250px、横向 625px。不写尺寸的懒加载图全部塌在一处，第一轮就全部下载。

fetchpriority · preload · decode()

优先级与解码：fetchpriority、preload 与 decoding

首屏主图还要争抢带宽与主线程。fetchpriority 调整请求优先级，preload 配 imagesrcset 让藏起来的图提前被发现，img.decode() 处理字节到齐之后的解码时机。

其余属性与 CSS 侧

alt、crossorigin、referrerpolicy、usemap 等不参与选择的属性，已废弃的表现属性，以及 CSS 里的 image-set()。

alt · crossorigin · usemap · image-set()

其余属性与 CSS 侧的 image-set()

alt 决定图片缺失时的替代，crossorigin 与 referrerpolicy 决定请求怎样发出，usemap 是早期的可点击区域，表现类属性已由 CSS 取代。背景图的切换由 image-set() 承担。