webp格式能显著减小图片体积，比jpeg小25%–35%、比png小约26%，但需配合浏览器兼容处理与html正确写法（如回退机制），不可仅改后缀；推荐用squoosh、imagemagick或imagemin-webp批量转换，并注意质量设置、alpha支持及mime配置。
直接用 WebP 格式能显著减小图片体积，通常比 JPEG 小 25%–35%，比 PNG 小约 26%，同时保持视觉质量不明显下降。但不能只改后缀或硬塞一个 `.webp` 文件——得配合格式支持、浏览器兼容和 HTML 正确写法，否则老浏览器会加载失败甚至空白。
优先转成 WebP 并保留原始格式备份
别在原图上直接覆盖。用工具批量转换：Squoosh（网页端，可调质量/尺寸）、ImageMagick（命令行）、或构建时集成 imagemin-webp 插件。转换时注意：
- 有损模式下质量设为 75–85，是清晰度与体积的合理平衡点
- 透明图必须选“支持 Alpha”选项，否则白底覆盖会破坏设计
- 转换后检查文件头是否正确（可用
file image.webp命令验证）
用 提供安全回退
单写 <img src="a.webp"> 在 Safari 14 以下、IE 或部分安卓 WebView 中会 404 或不显示。必须用 <picture></picture> 包裹，并按 MIME 类型声明 source：
<picture><source srcset="photo.webp" type="image/webp"> @@##@@ </source></picture>
关键点：
-
type属性必须准确写成image/webp，浏览器靠它判断是否支持 -
<img src="photo.jpg" alt="风景描述">是必需的 fallback，不可省略，且src必须指向真实存在的 JPEG/PNG - 服务器需配置正确 MIME 类型，Nginx 加
types { image/webp webp; }，Apache 加AddType image/webp .webp
搭配响应式与懒加载进一步提效
WebP 是基础，但单独用不够。建议组合使用：
- 在
<source></source>中加入srcset和sizes，比如srcset="small.webp 480w, medium.webp 768w"，让浏览器按视口宽度选最适图 - 给
<img>加loading="lazy"，延迟非首屏图片加载 - 始终设置
width和height属性，防止布局偏移（CLS）
验证是否真正生效
别只看文件大小。打开 Chrome DevTools → Network 标签 → 刷新页面 → 筛选 Image 类型，确认：
- 请求的资源 URL 是
.webp后缀 - MIME Type 显示为
image/webp - 在模拟旧设备（如 iPhone SE + iOS 13）时，回退到
.jpg能正常显示
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
