使用 WebP Cloud 优化图片访问
WebP Cloud Service
用了几天了,简单总结下:
- 访客浏览网站图片时,自动返回几乎同等质量、但 Size 小很多的 Webp格式。
- 提升访客的浏览体验、节约双方的带宽和流量
- 还有很多很垂直的功能,如加水印、移除exif、添加滤镜、自定义回源 Header还没试
- 集成或剥离都很简单,不用修改原始的图片链接和原始图片文件
Hugo快速集成
第一步,创建 Image render hooks 模板文件 layouts\_default\_markup\render-image.html
填写如下内容。
{{- if site.Params.webpCloudProxy.enable -}}
{{- if hugo.IsServer -}}
<p class="md__image">
<img src='{{ .Destination | safeURL }}' alt="{{ .Text }}" {{ with .Title }} title="{{ . }}" {{ end }} />
</p>
{{- else -}}
{{- $image_ext := replaceRE ".*\\.([^.]+)$" "$1" .Destination -}}
{{- if in site.Params.webpCloudProxy.convertTypeList (lower $image_ext) -}}
{{- $img_abs_src := "" -}}
{{- if hasPrefix .Destination "http" -}}
{{- $img_abs_src = .Destination -}}
{{- else if hasPrefix .Destination "/" -}}
{{- $img_abs_src = printf "%s%s" site.BaseURL (strings.TrimPrefix "/" .Destination) -}}
{{- else -}}
{{- $img_abs_src = printf "%s%s" .Page.Permalink .Destination -}}
{{- end -}}
{{- range site.Params.webpCloudProxy.proxyList -}}
{{- $img_abs_src = replace $img_abs_src .originUrl .proxyUrl -}}
{{- end -}}
<p class="md__image">
<img src='{{ $img_abs_src| safeURL }}' alt="{{ .Text }}" {{ with .Title }} title="{{ . }}" {{ end }} />
</p>
{{- else -}}
<p class="md__image">
<img src='{{ .Destination | safeURL }}' alt="{{ .Text }}" {{ with .Title }} title="{{ . }}" {{ end }} />
</p>
{{- end -}}
{{- end -}}
{{- else -}}
<p class="md__image">
<img src='{{ .Destination | safeURL }}' alt="{{ .Text }}" {{ with .Title }} title="{{ . }}" {{ end }} />
</p>
{{- end -}}
第二步,Hugo 全局配置项里填写如下内容
[params.webpCloudProxy]
enable = true
convertTypeList = ["jpg", "jpeg", "png", "gif"]
proxyList = [
{ originUrl = "https://img-originaurl1.com", proxyUrl = "https://webp-proxyurl1.com" },
{ originUrl = "https://img-originaurl2.com", proxyUrl = "https://webp-proxyurl2.com" }
]
- originUrl 和 proxyUrl 分别为你在WebP 后台填写的 图片源域名 和 代理域名(注意结尾:要么都加
/
要么都不加) - 一个 proxyUrl 只能反代一个 originUrl
- 通常一组就够了,但如果你的网站图片放在多个不同域名又不方便统一。那么就这样创建多个 Proxy (免费版用户可以创建3个),分别 rewrite URL 就可以
最后,执行:hugo --cleanDestinationDir --gc
生成页面即可
上述集成代码是我在其官方集成代码基础上做了修改和优化(额,基本上是 Claude 帮我完成的):
- 支持本地图片的2种情况: 位于 static 目录或位于文章所在目录
- 支持图床
- 处理文件扩展名有大写字母时候漏判的情况如 .JPEG
- 支持多组域名重写(图片请求存在多个域名的情况)
我做了一个测试页面来测试各种图片的情况,目前看没什么问题,如果你遇到问题,请留言。
其他平台集成可参考官方文档的指南:Access | WebP Cloud Services Docs
实际效果对比
测试1
集成 WebP Cloud Services 后,用户浏览图片的地址前后变化:
https://img.topnec.org/202408/e07a32d40b1540062b7b13226de2edcf.jpg
https://4e9fdc1.webp.li/202408/e07a32d40b1540062b7b13226de2edcf.jpg
观察请求的响应结果 ,在同时启用 Adaptive Resize 功能(根据设备分辨率自动优化图片尺寸)的情况下:
- 请求返回了 webp 格式的图片
- 大小仅有 306 kB (原图1.1MB)
测试2
通过加速后,用户打开此图片,WebP 这次自动返回了 AVIF 格式 (当 WebP 格式的 Size 大于原图或者大于 AVIF 的 Size 时),大小仅60 kB
效果我感觉挺好的,感觉对于站点内容会发布高清图片的用户比如摄影博主可能帮助更大,另外就是对于移动端设备来浏览的访客,Adaptive Resize 体验更好,屏幕本来就小,不用加载全尺寸的图片了。
目前本博客全部博文图片启用了 WebP Cloud 加速,用的是 Free Plan 每天有3000次请求的配额,其他有关配置、使用方面的内容,用过一段段时间后再来更新吧~