图片存储方案对比

选择合适的图片存储方案，能显著提升 Hugo 站点的性能和用户体验。

不同的图床在成本、访问速度与管理方式上各有优缺点。Cloudflare R2 提供稳定的对象存储，GitHub 图床适合轻量场景，而 iPic、PicGo 等工具则方便本地上传。根据协作方式和预算选择方案，可在性能与易用性之间取得平衡。

图片存储方案对比

Cloudflare R2 实践

本站使用 Cloudflare R2 作为主要图片存储方案。R2 提供：

• 无限存储容量
• 全球 CDN 分发
• 与 Cloudflare Pages 无缝集成

配置 R2 上传脚本：

#!/bin/bash
# 上传图片到 R2
aws s3 cp image.webp s3://my-bucket/images/ --endpoint-url https://xxx.r2.cloudflarestorage.com

图片压缩与格式

本站采用 WebP 格式压缩图片，显著减少文件大小：

• WebP: 比 JPEG 小 25-35%，比 PNG 小 26%
• 自动转换: 在构建时将 PNG/JPG 转换为 WebP
• 回退支持: 为不支持 WebP 的浏览器提供 JPEG

压缩脚本示例：

# 使用 ImageMagick 转换为 WebP
convert input.jpg -quality 80 output.webp

本站最佳实践

1. 自动化处理: 使用 npm scripts 批量转换和上传
2. 响应式图片: 生成多种尺寸适配不同设备
3. 懒加载: 结合 Intersection Observer 优化加载
4. 缓存策略: 设置适当的 Cache-Control 头

示例构建脚本：

{
  "scripts": {
    "images:convert": "find static/images -name '*.jpg' -exec convert {} -quality 80 {}.webp \\;",
    "images:upload": "npm run images:convert && aws s3 sync static/images s3://bucket/images"
  }
}

总结

选择合适的图片存储和压缩方案，可以显著提升站点性能。本站的 Cloudflare R2 + WebP 实践证明了这一方法的有效性。