sizes属性不控制图片显示大小，只告知浏览器图片在页面中的预期渲染宽度；若与css实际宽度不一致（如width:100%;max-width:300px却写sizes="100vw"），会导致选图错误、模糊或加载过大图片。
sizes 属性不是控制图片显示大小的 CSS
很多人写 sizes="(max-width: 768px) 100vw, 50vw" 后发现图片还是模糊或加载了大图，第一反应是“sizes 没起作用”。其实它根本不管 CSS 的 width 或 max-width，只告诉浏览器：“这张图在页面布局中**最终会占多宽**”。如果 CSS 实际渲染宽度和 sizes 值偏差大（比如用 width: 100%; max-width: 300px; 却写 sizes="100vw"），浏览器就会选错源。
常见错误现象：
- 小屏下仍加载 1200w 图片 →
sizes没写断点，或断点值远大于实际渲染宽度 - 桌面端图片模糊 →
sizes写太小（如全写300px），导致浏览器误判目标尺寸，选了低分辨率源 - Safari iOS 11–12.0 完全不响应
sizes→ 这些旧版本忽略该属性，只按设备像素比粗略匹配x描述符
如何根据真实布局反推 sizes 值
关键不是猜，而是测量。打开 DevTools → 切换设备模拟器 → 看 Elements 面板里图片元素的 clientWidth（不是 computed style 的 width）。这个值就是你要塞进 sizes 的长度。
实操建议：
- 如果图片在栅格系统中占 1/3 宽度，且最小断点是 768px，则
sizes="(max-width: 768px) 100vw, 33.33vw" - 如果图片有
max-width: 400px; width: 100%，则sizes="(max-width: 400px) 100vw, 400px"—— 注意单位必须是vw或px，不能用% - 避免空格陷阱：旧版 Edge 对
(max-width: 768px)中的空格敏感，统一写成(max-width:768px)
srcset + sizes 组合必须严格匹配描述符类型
srcset 里用了 w 描述符（如 "small.jpg 480w"），sizes 就必须存在且合法；漏写或语法错误，浏览器直接退化为只加载 src，所有优化失效。
容易踩的坑：
- 混用
1x和768w→ 浏览器忽略整个srcset，降级为src -
sizes值写成"100%"或"300"（缺单位）→ 解析失败，等效于没写 - 未提供 fallback
src→ Safari 10 及更早、部分旧 Android WebView 会完全不显示图片
代码预览场景下的特殊处理
代码预览（如 Markdown 渲染器中的内联图片、文档页的示例截图）往往嵌套在可变宽容器中，且常带边框/阴影/缩放动画。这时单纯靠媒体查询写 sizes 不够稳定。
推荐做法：
- 对预览容器加
contain: layout size，减少重排干扰，让clientWidth更可靠 - 用
<picture></picture>+<source media></source>替代单个<img>，当需要强控不同断点下的源（例如移动端强制用 WebP+压缩版） - 若需适配网络环境（如 4G 下降质），
sizes本身不支持，得结合 JavaScript 检测navigator.connection.effectiveType，动态设置src或切换<source></source>
最易被忽略的一点：即使你写了完美的 sizes，只要服务器返回的图片没有正确设置 Content-Length 或启用了 Brotli 压缩，CDN 缓存策略不合理，流量优化效果也会打折扣。优化永远是链路问题，不是单点配置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
