浏览器根据media顺序、srcset和sizes自动选择最适大图；media须互斥且从宽到窄，括号与单位不可省；sizes必须写在上配合w描述符；webp需正确content-type，的src是强制兜底；首图禁用lazy，应设eager并加骨架屏。
media断点必须互斥且从宽到窄写
浏览器按
- ✅ 正确写法：
media="(min-width: 1200px)"→media="(min-width: 768px) and (max-width: 1199px)"→media="(max-width: 767px)" - ❌ 错误写法：
media="(max-width: 768px)"放最前（768px宽度会命中它，大图规则失效） - ⚠️ 括号不能少：
media="min-width: 768px"会被静默忽略，必须是media="(min-width: 768px)" - ⚠️ 单位不能省：
768无效，768px才合法
srcset + sizes 才能真正控制“加载哪张大图”
只靠media只能切固定断点，但无法告诉浏览器“这张图在页面中实际占多宽”。没有sizes，浏览器默认按100vw算，可能导致小屏也加载2560px大图，白白浪费带宽。
-
sizes必须写在<img>上，里写的会被忽略 - 例如：
sizes="(min-width: 1200px) 2560px, (min-width: 768px) 1200px, 100vw"，明确告诉浏览器不同视口下图片渲染宽度 -
srcset里用w描述符（如hero-2560w.jpg 2560w）配合sizes，才能让浏览器按实际需要选尺寸；混用w和x（如hero.jpg 2x, hero-2560w.jpg 2560w）会导致整个值被忽略
type属性能实现WebP优先、JPEG降级
产品大图体积大，WebP通常比JPEG小30%以上。把WebP放在前面，支持的浏览器直接加载，不支持的跳过，落到后面的JPEG。
- 写法示例：
<source type="image/webp" srcset="hero-2560.webp 2560w" sizes="2560px"></source>→<source type="image/jpeg" srcset="hero-2560.jpg 2560w" sizes="2560px"></source> - ⚠️ 服务器必须返回正确的
Content-Type: image/webp，否则Chrome会标记blocked:mime-type，WebP资源被阻断 - 别漏掉
<img>的src：它是所有条件都不满足时的强制兜底，缺了就白屏
懒加载与首图性能要分开处理
首页首图不能加loading="lazy"，否则可能错过LCP（最大内容绘制）指标。但大图体积大，仍需其他优化手段。
- 首图建议设
loading="eager"，并配骨架占位（纯色+模糊SVG轮廓），避免布局抖动 - 非首屏大图可加
loading="lazy"，但注意Safari对内懒加载的支持较晚（iOS 16.4+才稳定） -
<img>上加decoding="async"能减少解码阻塞，尤其对2560px级大图有效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
