在H5中用WebP替代JPEG/PNG可减少25%~35%体积，须用<picture>显式声明<source type="image/webp">并配srcset/sizes，以<img>为兜底，避免旧版Safari等加载失败。
在 H5 中用 WebP 替代 JPEG/PNG 是提升移动端加载速度最直接有效的手段之一——同等画质下体积可减少 25%~35%，对弱网和低端 Android 设备效果尤为明显。
用 提供 WebP + 回退方案
不能只靠 src 或 srcset 直接写 WebP 路径，因为 iOS 旧版 Safari、部分安卓 WebView 不支持。必须用 <picture> 显式声明格式优先级：
- 把
<source type="image/webp">放在最前面，浏览器会优先尝试加载 WebP - 后面紧跟
<img src="fallback.jpg">，作为不支持 WebP 时的保底 - 所有
source都要配srcset和sizes，否则 WebP 版本也走不了响应式逻辑
示例代码：
<source type="image/webp" srcset="banner-480.webp 480w, banner-750.webp 750w, banner-1200.webp 1200w" sizes="(max-width: 480px) 100vw, (max-width: 750px) 100vw, 1200px">
<source type="image/jpeg" srcset="banner-480.jpg 480w, banner-750.jpg 750w, banner-1200.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 750px) 100vw, 1200px">
<img src="banner-750.jpg" alt="活动主图">
</picture>
WebP 文件生成与质量控制
不是所有 WebP 都高效。移动端需兼顾压缩率与解码性能：
- 有损压缩建议用 75%~85% 质量档（
cwebp -q 75），实测 999KB 原图可压至 38KB 左右，边缘细节仍清晰 - 避免无损 WebP（
-z参数），它体积反而比 JPEG 大，且低端机解码更慢 - 透明图才用带 alpha 的 WebP；纯不透明图关闭 alpha 通道，能再省 10%~15% 体积
- 构建阶段集成工具：Webpack 用
image-minimizer-webpack-plugin+imagemin-webp自动转，CI 流程中统一处理
配合响应式逻辑，别让 WebP 白费
很多项目加了 WebP 却没提速，问题出在 srcset 和 sizes 没对齐真实渲染宽度：
-
srcset只保留你 CSS 真有用到的断点宽度，比如只在@media (max-width: 750px)下切布局，就只放480w和750w两项，删掉冗余的1920w -
sizes必须反映容器真实宽度，例如轮播图占满屏写sizes="100vw"，卡片内图片占 50% 写sizes="(max-width: 750px) 100vw, 50vw" - 首屏关键图（如 LCP 元素）加
<link rel="preload" as="image" href="banner-750.webp">，避免 DOM 解析完才发起请求
兼容性兜底与调试要点
上线前必须验证是否真生效：
- Chrome DevTools → Network 标签，过滤
webp，确认请求的是 WebP 而非 fallback 图 - 在 iOS 14.5 以下或 Android 6.0 WebView 中打开，检查是否正常回退到 JPEG
- 禁用缓存多刷几次，看是否有 pending 请求——那是
srcset宽度没匹配上导致的资源选择失败 - 注意：CSS Sprites 不支持 WebP，如果用了图标雪碧图，就别强推 WebP，二者不可兼得
