使用 Node.js 生成优化的图像格式
图像是任何 Web 应用程序的重要组成部分，但如果优化不当，它们也可能成为性能问题的主要根源。在本文中，我们将介绍如何使用 Node.js 自动生成优化的图像格式，并以最适合用户浏览器的格式显示它们。
配置
首先我们需要一个为我们处理图像处理的库，而Sharp就是本文将使用的图像处理库。Sharp 是一个用于图像处理和操作的高性能 Node.js 库。它的设计速度快、内存效率高，非常适合处理大图像和生成多种图像格式。
安装：
npm i sharp
图像生成脚本
优化网络图像的第一步是为每个图像生成多种格式，每种格式都有自己的优点和缺点。某些格式（例如 JPEG）适合具有多种颜色的复杂图像，而其他格式（例如 WebP）更适合具有较少颜色的简单图像。具体的图片格式分析请看前端图片格式这篇文章。
要生成不同的图像格式，我们可以使用 Node.js 和 Sharp 图像处理库。下面是一个示例脚本，它为图像文件夹中的每个图像生成 avif 和 webp 格式：
const sharp = require('sharp');
const fs = require('fs');
const inputFolder = 'images';
const outputFolder = 'output';
const formats = ['avif', 'webp'];
if (!fs.existsSync(outputFolder)) {
fs.mkdirSync(outputFolder);
}
fs.readdir(inputFolder, (err, files) => {
if (err) {
console.error(err);
return;
}
files.forEach(file => {
if (file.endsWith('.jpg') || file.endsWith('.jpeg') || file.endsWith('.png')) {
const inputPath = `${inputFolder}/${file}`;
const name = file.substring(0, file.lastIndexOf('.'));
formats.forEach(format => {
const outputPath = `${outputFolder}/${name}.${format}`;
if (!fs.existsSync(outputPath)) {
sharp(inputPath)
.toFormat(format, { quality: 80 })
.toFile(outputPath, (err) => {
if (err) {
console.error(err);
} else {
console.log(`${name}.${format} saved`);
}
});
}
});
}
});
});
代码说明
const sharp = require('sharp');
const fs = require('fs');
const inputFolder = 'images';
const outputFolder = 'output';
const formats = ['avif', 'webp'];
在这几行代码中，导入sharp和fs库，将输入文件夹设置为images，将输出文件夹设置为output，并将要生成的格式定义为avif和webp。
if (!fs.existsSync(outputFolder)) {
fs.mkdirSync(outputFolder);
}
在这里，代码检查是否存在输出文件夹outputFolder，如果不存在，则使用 fs.mkdirSync()方法来创建它。这可确保在生成任何图像之前输出文件夹存在。
fs.readdir(inputFolder, (err, files) => {
if (err) {
console.error(err);
return;
}
})
使用fs.readdir方法来判断输入文件夹是否存在。
files.forEach(file => {
if (file.endsWith('.jpg') || file.endsWith('.jpeg') || file.endsWith('.png')) {
//...
}
})
这段代码使用forEach方法遍历输入文件夹中的所有文件。如果文件名以.jpg、.jpeg、 或.png结尾，则继续生成相应的avif和webp文件。
const inputPath = `${inputFolder}/${file}`;
const name = file.substring(0, file.lastIndexOf('.'));
这里，将输入文件路径定义为inputPath，并提取不带扩展名的文件名作为输出文件名。
formats.forEach(format => {
const outputPath = `${outputFolder}/${name}.${format}`;
if (!fs.existsSync(outputPath)) {
sharp(inputPath)
.toFormat(format, { quality: 80 })
.toFile(outputPath, (err) => {
if (err) {
console.error(err);
} else {
console.log(`${name}.${format} saved`);
}
});
}
});
在这里，脚本使用formats.forEach()循环遍历每种格式（即avif和webp）。对于每种格式，它将输出文件路径定义为outputPath
如果输出文件不存在，则使用 Sharp 的toFormat()函数以指定格式生成相应的图像，质量为 80。然后使用toFile()保存输出文件，并向控制台记录一条消息，指示文件已保存。
在浏览器中显示优化的图像
一旦我们为每个输入图像生成了多种优化的图像格式，我们就可以在应用程序中显示它们。为此，我们可以使用 HTML中的<picture>和<source>元素来指定不同格式的不同图像源。下面是一个以最适合用户浏览器的格式显示图像的例子：
<picture>
<source srcSet="./output/1.avif" type="image/avif" />
<source srcSet="./output/1.webp" type="image/webp" />
<img src="./images/1.png" />
</picture>
img 它将用作不支持avif或webp的浏览器的后备显示图像。
在浏览器的请求：
可以看到浏览器使用webp的方式展示图片。
结论
网站上的图像加载速度可能很慢，并且在不同设备上看起来并不总是很好。重要的是要让它们加载得更快、看起来更好，这样人们才能更喜欢我们的网站。在本文中我们学习了如何使用 Sharp 和 HTML 中的<picture>，<source>制作同一图像的不同版本，并为每种设备显示最佳版本。通过这样做，我们的网站对于每个使用它的人来说将会更快、看起来更好！
