webp 格式的图片显示异常

webp介绍

WebP,谷歌(google)开发的一种旨在加快图片加载速度的图片格式。提供了有损压缩与无损压缩(可逆压缩)的图片文件格式,能节省大量的服务器带宽资源和数据空间。

webp转换

  1. 右键点击图片,点击【在新标签页中打开图片】。
  2. 若是看到地址栏的后缀是webp,把webp改为jpg/png,回车。然后再点击图片,选择【另存为】,图片存储为jpg/png。
  3. 若看到地址栏的后缀不是webp,点击图片,选择【另存为】,图片存储为wenp格式的。然后再次打开存在本地webp格式图片,看到地址栏的后缀是webp,按照步骤二继续操作。
    在这里插入图片描述
    踩坑:直接修改图片的后缀名不可取,没有改变原图片的属性,其实还是webp的格式。也可以通过转换工具或者命令行进行转换。

webp兼容性

目前网页浏览器当中,Google ChromeOpera原生支持静态与动态的WebP格式。Firefox浏览器亦在65.0版本支持WebP图像。
苹果在macOS Sierra及iOS 10的早期beta版本中加入了WebP支持。而在2016年9月7日发布的iOS 10 和 macOS Sierra GM种子版本中却移除了WebP的支持。

总结,webp 在 ios5/6 的 chrome、safari 浏览器不支持,在 Android 常用的浏览器都支持。

兼容解决方案

前端js的方案还未实践,想实践的可参考原文[3]
简单方案,把webp格式转为png,在项目中使用,保正图片在各设备正常显示。

原文:

[1] https://developers.google.com/speed/webp
[2] https://zh.wikipedia.org/wiki/WebP
[3] https://segmentfault.com/a/1190000004948757

猜你喜欢

转载自blog.csdn.net/weixin_47049504/article/details/116465034