npm 包 webp-image-support 使用教程

前言

WebP 是一种由 Google 开发的图片格式，它可以提供更好的图像压缩率和更好的图像质量。与 JPEG 和 PNG 格式相比，WebP 格式可以减少 25%-34% 的文件大小。这意味着网站可以更快地加载，用户可以更快地浏览页面，而且还可以减少服务器的带宽消耗。

因此，使用 WebP 格式对于前端开发人员来说是非常有意义的。而 npm 包 webp-image-support 则是一种方便的解决方案，可以帮助我们在 WebP 缺失的环境中使用后备图像。

本文将介绍 webp-image-support 的使用方法和实例，让你更快地使用 WebP。

安装

首先，你需要在项目中安装 webp-image-support。在终端中输入以下命令：

npm install webp-image-support --save

这会将 webp-image-support 包下载到你的项目中。接下来，你需要在项目中导入 webp-image-support。你可以使用 es6 的 import 语法：

import WebpImageSupport from 'webp-image-support';

或者你可以使用 require：

const WebpImageSupport = require('webp-image-support');

创建实例

const webp = new WebpImageSupport();

使用实例

在使用 WebpImageSupport 类时，你需要将未压缩的 WebP 文件路径传递给其方法。下面是 webp-image-support 包提供的两个方法：

checkSupport()

• 返回值：布尔类型

该方法用于检查当前环境是否支持 WebP 格式。调用该方法时，如果当前环境支持 WebP，则返回 true；否则，返回 false：

const isSupportWebP = webp.checkSupport(); // true or false

findSource()

• 参数：WebP 文件路径
• 返回值：string

该方法用于查找适用的图像源 URL。如果当前环境支持 WebP，则返回传递给该方法的 WebP 文件路径（因为它是高质量的压缩形式）。否则，返回传递给该方法的路径，只不过将“.\webp\”目录中的“.webp”替换成“.png”（因为如果不支持 WebP，那么后备图像将是 PNG 格式的）：

const sourceUrl = webp.findSource('path/to/image.webp'); // return path/to/image.webp or path/to/image.png

示例代码

假设你有以下目录结构：

• assets
  • images
    • logo.webp
    • logo.png
  • js
    • main.js
  • css
    • main.css
  • index.html

index.html：

-- -------------------- ---- -------
--------- -----
------
  ------
    ----- ----------------
    ----------- ----- ------- ---------------
    ----- ---------------- --------------------
  -------
  ------
    --------
      ---- ------ --------- ----- ------- ---------
    ---------

    ------- --------------------------
  -------
-------

main.css：

header img {
  max-width: 100%;
}

main.js：

import WebpImageSupport from 'webp-image-support';

const webp = new WebpImageSupport();

const logo = document.querySelector('header img');
const logoUrl = webp.findSource('assets/images/logo.webp');

logo.src = logoUrl;

在使用上述代码后，如果当前环境支持 WebP，那么源 URL 将会是“assets/images/logo.webp”，如果不支持 WebP，则将会是“assets/images/logo.png”。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a830d09270238226d1