WebP在uni-app中不能直接无差别使用，需按平台动态切换格式：iOS用JPG/PNG，Android用WebP，并确保双格式资源同时存在、路径一致、真机测试验证。
WebP在uni-app中能直接用吗
不能直接无差别使用。WebP在Android和部分小程序平台（如微信、支付宝）支持良好，但在iOS原生App和某些旧版微信小程序中完全不识别——image.webp 会显示为黑块或空白，控制台无报错，排查成本高。
如何安全地按平台切换图片格式
必须在运行时检测平台，动态拼接资源路径或URL参数。硬编码 .webp 后缀或在 background-image 中直接写死 WebP 路径，等于主动放弃 iOS 用户。
- 用
uni.getSystemInfoSync().platform判断，只取'ios'和'android'两种值，不要依赖system或model - 本地图片：iOS 用
/static/xxx.jpg，Android 用/static/xxx.webp；两者必须同时存在，不能只放 WebP - 远程图片（如OSS）：iOS 请求原图 URL，Android 在 URL 后加
?x-oss-process=image/format,webp类参数（注意不同CDN参数名不同，如七牛是?imageMogr2/format/webp） - 避免在
mounted里赋值后不触发更新，建议用计算属性或watch监听平台变化（虽然实际极少变）
background-image里用WebP的特别注意事项
background-image 比 onError，失败时静默降级为透明背景。iOS 上尤其容易踩坑。
- 路径必须是
/static/开头的绝对路径，~@/static/在 App 端无效，H5 可能侥幸成功但不可靠 - 确保 WebP 图片已放进
static目录且文件名完全匹配（大小写敏感），编译后不会被重命名或压缩丢弃 - 不要依赖 CSS 预处理器变量拼接后缀，uni-app 的样式编译不处理 JS 变量，只能靠内联 style 或 class 切换
- 测试时务必真机调试，模拟器和 HBuilderX 内置浏览器可能掩盖问题
构建时自动转换+运行时兜底才是稳妥方案
手动维护两套图片成本高，容易漏替换或路径不一致。真正可持续的做法是：构建阶段把 .jpg/.png 批量转成 .webp 并保留原图，运行时用平台判断加载对应后缀。
- 推荐用
vite-plugin-imagemin或uni-app插件市场里的「图片压缩」插件，在vue.config.js或vite.config.ts中配置 WebP 输出 - 转换脚本需保证输出文件名与原图一致（仅后缀变），否则需额外维护映射表
- 即使做了自动转换，仍要保留运行时平台判断逻辑——因为小程序平台对 WebP 支持程度不一（如飞书小程序截至2026年仍不支持 WebP 解码）
- CDN 加速时，别忘了给 WebP 资源配
Vary: Accept响应头，否则代理缓存可能把 WebP 返回给不支持的客户端
WebP 的收益明显，但跨端兼容性不是“加个判断就完事”的简单开关。最易被忽略的是：**所有 WebP 资源必须有对应格式的降级副本，且路径、尺寸、语义必须严格一致**——少一个环节，就可能在某个平台白屏。
