记一个图片压缩小工具

2026年1月28日 16:22

我偷懒直接用trae分析生成了个md文档，直接掘金导入了，大佬们有不同意见评论区讨论，求轻喷

项目概述

这是一个基于 Node.js 的图片格式转换工具，专门用于将各种图片格式（PNG、JPG、JPEG、WebP）批量转换为 WebP 格式，以优化图片加载性能和减少存储空间。

项目结构

image-ConvertTo-webp/
├── dist-images/       # 输出目录（转换后的 WebP 图片）
│   └── logout.webp    # 示例转换结果
├── static/            # 源图片目录
│   └── logout.png     # 示例源图片
├── convert.js         # 主要转换脚本
├── package-lock.json  # 依赖版本锁定文件
└── package.json       # 项目配置和依赖管理

核心功能

批量转换：遍历指定目录下的所有图片文件并转换
目录结构保持：递归处理子目录，保持原有的目录层次结构
自定义配置：可配置源目录、输出目录和转换参数
智能处理：自动检测图片文件类型，仅处理支持的格式
友好日志：转换过程中输出详细的转换状态和结果

技术实现

依赖库

sharp：高性能的 Node.js 图像处理库，用于图片格式转换和处理

核心代码分析

1. 配置与初始化

// 配置
const sourceDir = './static';        // 源图片目录
const outputDir = './dist-images';   // 输出目录（可自定义）

// 确保输出目录存在
if (!fs.existsSync(outputDir)) {
    fs.mkdirSync(outputDir, { recursive: true });
}

2. 递归转换函数

async function convertImages(currentDir) {
    const files = fs.readdirSync(currentDir);
    const relativeDir = path.relative(sourceDir, currentDir); // 当前相对路径
    const outputSubDir = relativeDir ? path.join(outputDir, relativeDir) : outputDir;

    // 确保当前层级的输出子目录存在
    if (!fs.existsSync(outputSubDir)) {
        fs.mkdirSync(outputSubDir, { recursive: true });
    }

    for (const file of files) {
        const filePath = path.join(currentDir, file);
        const stat = fs.statSync(filePath);

        if (stat.isDirectory()) {
            // 递归处理子目录
            await convertImages(filePath);
        } else if (file.match(/\.(png|jpe?g|webp)$/i)) {
            // 构造输出文件路径（保持层级）
            const outputFileName = path.basename(file, path.extname(file)) + '.webp';
            const outputPath = path.join(outputSubDir, outputFileName);

            // 执行转换
            await sharp(filePath)
                .webp({
                    quality: 100,           // 有损压缩，质量 80
                    effort: 6,             // 压缩强度
                    smartSubsample: true   // 智能色度子采样（适合照片）
                })
                .toFile(outputPath);

            console.log(`✅ ${path.relative(sourceDir, filePath)} → ${path.relative(outputDir, outputPath)}`);
        }
    }
}

3. 执行转换

// 开始转换
convertImages(sourceDir)
    .then(() => console.log('🎉 所有图片转换完成，目录结构已保留！'))
    .catch(err => {
        console.error('❌ 转换失败：', err);
    });

转换参数说明

参数	值	说明
quality	100	转换质量，100为无损压缩
effort	6	压缩强度，值越高压缩效果越好但速度越慢
smartSubsample	true	启用智能色度子采样，适合照片类图片

使用方法

安装依赖：
```
npm install
```
准备图片：将需要转换的图片放入 static 目录
执行转换：
```
node convert.js
```
查看结果：转换后的 WebP 图片会保存在 dist-images 目录中

项目优势

简单易用：配置简单，一键执行
高效处理：使用 sharp 库，转换速度快
灵活可扩展：可根据需要调整转换参数和目录配置
保持目录结构：递归处理子目录，保持原有的文件组织
友好的用户反馈：详细的转换日志，便于了解转换状态

应用场景

网站优化：将图片转换为 WebP 格式，减少页面加载时间
移动应用：优化应用内图片资源，减少应用体积
批量处理：适合需要大量图片格式转换的场景
CI/CD 集成：可集成到自动化构建流程中，实现图片的自动优化

总结

这是一个轻量级但功能强大的图片格式转换工具，通过简单的配置和执行，即可批量将图片转换为 WebP 格式，为网站和应用提供更好的性能优化。项目结构清晰，代码简洁易懂，易于维护和扩展。

代码优化建议

添加命令行参数支持：可以通过 commander 等库添加命令行参数，让用户可以通过命令行指定源目录、输出目录和转换参数，提高工具的灵活性。
增加并发处理：对于大量图片的情况，可以考虑使用并发处理来提高转换速度。
添加错误处理：对单个文件的转换失败进行更详细的错误处理，避免因为单个文件失败而影响整个转换过程。
添加进度显示：对于大量图片的情况，添加进度条显示，让用户更清楚转换的进度。
支持更多输出格式：除了 WebP 格式外，还可以支持其他现代图片格式，如 AVIF 等。

通过这些优化，可以进一步提高工具的实用性和用户体验。

阅读视图