前置知识: Markdown

图片CDN加速

3 minIntermediate2026/6/14

Markdown图片CDN加速方案：图床选择、CDN配置、懒加载与性能优化。

1. 图片托管概述

1.1 为什么需要图床

Markdown 中的图片语法只引用 URL，不存储图片数据。因此需要一个图床来存储和分发图片：

![描述](https://example.com/images/photo.png)

1.2 图片托管方案对比

方案优点缺点适用场景
仓库内版本控制、离线可用仓库体积膨胀小型项目
GitHub免费、稳定有带宽限制开源项目
CDN 图床快速、全球加速可能有费用生产环境
对象存储可控、安全需配置企业项目
自建图床完全可控运维成本技术团队

2. GitHub 作为图床

2.1 使用 Issue 上传

在 GitHub Issue 中拖拽图片，自动上传到 GitHub CDN：

<!-- 上传后生成的链接 -->

![image](https://github.com/user/repo/assets/xxxxx/image.png)

2.2 使用仓库存储

<!-- 项目内图片 -->

![架构图](./docs/images/architecture.png)

<!-- 绝对路径引用 -->

![Logo](https://raw.githubusercontent.com/user/repo/main/docs/images/logo.png)

2.3 GitHub CDN 限制

限制说明
单文件大小≤ 100 MB
仓库大小建议 ≤ 1 GB
带宽无明确限制，但滥用会被限速
私有仓库图片链接需要认证

2.4 jsDelivr 加速

jsDelivr 提供免费的 GitHub 仓库 CDN 加速：

<!-- 原始 GitHub 链接 -->

https://raw.githubusercontent.com/user/repo/main/images/photo.png

<!-- jsDelivr CDN 加速 -->

https://cdn.jsdelivr.net/gh/user/repo/images/photo.png

<!-- 指定版本/标签 -->

https://cdn.jsdelivr.net/gh/user/repo@v1.0/images/photo.png

3. 对象存储 + CDN

3.1 主流对象存储

服务免费额度特点
Cloudflare R210 GB/月无出站流量费
AWS S35 GB（12个月）全球部署
阿里云 OSS按量计费国内速度快
腾讯云 COS50 GB（6个月）国内速度快
七牛云10 GB国内老牌

3.2 Cloudflare R2 + CDN 配置

# 1. 创建 R2 存储桶
# 2. 上传图片
wrangler r2 object put my-bucket/images/photo.png --file ./photo.png

# 3. 配置自定义域名
# Cloudflare Dashboard → R2 → 存储桶 → 自定义域名

# 4. 使用 CDN 链接
![描述](https://cdn.mydomain.com/images/photo.png)

3.3 图片处理

CDN 通常提供图片处理功能：

<!-- 缩放 -->

![缩略图](https://cdn.example.com/photo.png?w=300&h=200)

<!-- 格式转换（WebP） -->

![WebP](https://cdn.example.com/photo.png?format=webp)

<!-- 质量 -->

![压缩](https://cdn.example.com/photo.png?q=80)

4. 图片优化

4.1 格式选择

格式压缩类型透明度动画适用场景
PNG无损图标、截图、需要透明
JPEG有损照片、渐变
WebP两者通用（推荐）
SVG矢量图标、Logo、图表
AVIF有损下一代格式

4.2 图片压缩

# 使用 Sharp（Node.js）
npx sharp-cli -i input.png -o output.webp --format webp --quality 80

# 使用 ImageMagick
convert input.png -quality 85 output.webp

# 使用 Squoosh CLI
npx @nicolo-ribaudo/squoosh-cli --webp '{quality:80}' input.png

4.3 响应式图片

<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="描述" loading="lazy" width="800" height="600" />
</picture>

5. 懒加载

5.1 原生懒加载

<img src="photo.png" alt="描述" loading="lazy" />

5.2 Markdown 中的懒加载

部分渲染器支持在 Markdown 中添加 HTML 属性：

<!-- Hugo -->

![描述](photo.png){loading=lazy}

<!-- VuePress -->

![描述](photo.png "title" =800x600)

5.3 全局懒加载

在网站中全局启用图片懒加载：

// 为所有图片添加 loading="lazy"
document.querySelectorAll('img:not([loading])').forEach((img) => {
  img.setAttribute('loading', 'lazy');
});

6. 图床管理工具

6.1 常用工具

工具平台特点
PicGo桌面端支持多种图床，插件丰富
uPicmacOS轻量，支持快捷键
PicList桌面端PicGo 增强版
imgur在线简单快捷

6.2 PicGo 配置

// PicGo 配置示例（GitHub 图床）
{
  "picBed": {
    "current": "github",
    "github": {
      "repo": "user/image-hosting",
      "token": "ghp_xxxxx",
      "path": "images/",
      "branch": "main"
    }
  }
}

6.3 VS Code 集成

# 安装 PicGo 插件
# VS Code 扩展: PicGo

# 配置 settings.json
{
  "picgo.picBed.current": "github",
  "picgo.picBed.github.repo": "user/image-hosting",
  "picgo.picBed.github.token": "ghp_xxxxx"
}

# 使用：粘贴图片后自动上传并插入链接