移动端图片资源管理核心是“何时、用多大、加载哪张”：必须用srcset+sizes让浏览器依dpr、视口和网络选图，配显式尺寸、共存srcset/sizes、首屏设loading="eager"，三者缺一不可。
移动端图片资源管理的核心不是“存多少”，而是“什么时候、用多大、加载哪张”。盲目压缩或统一缩放反而会牺牲关键区域清晰度或触发重排。
用 srcset + sizes 让浏览器自己选图
只写 src 是把选择权交给服务器，srcset + sizes 才是把决策权交还给浏览器——它知道当前设备像素比、视口宽度、网络状况。
-
srcset列出物理宽度标注的备选图（如"photo-480w.jpg 480w, photo-768w.jpg 768w, photo-1200w.jpg 1200w"），单位w指图片源文件的固有宽度，不是显示宽度 -
sizes描述“这张图在不同断点下会占多宽”，例如"(max-width: 480px) 100vw, (max-width: 768px) 50vw, 33vw"，浏览器据此匹配srcset中最接近的源 - fallback 的
src必须存在，且应是中等尺寸（如 768w），避免老浏览器或 JS 失效时拉取桌面大图 - 不写
sizes时浏览器默认按100vw计算，容易在小屏加载大图——这是移动端流量浪费最常见原因
用 object-position 替代多切图做焦点控制
同一张图在手机竖屏下只露出下巴？别急着切三版头像图。用 object-fit: cover + object-position 动态调焦更轻量。
- 父容器必须设明确
width和height（或aspect-ratio），否则object-fit不生效 - 默认
object-position: center center在桌面合适，在手机上常需上移：用百分比而非top/bottom，例如object-position: 50% 20%表示横轴居中、纵轴从顶部起 20% 处为焦点 - 配合媒体查询微调：
@media (max-width: 480px) { img { object-position: 50% 15%; } }，比维护三套图片路径简单得多 - 注意：Safari 对
object-position百分比支持稳定，但旧 Android WebView 可能解析异常，建议加!important或 fallback 到 JS 监听
懒加载必须配齐三要素，否则等于没开
loading="lazy" 在移动端不是开关，而是一组依赖条件。漏掉任意一个，就可能白屏、CLS 抖动或加载错尺寸。
- 必须有显式尺寸：要么 HTML 写
width和height属性，要么 CSS 设width+height或aspect-ratio，否则 Safari 直接跳过懒加载逻辑 -
srcset和sizes必须共存——只写srcset时，懒加载触发瞬间浏览器已按 fallbacksrc发起请求，大概率是未适配的桌面图 - 首屏图片必须设
loading="eager"或干脆不写；SSR 渲染中若被框架自动注入loading="lazy"，可能被当成非关键资源跳过预加载 -
background-image完全不响应loading="lazy"，真要懒加载背景图，只能改用<img>+position: absolute模拟，或手写IntersectionObserver
真正难的不是写对属性，而是让每个图片节点都满足尺寸约束、媒体条件、加载时机三者同步。多数线上问题出在“某张图忘了设 height”或“sizes 里写了 100vw 却没配对应小图”，这种细节一旦漏掉，优化就归零。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
