是移动端微应用带宽优化核心，通过设备能力、网络条件与视口尺寸自动选择最轻量适配资源：用sizes声明容器宽度、srcset提供多档分辨率源实现dpr与宽度精准匹配，结合type优先交付avif/webp等现代格式，并配合lazy加载与条件渲染规避冗余请求。
在移动端微应用中，<picture></picture> 标签是优化图片带宽的核心手段之一——它不是单纯“换格式”，而是让浏览器按设备能力、网络条件和视口尺寸，**自动选择最轻量、最适配的资源**。
精准匹配设备像素比与视口宽度
移动端屏幕碎片化严重，同一张图在 iPhone 15 Pro（3x）和低端安卓（1.5x）上所需像素数差两倍以上。硬塞一张 2000px 宽图，会浪费大量带宽。
- 用
sizes告诉浏览器：“这个图片容器在不同断点下占多宽”（如sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 300px"） - 配合
srcset提供多档分辨率源（如"photo-400w.jpg 1x, photo-800w.jpg 2x, photo-1200w.jpg 3x"） - 浏览器根据设备 DPR 和实际容器宽度，选最接近且不超载的那档，避免缩放失真或加载冗余
优先交付现代压缩格式
WebP 在 iOS 14+、Android Chrome 全系支持；AVIF 在 Android 12+、iOS 17+ 已原生支持。它们比 JPEG 平均小 40%–60%，对 3G/4G 弱网用户尤为关键。
- 把 AVIF 放在
<source></source>第一行（最新格式优先），WebP 次之，JPEG 作为兜底 - 示例：
<picture><br> <source srcset="banner.avif" type="image/avif"><br> <source srcset="banner.webp" type="image/webp"><br> @@##@@<br></source></source></picture>
- 注意：服务端需正确配置 MIME 类型（
image/avif/image/webp），否则浏览器会跳过
结合懒加载与条件渲染
微应用常含瀑布流、Tab 切换等场景，首屏外图片不该抢占带宽。
-
<img src="banner.jpg" alt="活动横幅">内置loading="lazy"属性，但<picture></picture>中需加在<img>上（<source></source>不支持） - 对 Tab 页或折叠区域内的
<picture></picture>，可初始不渲染，待用户触发再动态插入 DOM，彻底规避预加载 - 若微应用运行在微信 WebView 等环境，需验证其是否支持
loading="lazy"（部分旧版本不支持，需 fallback JS 懒加载）
规避常见陷阱
很多优化失效，是因为忽略了微应用的特殊约束：
- 不要在
srcset中混用不同宽高比的图——会导致 layout shift，尤其在小程序 WebView 中更明显 - 避免用 base64 内联大图（如 > 4KB），它阻塞 HTML 解析，且无法被缓存复用
- CDN 开启 Brotli 压缩 + 图片自动转码（如 Cloudflare Image Resizing、阿里云 IMG）时，
<picture></picture>的srcset仍要写原始路径，由 CDN 动态生成对应尺寸/格式
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
