写博客或者建站时经常遇到图片太大导致加载慢的问题。传统的做法是用 PS 裁来裁去，或者折腾各种图床。其实还有一个更轻量的方案——wsrv.nl，一个免费的图像处理 CDN 代理服务。

什么是 wsrv.nl

wsrv.nl 本质上是在你的图片 URL 前面套了一层”加工厂”。

原始图片不变，访问时通过 URL 参数动态调整大小、转换格式、压缩质量，返回处理后的结果。不需要注册、不需要 API Key、不用安装任何依赖，直接拼 URL 就能用。

基本用法

核心结构非常简单：

1
https://wsrv.nl/?url=<图片地址>&<参数>

举个例子，把一张大图缩到宽 800px 并转为 webp：

1
2
<img src="https://wsrv.nl/?url=https://example.com/photo.jpg&width=800&format=webp"
     alt="处理后的图片" />

就这么简单。

常用参数一览

尺寸控制

参数 说明 示例
width 指定宽度（px） &width=800
height 指定高度（px） &height=600
width + height 同时指定宽高 &width=800&height=600

只给宽或只给高都可以，另一个维度会按原始比例自动计算。

格式转换

参数 说明 示例
format 输出格式 &format=webp / &format=avif
支持格式 webp、avif、png、jpg、gif、tiff

推荐优先使用 webp，体积比 jpg/png 小很多，浏览器兼容性也足够。

裁剪模式

参数 说明
fit=auto 默认，按原比例缩放
fit=crop 裁掉多余部分填满指定尺寸
fit=contain 缩放后完整显示，可能留白边
fit=fill 拉伸填满，会变形

质量与效果

参数 说明 示例
quality 压缩质量 1-100 &quality=80
grayscale 灰度处理 &grayscale=true
blur 高斯模糊，值越大越模糊 &blur=5
brightness 调整亮度 &brightness=1.2

实际使用场景

博客文章嵌入图片

在 Markdown 中直接写：

1
![描述](https://wsrv.nl/?url=https://原图地址&width=800&format=webp&quality=80)

渲染出来的 <img> 标签指向 wsrv.nl，浏览器会加载你指定的格式。

生成缩略图

需要多尺寸时不用预处理好几张，一个 URL 参数搞定：

1
2
3
4
5
<!-- 大图 1200px 宽 -->
<img src="https://wsrv.nl/?url=img.jpg&width=1200&format=webp" />

<!-- 小缩略图 300px 宽 -->
<img src="https://wsrv.nl/?url=img.jpg&width=300&format=webp" />

懒加载配合

搭配 loading="lazy" 属性，页面只加载可视区域内的图片，效果更好：

1
2
<img src="https://wsrv.nl/?url=大图URL&width=800&format=webp&quality=75"
     loading="lazy" alt="懒加载图片" />

Hexo 博客上的应用

如果你的博客也像我一样用 Hexo，可以通过 injector 在页面底部注入一段脚本，自动替换文章中的图片链接。核心逻辑大概是这样：

1
2
3
4
5
6
7
8
9
10
hexo.extend.injector.register('body_end', function() {
  const script = document.createElement('script');
  script.textContent = `
    document.querySelectorAll('article .markdown-body img').forEach(img => {
      if (img.src && img.src.includes('wsrv.nl')) return;
      img.src = 'https://wsrv.nl/?url=' + encodeURIComponent(img.src) + '&format=webp&quality=80';
    });
  `;
  document.body.appendChild(script);
});

这样写的好处是不用改任何 Markdown 源码，发文章时正常贴图就行，前端自动走代理压缩。

需要注意的地方

  1. 可靠性：wsrv.nl 是免费服务，没有 SLA 保障。重要生产环境建议加一层自己的 CDN 或自建替代方案
  2. HTTPS 兼容：如果你的站是 HTTPS，图片 URL 也尽量用 HTTPS，避免混合内容被浏览器拦截
  3. 缓存：同一参数的请求会被 CDN 缓存，多次访问同一个图片不会重复处理，性能还好
  4. 大图限制：原始图片过大时处理时间会比较长，极端情况可能超时，适合日常博客图文场景

替代方案对比

服务 价格 特点
wsrv.nl 免费 开箱即用，参数简单
Cloudinary 免费额度可用 功能更全，但学习成本高
imgproxy 自托管 可控，需要服务器
ImageKit 有免费档 带管理后台

个人博客或小站用 wsrv.nl 性价比最高，零成本零配置，上手直接写 URL。

总结

wsrv.nl 解决的核心问题是：不改动原始图片，通过 URL 参数动态生成所需的任意尺寸版本。适合博客、文档站、个人主页这类对图片需求不强但又有优化空间的场景。

不需要注册，不需要 Key，粘贴 URL 就能用——试一下，可能就离不开了。