能，现代浏览器如Chrome、Edge、Firefox 93+、Safari 16.4+原生支持，但旧版Safari需手动兜底兼容。
WebP 图片可以直接用
WebP 能不能直接用 
能。现代浏览器（Chrome、Edge、Firefox 93+、Safari 16.4+）原生支持 .webp。但旧版 Safari（Failed to load resource: The file couldn’t be opened。
所以不是“能不能”，而是“敢不敢只写一个 .webp”。
- 线上项目中单独写
- 开发时本地 Chrome 看着正常 ≠ 上线后用户都能看到
- 微信内置浏览器（X5 内核）对 WebP 支持较好，但低版本仍可能 fallback 失败
用 type 和支持度自动选择。这是 HTML5 原生支持的响应式图片机制，不是 Polyfill。
立即学习“前端免费学习笔记（深入）”；
关键点：
-
type必须写标准 MIME 类型：image/webp，不能写webp或.webp -
-
src应为兼容性最好的格式（如.jpg或.png），srcset和sizes可继续用
@@##@@
服务端是否需要特殊配置？
不需要改代码，但 HTTP 响应头必须正确返回 Content-Type: image/webp，否则 Chrome 等浏览器会拒绝解析（即使后缀是 .webp）。
常见问题：
- Apache：需启用
mod_mime并在.htaccess加AddType image/webp .webp - Nginx：在
http或server块中加types { image/webp webp; } - Vercel / Netlify：默认已支持，无需操作
- 本地
file://协议打开 HTML：WebP 一定失败（无 MIME 头），必须起本地服务器测试
构建工具要不要插件？
如果用 Webpack/Vite，url-loader 或 asset-modules 默认不识别 .webp，会报 Module not found: Error: Can't resolve './xxx.webp'。
解决方式：
- Vite：无需额外配置，
assets目录下.webp自动被当作静态资源处理 - Webpack 5+：在
module.rules中添加{ test: /\.(webp)$/, type: 'asset' } - 注意：不要用
file-loader（已废弃），也不要手动写require('./x.webp')—— 直接写路径字符串给src更安全
真正容易被忽略的是：WebP 文件本身是否真的被压缩过。用 cwebp -q 75 a.png -o a.webp 生成的才省流量；直接重命名 .png → .webp 不仅没压缩，还会导致无法加载。
