Skip to content

前端兼容webp

你可以通过如下规则来实现前端Webp自动切换:

- rule: ^https\:\/\/imagecdndomain/(.*))\.jpg
  transform_rules:
    - search: image\/webp
      searchin: header
      searchkey: Accept
      replace: .webp
      replacein: url
      replacekey: .jpg

当浏览器发起https://imagecdndomain/1.jpg请求时,ClientWorker将检查浏览器的Accept头,如果包含image/webp,则会自动将请求转换为https://imagecdndomain/1.webp。如果浏览器不支持Webp,则会自动将请求依旧保持为https://imagecdndomain/1.jpg

你需要为你的图片额外准备一张Webp版本。

这是一张jpg图片,当你浏览器支持Webp时,会替换到webp并显示Webp Accept!;当浏览器不支持Webp时,会显示Webp Reject!This is a jpg file

Webp Support