[html] webp与jpg、png比较，它有什么优劣势？如何选择？

优势更优的图像数据压缩算法 带来更小的图片体积肉眼识别无差异的图片质量支持有损和无损压缩支持动画 透明色彩丰富 24-bit颜色数劣势存在兼容性问题选择​ 当 图片较少 体积不大 且存在兼容性问题时,兼容性方法处理起来较为复杂 可以选择传统格式​ 当图片较多 且不存在兼容性问题或者兼容性方法处理起来较为简单时 便使用webp格式
兼容性处理
1.通过picture标签进行选择判断<picture><source srcset="img/pic.webp" type="image/webp"><source srcset="img/pic.jpg" type="image/jpeg"><img src="img/pic.jpg">
</picture>该种方法要求在每个要请求webp图片的标签下都要通过picture标签来进行兼容性处理，
同时注意该标签在IE的兼容性并不是很好，不过已经比webp的兼容性好一些。
2.通过服务端判断请求头中的Accept的值判断是否支持webp通过HTTP request header中是否存在Accept: image/webp来判断，
这种方法的缺点在于：很多时候我们的图片等静态资源都会放到CDN服务器上，在这个层面加上判断webp的逻辑会更麻烦一些
3.由浏览器端判断是否支持WebP格式if(document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0){//  该浏览器支持WebP格式的图片}该种方法的原理为：HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。1.如果画布的高度或宽度是0，那么会返回字符串“data:,”。2.如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，说明该传入的类型是不支持的。3.Chrome支持“image/webp”类型。

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题