TOPNEC

使用 WebP Cloud 优化图片访问

WebP Cloud Service

用了几天了,简单总结下:

官网:WebP Cloud Services

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" }
]

最后,执行:hugo --cleanDestinationDir --gc 生成页面即可

上述集成代码是我在其官方集成代码基础上做了修改和优化(额,基本上是 Claude 帮我完成的):

我做了一个测试页面来测试各种图片的情况,目前看没什么问题,如果你遇到问题,请留言。

其他平台集成可参考官方文档的指南:Access | WebP Cloud Services Docs

实际效果对比

测试1

这是一张 iPhone 拍摄的图片,删除了EXIF上传到 R2 后大小是 1.1 MB
这是一张 iPhone 拍摄的图片,删除了EXIF上传到 R2 后大小是 1.1 MB

集成 WebP Cloud Services 后,用户浏览图片的地址前后变化:

观察请求的响应结果 ,在同时启用 Adaptive Resize 功能(根据设备分辨率自动优化图片尺寸)的情况下:

测试2

这是一张 334 kB 的 png 图片
这是一张 334 kB 的 png 图片

通过加速后,用户打开此图片,WebP 这次自动返回了 AVIF 格式 (当 WebP 格式的 Size 大于原图或者大于 AVIF 的 Size 时),大小仅60 kB

效果我感觉挺好的,感觉对于站点内容会发布高清图片的用户比如摄影博主可能帮助更大,另外就是对于移动端设备来浏览的访客,Adaptive Resize 体验更好,屏幕本来就小,不用加载全尺寸的图片了。

目前本博客全部博文图片启用了 WebP Cloud 加速,用的是 Free Plan 每天有3000次请求的配额,其他有关配置、使用方面的内容,用过一段段时间后再来更新吧~

#Tech