响应式图片怎么选：用 srcset 和 sizes 让不同屏幕加载合适资源

生成摘要

AI 生成，仅供参考

页面里的图片看起来只占一小块，浏览器却可能下载了远大于实际显示需求的文件；反过来，手机屏幕像素密度较高时，过小的资源又容易显得模糊。srcset 和 sizes 能让浏览器根据候选图片、预计显示宽度和屏幕条件选择资源，关键是让 sizes 描述的宽度与页面现有布局一致，而不是借它修改布局。

浏览器如何用 srcset 和 sizes 选图

srcset 列出同一内容的多个图片候选资源，并用宽度描述符标明每个候选文件的像素宽度，例如 480w、960w。sizes 则描述图片在页面布局中预计占据的宽度。浏览器会结合这些信息，以及屏幕尺寸和显示密度等条件，决定下载哪个候选文件。

这两个属性各司其职：srcset 提供可选资源，sizes 描述显示槽位。只写 srcset，却没有准确说明图片实际显示多宽，浏览器就缺少重要的选图依据；sizes 也不会替代 CSS 改变图片布局。

下面的例子假设图片在页面中的显示宽度固定为 320 CSS 像素：

<img
  src="card-640.jpg"
  srcset="card-320.jpg 320w, card-640.jpg 640w, card-960.jpg 960w"
  sizes="320px"
  alt="文章配图">

这里的文件名和尺寸仅用于说明写法，应替换成实际存在、内容一致的图片候选资源。若图片确实固定显示为 320 像素，sizes="320px" 就描述了这一布局；屏幕密度较高时，浏览器仍可从候选资源中选择更合适的文件。若 CSS 中实际显示宽度并非 320 像素，就应调整 sizes，而不是为了迎合示例改动页面布局。

流式图片：让 sizes 跟上现有容器

流式布局中的图片通常随容器缩放。假设图片在窄屏下占满视口，在较宽页面中最多显示 700 CSS 像素，可以这样写：

<img
  src="article-700.jpg"
  srcset="article-480.jpg 480w, article-700.jpg 700w, article-1400.jpg 1400w"
  sizes="(max-width: 700px) 100vw, 700px"
  alt="文章配图">

这里的 sizes 表示：视口不宽于 700 像素时，图片预计占据整个视口宽度；更宽时，预计显示宽度为 700 像素。它必须对应页面真实的布局。如果图片所在容器有边距、侧栏，或宽度受到其他 CSS 规则限制，就不能直接把 100vw 当作通用答案，应按该图片实际占据的空间填写。

常见的误区，是把 sizes 写成与布局无关的固定值，或者为了匹配它而改动 CSS。更稳妥的做法是先确认图片在不同视口下的实际显示宽度，再让 sizes 描述这一变化。这样只调整资源选择提示，不必改变页面布局。

首屏图片：单独核对显示尺寸与加载时机

首屏图片的资源选择也遵循同一原则：先按现有布局写好候选资源和 sizes，再检查浏览器是否能根据页面中的实际显示宽度选到合适文件。首屏图片若被设置为延迟加载，还要确认它不会因此等到进入可视区域后才开始加载。不要仅凭图片文件名或 src 属性判断最终下载了哪张候选资源。

发布前的检查顺序

可以先从最容易出错的显示宽度查起：在移动端和桌面端分别确认图片的实际尺寸，以及容器是否存在最大宽度、边距或其他限制。接着核对 sizes 是否描述了这些布局条件，再检查 srcset 中各候选项是否确实指向同一内容、并标注了对应的资源宽度。

最后，在浏览器开发者工具中观察图片请求，并在不同视口下重复检查。若页面布局没有问题、下载资源却明显不合适，优先重新核对 sizes 与真实显示宽度是否一致。这样既能保留原有布局，也能减少浏览器为图片选择资源时的猜测空间。