WebP 是由 Google 开发的一种新型图片格式，结合了基于无损压缩和有损压缩的优点，在保证质量的前提下可以将文件大小降低至原 JPEG 或 PNG 的 60% 左右。因此，越来越多的网站开始使用 WebP 来提高图片加载速度和网页性能。
然而，并不是所有的浏览器都支持 WebP 格式，特别是在一些老旧的移动设备或桌面浏览器上，可能会出现无法正常显示图片的问题。在这种情况下，我们需要通过 JavaScript 检测浏览器对 WebP 的支持情况，以便在必要时提供替代方案。
检测 WebP 支持的方法
检测浏览器是否支持 WebP 可以通过以下两种方法实现：
方法一：使用 Image 元素
-------- -------------------------- -
--- --- - --- --------
---------- - ---------- -
------------------ - - -- ---------- - ---
--
----------- - ---------- -
----------------
--
------- - --------------------------------------------------------------------------
-该方法的原理是创建一个包含 WebP 图片信息的 Base64 编码字符串，在 Image 元素加载该图片时，如果浏览器支持 WebP，则会显示正常的图片。否则，如果浏览器不支持 WebP，则会触发 img.onerror 事件，从而回调传入的函数并返回 false。
方法二：使用 canvas 元素
-------- -------------------------- -
--- ------ - ---------------------------------
-- -------------------- -
----------------
-------
-
--- --- - ------------------------
--- --- - --- --------
---------- - ---------- -
------------------ -- ---
--- ------- - -------------------------------
------------------------------------------- -- ---
--
----------- - ---------- -
----------------
--
------- - --------------------------------------------------------------------------
-该方法的原理是创建一个 canvas 元素，并在其中绘制一张包含 WebP 图片信息的图片。如果浏览器支持 WebP，则可以通过 canvas.toDataURL 方法将该图片转换为一个 Data URI，然后判断该 URI 是否以 'data:image/webp' 开头。否则，如果浏览器不支持 WebP，则会触发 img.onerror 事件，从而回调传入的函数并返回 false。
检测结果的应用
在检测到浏览器不支持 WebP 格式时，我们可以采取以下几种方案：
- 如果是图片文件，可以提供一个 JPEG 或 PNG 的备用方案；
- 如果是 CSS 文件中的背景图片，则可以考虑使用
background-image: url(image.png)的方式来替代； - 如果是 WebP 格式的视频封面，则可以使用 JPEG 或 PNG 的封面来替代。
总结
检测浏览器是否支持 WebP 格式是提高网页性能和用户体验的重要一环。通过 JavaScript 脚本检测支持情况，可以在必要时提供替代方案，从而确保网页的稳定性和兼容性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25599