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