HTML 的 srcset、sizes 和 picture 有什么区别？响应式图片怎么选？

下面是一段教学用的模拟面试。

🧑‍💻 面试官：srcset、sizes 和 picture 有什么区别？

🙋‍♂️ 我：srcset 提供图片候选，sizes 告诉浏览器预计展示宽度，picture 可以按条件选来源。

🧑‍💻 面试官：sizes 写 50vw，会把图片 CSS 宽度设成半屏吗？

🙋‍♂️ 我：不会，它主要帮助浏览器选择资源。

🧑‍💻 面试官：手机要裁切后的竖图，而不是缩小的横图，应该用哪个？浏览器一定按我手算的尺寸选文件吗？

先分清「布局占多宽」「下载哪份资源」和「使用哪种构图」。三个问题对应不同机制。

面试速答（60 秒版）

srcset 提供多份图片资源，可以用宽度描述符 w，或者像素密度描述符 x。浏览器结合环境选择合适候选。

使用 w 时，sizes 描述图片在当前条件下预计占据的 CSS 宽度，让浏览器结合设备像素比估算需要的资源。但它不会替代 CSS，也不会直接改变图片布局。

picture 则可以通过 source 的 media、type 等条件选择不同来源，适合手机与桌面使用不同裁切，或者提供不同图片格式。

实际使用时，我会保证候选宽度描述与真实文件一致，让 sizes 接近真实布局，同时预留图片尺寸。不要把一张超大图片缩小显示当成资源优化，也不要认为浏览器选择只能由一个公式决定。

布局、资源、构图，分开决定

图：由浏览器选择候选图片，服务器负责提供资源；sizes 描述预期显示宽度，不负责设置布局。

知识点详解：响应式图片，实际上在决定什么？

CSS 决定布局，候选集合决定资源选择

假设文章封面在桌面占半屏，在手机占满屏。CSS 控制它最终显示多宽；srcset 则告诉浏览器有哪些不同分辨率文件可以下载。

同一张 1600 像素宽图片，显示成 300 CSS 像素，并不表示下载量变小。需要提供较小候选，浏览器才有选择空间。

使用 w 描述符时，描述的是资源实际像素宽度，不是展示宽度。标成 800w 的文件，应该真的对应这个宽度。

sizes 是选择提示，不是样式规则

<img
  src="/images/cover-800.jpg"
  srcset="/images/cover-400.jpg 400w,
          /images/cover-800.jpg 800w,
          /images/cover-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  width="1600"
  height="900"
  alt="文章封面"
/>

这是 HTML 示例，无须翻译为 TypeScript/Python。实际显示宽度仍需与 CSS 布局配合。

浏览器从 sizes 取得预计显示宽度，再结合设备像素比等因素选候选。比如预计 400 CSS 像素、设备像素比为 2，约需要 800 资源像素。

但浏览器可能考虑缓存、网络和实现策略，不能保证每次都选手算出的唯一文件。机制可以核对 MDN 响应式图片教程。

预计显示宽度，乘设备像素比

图：400 CSS 像素乘 DPR 2，得到约 800 像素的候选需求；浏览器还会结合环境选择，不保证一定下载某一张。

picture 解决构图与来源选择

假设桌面封面是宽横图，手机为了突出人物，需要竖向裁切。仅改变分辨率，无法改变主体构图。

picture 可以按 media 选择不同 source，让手机使用另一个裁切版本。type 则可以让支持某种格式的浏览器优先采用相应资源，最后保留 img 作为必要图像元素和回退。

source 顺序会影响匹配，应把条件更具体或更优先的来源放好。不要把 picture 理解成同时下载并显示多张图片的容器。

换分辨率，与换构图不同

图：换分辨率，与换构图不同。

宽度与密度描述符，不能随意混写

如果图片 CSS 尺寸基本固定，可以提供 1x、2x 的密度候选；如果布局尺寸明显变化，通常用 w 与 sizes 更合适。

同一个 srcset 列表不能把 w 与 x 当成一组随意混合的标签。无效或错误描述，可能让浏览器选错甚至忽略候选。

怎么验证真的选对资源？

在不同视口和设备像素比下检查 currentSrc 与网络请求，确认实际下载文件。改变窗口后，缓存中的较大资源也可能继续复用，所以不能只靠一次刷新截图。

还要检查图片比例和预留空间。width、height 或合适的 aspect-ratio 能减少布局跳动，但它们与 srcset 的资源选择又是不同问题。

面试官继续追问

sizes 写得过大有什么影响？

浏览器可能高估所需资源，下载过大图片。写得过小则可能不足清晰。应与真实布局对应。

picture 里面还需要 img 吗？

需要。img 是最终图像元素，提供 alt、回退等能力，source 只是来源条件。

响应式图片和懒加载是一回事吗？

不是。前者选择哪份资源，后者决定何时加载。可以配合，但首屏关键图不应随意懒加载。

面试速记卡

CSS：决定真实显示布局。

srcset：提供资源宽度或密度候选。

sizes：提示预计 CSS 宽度，不修改布局。

picture：按条件选择构图或格式来源。

验证：检查 currentSrc、网络、清晰度和布局稳定性。