直接用WebP替代JPEG或PNG可减小图片体积、提升加载速度，需结合HTML结构、浏览器兼容与使用场景：优先转WebP并保持视觉质量，用<picture>实现fallback，搭配srcset、lazy loading和宽高属性优化，WebP还支持透明和动画。
直接用WebP替代JPEG或PNG，能有效减小图片体积，提升页面加载速度。核心不是换格式就完事，而是配合HTML结构、浏览器兼容和实际使用场景一起做。
优先转成WebP并保留质量感知
WebP在有损压缩下比JPEG小25%–35%，无损压缩比PNG小26%以上。转换时不必追求“最小体积”，重点是人眼几乎看不出画质下降。可用Squoosh、ImageMagick或构建工具（如webpack的imagemin插件）批量处理，设置质量参数在75–85之间通常平衡效果与体积。
用<picture>实现安全回退
不能只写<img src="xxx.webp">，老版本浏览器会显示空白。必须用<picture>包裹，并提供JPEG或PNG作为fallback：
<picture>
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="首页主图">
</picture>
现代浏览器自动选WebP，Safari 14+、Chrome、Firefox、Edge都支持；IE等不支持的会降级加载JPEG。
立即学习“前端免费学习笔记（深入）”；
搭配响应式与懒加载进一步提效
单靠格式不够，还要减少无效传输：
- 给<img>或<source>加srcset，按屏幕密度和宽度提供不同尺寸的WebP，避免手机加载桌面大图
- 加上loading="lazy"，让非首屏图片延迟加载，降低初始渲染压力
- 务必设置width和height属性，防止图片加载时页面布局跳动（CLS优化关键）
注意透明与动画场景的替代优势
需要Alpha通道？不用再额外配PNG+CSS遮罩——WebP原生支持8位透明度，体积更小。要用GIF动图？换成Animated WebP，体积常减少60%–80%，且支持更多帧数和色彩。一个格式覆盖多需求，资源管理也更清爽。
