图片优化脚本工具集

这个目录包含了用于图片优化和WebP转换的脚本工具，帮助优化网站性能和SEO效果。

🛠️ 可用脚本

1. convert-to-webp.js - 通用WebP转换器

最新添加，功能最完善的WebP转换工具。

使用方式:

# 转换指定目录
node scripts/convert-to-webp.js blog/posts/2025/picture
node scripts/convert-to-webp.js docs/picture

# 使用默认目录
node scripts/convert-to-webp.js

# 使用npm脚本
npm run images:webp                    # 默认目录
npm run images:webp-blog               # blog图片目录

特点:

• ✅ 支持命令行参数指定目录
• ✅ 递归处理子目录
• ✅ 智能跳过已存在的WebP文件
• ✅ 详细的统计信息和进度显示
• ✅ 文件大小格式化显示
• ✅ 平均95%+的压缩率

2. optimize-images.js - 综合图片优化

完整的图片优化解决方案，包括压缩和WebP转换。

使用方式:

# 优化指定目录
node scripts/optimize-images.js blog/picture

# 使用默认目录
npm run images:optimize

功能:

• 🗜️ PNG/JPG压缩优化
• 🔄 WebP格式转换
• 📱 响应式图片生成（可选）
• 📊 详细的优化报告

3. webp-only.js - 简化WebP转换

轻量级的WebP转换工具，避免复杂依赖。

使用方式:

node scripts/webp-only.js blog/posts/2025/picture

4. update-docs-webp.js - 文档引用更新

自动更新markdown文档中的图片引用为WebP格式。

使用方式:

npm run images:update-docs

5. format-sitemap.js - 站点地图格式化

格式化生成的sitemap.xml文件，提升SEO效果。

使用方式:

npm run sitemap:format

🚀 推荐工作流程

新图片处理流程:

1. 添加图片: 将新图片放入对应目录
2. 转换WebP: npm run images:webp 或指定目录
3. 更新引用: 手动更新markdown中的图片引用为.webp格式
4. 清理原文件: 可选择删除原始PNG/JPG文件

Blog文章图片处理:

# 1. 转换blog图片
npm run images:webp-blog

# 2. 或者转换特定文章的图片
node scripts/convert-to-webp.js blog/posts/2025/picture

⚙️ 配置说明

WebP压缩配置:

• 质量: 80 (0-100)
• 压缩方法: 6 (最优压缩)
• 压缩努力: 6 (最佳效果)
• 平均压缩率: 95%+

支持的图片格式:

• PNG (.png)
• JPEG (.jpg, .jpeg)
• BMP (.bmp)
• TIFF (.tiff)

📈 性能优化效果

使用这些脚本可以获得：

• 🚀 加载速度提升: WebP格式比PNG/JPG小90%+
• 📱 移动端友好: 更小的文件适合移动设备
• 🔍 SEO优化: 快速加载有利于搜索引擎排名
• 💾 存储节省: 大幅减少服务器存储空间

🛡️ 安全特性

• ✅ 文件检查: 转换前检查文件存在性和权限
• ✅ 智能跳过: 避免重复处理已转换的文件
• ✅ 错误处理: 完善的错误处理和日志记录
• ✅ 数据保护: 不会删除原始文件（需手动删除）

---

💡 提示: 建议在生产环境部署前先在本地测试所有转换结果，确保图片显示正常。