png、jpg、gif、webp 这些图片格式的区别和使用场景
- gif：无损的，产生的文件极小，支持背景透明、动画、图形渐进、无损压缩（适合线条、图标等），缺点只有 256 种颜色。
- jpg：有损压缩，支持上百万种颜色，适合存储照片，不支持图形渐进与背景透明，不支持动画。
- png：无损，位图文件，支持透明、半透明、不透明。不支持动画，无损图像格式。
- webp：同时支持无损和有损压缩。兼容性稍差（已被主流浏览器广泛支持）。在相同质量的文件下，它拥有更小的文件体积。
如何判断浏览器支持 webp 格式图片
（1）宽高判断法
通过创建 Image 对象，将其 src 属性设置为 webp 格式的图片，然后在 onload 事件中获取图片的宽高，如果能够获取，则说明浏览器支持 webp 格式图片。如果不能获取或者触发了 onerror 函数，那么就说明浏览器不支持 webp 格式的图片。
（2）canvas 判断方法
动态创建一个 canvas 对象，通过 canvas 的 toDataURL 将画布内容导出为 webp 格式，然后判断返回值中是否含有 image/webp 字段，如果包含则说明支持 WebP，反之则不支持。
// 判断浏览器是否支持 webp
function isSupportWebp() {
try {
return document.createElement('canvas').toDataURL('image/webp', 0.5).indexOf('data:image/webp') === 0;
} catch (err) {
return false;
}
}
补充：现代项目一般使用
<picture>配合type="image/webp"由浏览器自动选择：<picture> <source srcset="img.webp" type="image/webp"> <img src="img.png" alt=""> </picture>也可以使用 AVIF 等更新一代的格式，进一步压缩体积。
