#使用Node.js进行高性能的图片格式转换，重点推荐WebP格式以减小文件体积并提高加载速度
前言
在我们的项目中，图片无疑是传达信息的明星，远胜于单调的文本和无趣的样式。然而，尽管它们美丽动人，图片也有自己的小麻烦，比如分辨率不足和加载缓慢等问题，常常让人苦恼。
别担心，我们有解决之道！通过使用更智慧的图片格式可以大大减小图片体积并提高加载速度。WebP 格式就是一个很好的选择，它的体积比 PNG 小约十分之一，同时支持透明通道，而 WebP2 甚至还支持动画！此外，JPEG XL 和 AVIF 也是新兴的图片格式，它们在保持高质量的同时还能大幅缩小图片文件体积。
在我们的项目中，优先使用 WebP 格式，它不仅轻便，还具有良好的兼容性。对于兼容性有问题的平台（如某些 H5 项目），我们采用智能降级策略。
自动降级机制
对于不支持 WebP 的环境（如某些旧版浏览器），可以使用 <picture> 标签或 <img> 标签的 srcset 属性提供不同格式的图片。这样浏览器可以根据自身支持的格式自动选择最合适的图片。
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description of the image">
</picture>
手动处理兼容
使用 JavaScript 检测浏览器是否支持 WebP 格式，并根据检测结果调整图片格式：
function supportsWebP(callback) {
var img = new Image();
img.onload = function () {
callback(img.width > 0 && img.height > 0);
};
img.onerror = function () {
callback(false);
};
img.src = "data:image/webp;base64,UklGRiIAAABXRUJQVlA4ICAAAAABAAIAAADb9eAAABAAQAAwAAcAAUABAAeAAEAAQAAcAABAAEAAQAAAAAA==";
}
supportsWebP(function (supported) {
if (supported) {
// 使用 WebP 图片
} else {
// 使用 JPG/PNG 图片
}
});
核心库的选择和使用
图片格式转换有很多开源库可以选择，我们这里介绍几个常用的库：
1. Sharp
Sharp 是一个功能强大的图片处理库，支持 JPEG、PNG、WebP、GIF、AVIF 等格式的转换。它基于 libvips 库，在图像裁剪等方面比 ImageMagick 和 GraphicsMagick 快 4-5 倍。适合需要高效处理图片的工具或客户端应用。
2. Jimp
Jimp 是一个纯 Node.js 实现的图像处理库，支持多种图片格式（如 BMP、JPG、GIF、PNG、TIFF），并具有裁剪、修改、绘图等功能。它非常适合需要进行图片编辑或生成的场景。
3. @squoosh/lib
LibSquoosh 使用 WebAssembly (WASM) 方式调用第三方库，支持图片格式转换和裁剪，适合需要大量处理图片的场景。
示例：使用 LibSquoosh 进行格式转换
以下示例展示如何使用 libSquoosh 将图片从 JPG 转换为 WebP 格式：
const { ImagePool } = require('@squoosh/lib');
const fs = require('fs');
const path = require('path');
const { cpus } = require('os');
const imagePool = new ImagePool(cpus().length);
async function convertToWebP(imagePath, outputDir) {
const fileBuffer = fs.readFileSync(imagePath);
const image = imagePool.ingestImage(fileBuffer);
await image.encode({ webp: {} });
const { binary } = image.encodedWith.webp;
const outputPath = path.join(outputDir, path.basename(imagePath, path.extname(imagePath)) + '.webp');
fs.writeFileSync(outputPath, binary);
console.log(`Converted image saved to: ${outputPath}`);
}
// 示例用法
convertToWebP('./input.jpg', './output');
图片裁剪
图片裁剪也是常见的需求，可以通过参数控制裁剪尺寸。比如将原图按比例裁剪：
const preprocessOptions = {
resize: {
width: 100,
height: 50,
},
};
await image.preprocess(preprocessOptions);
const encodeOptions = {
mozjpeg: {},
webp: {},
};
const result = await image.encode(encodeOptions);
图片转发与保存
使用流式传输可以同时处理图片并将其返回给用户。
response.data.pipe(imgResult.binary);
pipeline(response.data, fs.createWriteStream(cache_path), (error) => {
if (error) {
console.log('下载失败', req.url);
}
});
部署到服务器
在生产环境中，通过 NGINX 进行图片转发和缓存可以大大提升性能。配置示例如下：
location ~ \.webp$ {
proxy_pass http://127.0.0.1:8087;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
另外，为保证 Node.js 服务的稳定运行，建议使用 PM2 进行进程守护。
总结
通过 Node.js 与图片处理库的结合，我们可以高效地实现图片格式的转换和优化，为项目提升性能。WebP 格式的使用可以显著减小图片文件的大小，并通过自动降级机制确保在不支持 WebP 的环境中也能正常显示。希望本文能帮助你在项目中更好地使用高效的图片格式转换解决方案。