WebP Cloud Services 是怎么吃自己狗粮的

• 吃自己的狗粮，或称为"狗粮实践"，是使用自己所生产的产品或提供的服务的做法。这是一个组织测试其产品在真实世界中使用的方式，利用产品管理技巧。因此，狗粮实践可以充当质量控制的手段，并最终成为一种推荐性广告。一旦产品进入市场，狗粮实践可以显示开发者对自己产品的信心。

在我们这个只有三个人但推崇「工程师文化」的小团队里面，「吃自己的狗粮」成为了一个必需品，如果我们都不愿意使用我们自己的服务，那么用户凭什么相信我们能提供好的服务。

我们团队只有三个人：Nova Kwok，BennyThink 和 Tuki Deng，但是我们自己管理的网站还挺多，随便列举一下就有如下：

• Nova Kwok 自己的博客： https://nova.moe/ （Hugo）
• WebP Server Go 的文档站： https://docs.webp.sh/ （Hugo）
• WebP Cloud Services 的文档站： https://docs.webp.se/（Hugo）
• WebP Cloud Services 的博客： https://blog.webp.se/ （Hugo）
• WebP Cloud Services 的 Wordpress 演示站： https://wordpress.webp.se/ （WordPress）
• BennyThink 的博客： https://dmesg.app/ （WordPress）
• BennyThink 的人人影视分享站： https://yyets.click/home （自研）
• Tuki Deng 的博客： https://tuki.moe/ （WordPress）

此外，还有我们的好朋友们：

• Halo ： https://halo.run/ （Halo）
• Keshane 的博客： https://keshane.moe/ （Hexo）
• STRRL’s backyard：https://strrl.dev/（Hugo）

看，我们有这么多不同类型的站点，有静态的，有动态的，我们应该怎么都让他们来接入 WebP Cloud 来优化站点图片以提升加载速度呢？

• 注：以下仅为示例，完整详细的接入方式请参考我们的接入文档： https://docs.webp.se/webp-cloud/access/

WordPress

对于 WordPress 而言，我们提供了插件的接入方式：https://github.com/webp-sh/wordpress-plugin-webp-cloud （虽然这个插件目前还没有上架 Wordpress 的官方商店，因为我们觉得它还不够完美，而且，这个插件还是 ChatGPT 帮我们写的）

只要在下载并安装插件后简单配置一下地址：

然后你的站点就已经成功接入 WebP Cloud 了，很方便是不是？

Hexo

作为 Hexo 用户的 Keshane Chen 帮我们写了个小插件，叫做 hexo-webp-cloud-proxy

只需要：

npm install hexo-webp-cloud-proxy --save

然后在 Hexo 的 _config.yml 中加入以下配置（修改一下 pre_url 和 proxy_url）：

webp_cloud_proxy:
  enable: true
  # the suffix of img type to use webp cloud service
  convert_type_list: ["jpg", "jpeg", "png", "gif"]
  # your site url
  pre_url: https://yyets.dmesg.app
  # webp cloud service proxy url
  proxy_url: https://vz4w427.webp.ee
  # the filter priority, see https://hexo.io/api/filter.html
  priority: 10

就可以成功接入 WebP Cloud 了。

Hugo

对于 Hugo 而言我们有两种接入方式，一种是由 Hugo 用户的 STRRL 贡献的思路，使用 Markdown Render Hooks 来动态替换页面上的 HTML 。

创建 layouts/_default/_markup/render-image.html

{{ if site.Params.webpCloudProxy.enable }}
    {{ if site.IsServer }}
<p class="md__image">
    <img src='{{ .Destination | safeURL }}' alt="{{ .Text }}" {{ with .Title }} title="{{ . }}" {{ end }} />
</p>
    {{ else }}
        {{ $image_ext := index (split .Destination ".") 1 }}
        {{ if in site.Params.webpCloudProxy.convertTypeList $image_ext }}
<p class="md__image">
    <img src='{{ replace ((printf "%s%s" .Page.Permalink .Destination) | safeURL) site.BaseURL site.Params.webpCloudProxy.proxyUrl }}'
        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 }}

然后在 config.toml 加入：

[params.webpCloudProxy]
enable = true
proxyUrl = "https://vz4w427.webp.ee/"
convertTypeList = ["jpg", "jpeg", "png", "gif"]

即可让 Hugo 的站点也完成接入。

另一种思路是使用我们提供的 Rewrite after build 的通用接入方式，目前 「WebP Server Go 的文档站」和「WebP Cloud Services 的文档站」是使用 Rewrite after build 方式接入，有兴趣了解的可以参考 「WebP Server Go 的文档站」公开仓库的：

• https://github.com/webp-sh/docs.webp.sh/blob/master/build.sh
• https://github.com/webp-sh/docs.webp.sh/blob/master/convert.py

文件来了解我们具体的接入方式。

Halo

我们的好朋友 Halo 制作了一个插件： https://github.com/webp-sh/halo-plugin-webp-cloud

使用方式和 Wordpress 插件一样简单，只需要安装插件并填入地址：

然后你的站点就能完成接入啦~

自研

对于自研的网站，例如 BennyThink 的人人影视分享站：https://yyets.click/home，使用React + Tornado构建，要接入 WebP Cloud 就更加方便了。毕竟代码都是自己的，那么只需要将图片渲染地方的代码稍微替换一下即可，比如说

const getDoubanPoster = () => {
    const webpcloud = "https://3297e64.webp.ee";
    return `${webpcloud}/api/douban?resource_id=${id}&type=image`;
};

<div style={ { backgroundImage: `url(${getDoubanPoster()})` } } className = { classes.post } />

更多？

和其他的 CDN 不一样的点在于，我们只针对你的图片请求次数进行收费，不会限制流量或者转换次数等，且如果你的配额用完的话图片请求会 302 重定向到你的源站地址上，所以不会出现请求次数用完后图片无法加载的情况。

哦对了，在我们这里所有用户能使用的功能都是完全一样的哦，不会存在「付费用户才能使用的功能」这种事情。

为了支持中小站点，我们对于免费用户每天提供了 2000 个图片的请求额度（配额每24小时重置一次，在 UTC+0 00:00 重置），这个免费额度在我们的调研下来完全可以支持一个中小站点的图片需求。

WebP Cloud Services 作为一个来自上海和赫尔辛堡的三人小团队，由于我们不融资，所以我们能继续坚持下来完全依靠付费用户的支持，在本文中我们也想再次感谢从我们创立开始到现在一直支持我们的用户们，有了你们，才有了我们今天的 WebP Cloud Services。

不如现在就来 WebP Cloud Services Dashboard 注册个帐号玩玩？如果你好奇它还有哪些神奇的功能，可以来看看我们的文档 WebP Cloud Services Docs，希望大家玩的开心~