对webp格式图片使用的疑问？

Question

制作手机端网页因为设计稿中存在很多图片，所以psd中的图片切成png24之后，对其进行压缩，将png24切成webp有损确实小了很多。
直接在网页上引用<img src="images/logo.webp">
这样会不会后续出什么问题？

Answer 1

这个如果你引用成功了一般不会出什么问题，至于后续的话，但是我记得在IE9以下好像是不支持webp格式的图片的。

Answer 2

如果是png的话，可以考虑访问
https://tinypng.com/
这个网站对png图片进行压缩，通常可以压缩60%-80%。

Answer 3

建议不要用WebP格式。

现在webp普及方面存在的最大问题是浏览器兼容性问题。因为只有Google系的浏览器能支持WebP格式。

在移动端用这个格式意味着你要放弃所有iOS用户，而且Android 2.3以下版本也无法完全兼容；在桌面端使用这个格式意味着你要放弃IE、edge、Firefox、Safari用户。国内流行的360安全浏览器和搜狗高速浏览器都只有极速模式下才支持WebP。

一个可以考虑的方式是用JS先判断浏览器是否支持WebP格式，然后再加载图片，但这恐怕不适合在css里引用的图片。

以下信息来自Wikipedia，我没有全部验证：

Amongst web browsers, Google Chrome and Opera natively support WebP. All WebM-compatible browsers can also display WebP via a JavaScript shim. WebP can also be displayed in all major browsers using the WebPJS JavaScript library, although support in Internet Explorer 6 and above is achieved using Flash.