srcset必须配合src和sizes才能被正确解析：src为必填兜底图，sizes告知浏览器图片布局宽度以匹配srcset中w描述符（如480w）的固有宽度，缺失sizes则浏览器默认按100vw计算导致总加载大图。
srcset 属性怎么写才被浏览器正确解析
srcset 不是独立使用的，必须配合 img 标签的 src 和（推荐）sizes 属性。浏览器根据设备像素比、视口宽度和 sizes 提供的布局尺寸提示，从 srcset 列表中选择最匹配的图片资源。
- 每个资源用逗号分隔，格式为
图片路径 宽度描述符或图片路径 像素密度描述符，例如："small.jpg 480w, medium.jpg 768w, large.jpg 1200w" -
w描述符表示图片固有宽度（单位 px），必须与实际图片文件的原始宽度一致，否则响应式计算会出错 -
x描述符（如1x、2x）只适用于固定宽高的场景（比如头像、图标），不推荐用于内容图片 -
src是必填降级兜底，所有不支持srcset的旧浏览器（如 IE）都只加载它
为什么加了 srcset 还总是加载大图
常见原因是缺少 sizes 属性，或 sizes 值与 CSS 实际布局不一致。浏览器在没有 sizes 时，默认按 100vw 计算所需图片宽度，导致高 DPR 设备（如 iPhone）直接选最大图。
- 必须提供
sizes，哪怕只是sizes="100vw"，它告诉浏览器“这张图在页面中大概占多宽” - 如果图片在不同断点下宽度变化，用媒体条件写清楚，例如：
sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw" - 确保 CSS 中该
img的宽度行为与sizes描述一致：如果sizes写了50vw，但 CSS 强制设了width: 100%且父容器窄，浏览器仍按50vw估算——结果就是选图偏大
如何验证 srcset 是否生效
别只看 Network 面板里加载了哪张图，要结合设备模拟和真实 DPR 环境判断。
- 在 Chrome DevTools 中开启 Device Toolbar，选具体机型（如 iPhone 12），刷新后看 Network → Img → Header →
Request URL加载的是哪个路径 - 检查响应头中的
Sec-Fetch-Dest: image和User-Agent是否含Mobile，避免服务端误判 - 用
console.log(window.devicePixelRatio)对照：若 DPR=2 且srcset有2x图，但加载的是1x，说明sizes或宽度估算严重偏差 - 注意：本地 file:// 协议下部分浏览器禁用
srcset，务必用本地 server（如npx serve）测试
srcset 和 picture 元素什么关系
srcset 解决“同一张图的不同分辨率版本”，而 picture 解决“完全不同的图片资源”（如 WebP / AVIF 格式回退、艺术指导 Art Direction）。
立即学习“前端免费学习笔记（深入）”；
- 不要为了格式兼容单独用
srcset：WebP 不能靠srcset触发，必须用picture+source[type] -
picture内部的source可以同时用media+srcset，例如：<picture> <source media="(min-width: 768px)" srcset="hero-large.webp 1x, hero-large@2x.webp 2x"> <source srcset="hero-small.webp"> <img src="hero-small.jpg" alt="..."> </picture>
- 混用时，
source的media匹配优先于img的srcset，顺序很重要：浏览器从上到下匹配第一个满足条件的source
很多开发者卡在 sizes 和 CSS 宽度的同步上——它不是“想让图多宽就写多宽”，而是“告诉浏览器你打算让它多宽”，一旦 CSS 动态修改了实际渲染宽度（比如 JS 改了 class），sizes 不会自动更新，这时候就得换用 picture 或 JS 动态切换 src。
