介绍
在前端开发中，Web 图像格式是一个非常重要的话题。其中，BPG（Better Portable Graphics）格式是一种新型的图像格式，它基于 HEVC（High Efficiency Video Coding） 标准，可以带来更好的压缩率和更高的图像质量。而 bpg-supersquare 就是一个能够将 BPG 格式的图片作为 CSS 背景加载的 npm 包。
在本文中，我们将会详细地介绍 bpg-supersquare 的使用方法。我们会从安装开始，一步步地介绍如何使用该包，并附加一些代码示例和深度的技术分析。读完本篇文章，你将会对 bpg-supersquare 有一个全面的认识，并能够在自己的项目中灵活应用。
安装
通过 npm 来安装 bpg-supersquare：
npm install bpg-supersquare
或者通过 yarn 安装：
yarn add bpg-supersquare
安装完成后，我们就可以在项目中使用 bpg-supersquare 了。
使用方法
在我们开始使用 bpg-supersquare 之前，我们需要注意，为了让该包正常工作，我们必须确保已经将 bpg.js 文件放置在我们项目的根目录下。如果你还没有下载 bpg.js 文件，可以通过以下命令进行安装：
wget https://bellard.org/bpg/bpg-0.9.8.js
加载 BPG 图片
在加载 BPG 图片之前，我们需要用 bpg.js 对图片进行解码。这个过程可以通过 bpgSupersquare.decode(url) 方法来完成。该方法的参数是所要解码的图片的路径，返回值是一个 promise，我们可以通过 then() 方法来获取解码后的结果。
import bpgSupersquare from 'bpg-supersquare';
// 在这里将 img 的 src 属性设置为一个 BPG 图像的 URL
const img = document.querySelector('.bg');
bpgSupersquare.decode('/path/to/image.bpg').then((bpgImg) => {
img.style.backgroundImage = `url(${bpgSupersquare.toDataURL(bpgImg)})`;
});上面的代码中，我们首先通过 querySelector() 方法获取了一个名为 .bg 的元素，并将其赋值给了 img 变量。然后，我们调用了 bpgSupersquare.decode() 方法，将 BPG 图像 URL 作为参数传入。在解码过程完成后，我们再通过 bpgSupersquare.toDataURL() 方法将解码后的结果转换成 base64 编码，进而将其设置为 img 元素的 background-image。
调整图片大小
bpg-supersquare 还提供了一个 API，它可以帮助我们将 BPG 图像缩放到正方形大小，并将它格式化为可以在 CSS 中使用的字符串格式。
// 将 bpgImg 缩放到 100x100 的正方形
const squareImg = bpgSupersquare.resize(bpgImg, 100);
// 将 squareImg 格式化为可以在 CSS 中使用的字符串格式
const dataURL = `url(${bpgSupersquare.toDataURL(squareImg)})`;
// 使用该 dataURL 设置元素的背景图片
img.style.backgroundImage = dataURL;上面的代码中，我们首先调用了 bpgSupersquare.resize() 方法，将 BPG 图像缩放到 100x100 的正方形大小。然后，我们调用了 bpgSupersquare.toDataURL() 方法，将解码后的结果转换成使用于 CSS 的 URL 字符串格式。最后，我们将该字符串设置为 img 元素的 background-image。
实例代码
本部分提供了一个完整的示例，该示例介绍了如何使用 bpg-supersquare 将 BPG 图像缩放到固定大小并应用于元素的背景中。
HTML 代码：
<div class="bg"></div>
CSS 代码：
.bg {
width: 100px;
height: 100px;
}JavaScript 代码：
-- -------------------- ---- ------- ------ -------------- ---- ------------------ ----- --- - ------------------------------ ----- ------ - --------------------- ------------------------------------------- -- - ----- --------- - ----------------------------- ----- ----- ------- - ---------------------------------------------- ------------------------- - -------- ---
技术分析
在本部分，我们会进行更加深度的技术分析，并介绍 bpg-supersquare 的相关背景及原理。
原理介绍
bpg-supersquare 的核心原理是通过 bpg.js 对 BPG 图像进行解码，然后将其转换成 smushable 图像，生成与之对应的 CSS 样式。这个过程实际上是一个类似于图片预处理的操作，一旦完成，我们就可以通过 CSS 样式直接加载解码后的图像，无需再次进行解码，从而有效地提高了页面加载速度。
BPG 格式介绍
BPG 图像格式（Better Portable Graphics）是一种用于低比特率图像压缩的新型图像格式。它基于 HEVC（High Efficiency Video Coding）标准，并使用自适应离散余弦变换（ACDT）等新型编码方式，可以提供更多的压缩率和更高的图像质量。
BPG 格式的最大特点是支持透明度信息，还可根据场景自适应调整压缩能力。在某些情况下，BPG 格式的压缩率可以达到 JPEG 格式的两倍以上，因此越来越多的开发者开始关注这种格式。
bpg.js
bpg.js 是一个解码 BPG 图像的 JavaScript 库。它使用差分游泳式编码（CABAC）技术，以及自适应离散余弦变换（ADCT）等技术来进行图像解码，可以将 BPG 格式的图像解码成为 PNG、JPEG 或 WebP 格式。
bpg.js 可以在浏览器端和 Node.js 中使用，支持多种编码方式，可根据图片大小动态选择最适合的压缩模式。
smush.it
smush.it 是一个由雅虎提供的在线工具，它可以帮助我们分析并优化网站中使用的图片文件。它会自动分析图片的格式和大小，然后进行一系列的瘦身和优化操作，从而帮助我们尽可能地减小文件大小、提升网站性能。
bpg-supersquare 利用了 smush.it 的原理，将图片通过 bpg.js 以及 smush.it 的处理流程，生成对应的 CSS 样式，并将其应用到相关元素上，从而实现了用 BPG 图做背景的功能。
总结
在本文中，我们介绍了 bpg-supersquare 的安装和使用方法，并提供了一些实际的代码示例。同时，我们也对该包的原理进行了详细的技术分析，希望本文能够帮助读者理解并使用 bpg-supersquare，从而提高网站加载速度、优化用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c86ccdc64669dde4fa7