17370845950

响应式图片需组合、和sizes三者才能按需加载；srcset中x适配设备像素比，w需配合sizes用于流体布局；缺失sizes或media不匹配将导致加载失败。

用 + srcset + sizes 控制响应式图片加载

浏览器不会自动“猜”你想要哪张图，必须明确告诉它：在什么视口宽度下加载哪张资源、对应什么分辨率。核心不是只写 srcset，而是组合 、media、sizes 三者才能真正按需加载。

• 的 media 属性决定“何时用这张图”，比如 media="(max-width: 768px)"
• srcset 列出同一张逻辑图的多个物理尺寸（如 "small.jpg 1x, small@2x.jpg 2x"）或宽度描述（如 "medium.jpg 768w, large.jpg 1200w"）
• sizes 告诉浏览器“这张图在当前布局中大概占多宽”，比如 sizes="(max-width: 768px) 100vw, 50vw"，否则浏览器无法从 w 单位中算出该选哪个 srcset 项
• 最后的 是降级兜底，必须保留 src 和 alt，否则无 JS 时图片不显示，且影响可访问性

srcset 里用 x 还是 w？看场景

两者不能混用在同一组 srcset 中，选错会导致浏览器忽略整个属性。

• 用 x：适合固定宽高的容器，比如头像、图标，只适配设备像素比（1x / 2x / 3x）。浏览器根据 window.devicePixelRatio 自动选
• 用 w：适合流体布局中的大图（如 banner、文章配图），需配合 sizes 使用。浏览器根据视口宽度 + sizes 计算出目标渲染宽度，再匹配最接近的 w 值
• 错误示例：srcset="a.jpg 400w, b.jpg 2x" —— 浏览器直接跳过这个 srcset

常见加载失败原因：浏览器根本没发请求

你以为写了 srcset 就会加载多张图？其实浏览器只下载它最终选定的那一张。但如果你发现连“应该加载的那张”都没发请求，多半是以下问题：

• 忘记写 sizes，而用了 w 单位的 srcset → 浏览器无法计算目标尺寸，默认 fallback 到 100vw，可能误选过大/过小图
• 的 media 条件没命中，比如写了 (min-width: 769px) 却在 768px 宽度下测试 → 所有 被跳过，只加载
• 图片路径 404 或跨域未配 CORS → 控

  

  制台报 Failed to load resource，但控制台 Network 面板里看不到请求发出（因为解析阶段就失败了）
• 使用了 object-fit: cover 但容器高度为 0 或未设高 → 图片渲染区域为 0，部分浏览器会延迟加载甚至跳过

一个可靠的工作示例

适配移动（375w）、平板（768w）、桌面（1200w），同时兼顾高清屏：

  
  
  
  @@##@@

注意：每个 都带 sizes，且 media 区间无空隙； 的 width/height 是为了防止布局偏移（layout shift），不是强制尺寸。

真正容易被忽略的是 sizes 的动态性——它不是 CSS，不能写 calc(100% - 20px)，只能是媒体查询 + 固定值或 vw 单位。如果布局复杂（比如侧边栏收起时图片变宽），就得靠 JS 动态改 sizes 属性，而不是指望 CSS 控制。