用 srcset + sizes 配合 WebP/AVIF 和 loading="lazy" 可免 JS 降低移动端流量：srcset 提供多尺寸图，sizes 告知布局宽度，viewport 元标签确保 vw 有效，<picture> 实现格式降级，object-fit 控制裁剪焦点。
直接用 srcset + sizes 配合现代图片格式和懒加载，就能在不写 JS 的前提下显著降低移动端流量——关键不是“多加几个属性”，而是让浏览器真正按需选图、按需加载。
用 srcset + sizes 精准匹配设备视口
只写 max-width: 100% 不省流量，它只缩显示尺寸，大图照常下载。真正起作用的是 srcset 告诉浏览器“我有哪些尺寸的图”，sizes 告诉它“这张图在当前布局里实际占多宽”。
-
srcset里统一用w单位，比如"photo-400w.jpg 400w, photo-800w.jpg 800w, photo-1200w.jpg 1200w" -
sizes写成媒体查询字符串，例如"(max-width: 768px) 100vw, 50vw"，对应移动端全宽、桌面端半宽 - 确保
<head>有<meta name="viewport" content="width=device-width, initial-scale=1">，否则vw单位失效
优先选用 WebP/AVIF 格式并提供降级
WebP 比 JPEG 平均小 30%，AVIF 还能再压 20%。但旧浏览器不支持，必须用 <picture> 提供 fallback。
- 写法示例：
<picture><source srcset="img.avif" type="image/avif"><source srcset="img.webp" type="image/webp"><img src="img.jpg" alt="描述"></picture> -
<source>的type必须拼写准确（如image/webp，不能多空格或分号） - 顺序很重要：浏览器从上到下匹配，第一个满足
media和type的生效，兜底<img>必须存在且可访问
配合 loading="lazy" 控制加载时机
懒加载本身不省带宽，但它把“选图逻辑”和“加载时机”绑定在一起——前提是配置完整。
立即学习“前端免费学习笔记（深入）”；
- 首屏图片必须设
loading="eager"或不写该属性，避免白屏 - 所有
<img>必须有明确尺寸：要么写width和height属性，要么 CSS 中定义width和height（如height: 300px） -
loading="lazy"必须与srcset+sizes共存，否则浏览器可能退化为加载src指向的大图
控制裁剪焦点，避免重传
同一张图在不同设备上展示区域不同，靠 object-fit: cover + object-position 调整焦点，比单独切多张图更轻量。
- 给
<img>加style="object-fit: cover; object-position: 50% 20%;"，把视觉中心上移至人脸区域 - 用媒体查询动态调整：
@media (max-width: 768px) { img { object-position: 50% 15%; } } - 容器必须有明确宽高（比如
width: 100%; height: 300px;），否则object-fit不生效
