How does WebP Cloud Services eat own dog food?

• Eating your own dog food, also known as “dogfooding” or “dogfood practice,” is the practice of using the products or services that a company produces. This approach allows an organization to test its products in real-world usage scenarios and leverage product management techniques. Therefore, dogfooding serves as a means of quality control and can eventually become a form of recommended advertising. Once a product enters the market, dogfooding demonstrates the developers’ confidence in their own product.

In our small team of only three individuals, but one that values an “engineer culture,” “eating our own dog food” has become a necessity. If we’re not willing to use our own services, then why should users believe that we can provide good service?

Our team consists of three people: Nova Kwok, BennyThink, and Tuki Deng, yet we manage quite a few websites of our own. Just to name a few:

• Nova Kwok’s personal blog: https://nova.moe/ (Hugo)
• WebP Server Go documentation site: https://docs.webp.sh/ (Hugo)
• WebP Cloud Services documentation site: https://docs.webp.se/ (Hugo)
• WebP Cloud Services blog: https://blog.webp.se/ (Hugo)
• WebP Cloud Services Wordpress demo site: https://wordpress.webp.se/ (WordPress)
• BennyThink’s blog: https://dmesg.app/ (WordPress)
• BennyThink’s YYeTs video sharing site: https://yyets.click/home (custom-built)
• Tuki Deng’s blog: https://tuki.moe/ (WordPress)

Furthermore, we have some good friends:

• Halo: https://halo.run/ (Halo)
• Keshane’s blog: https://keshane.moe/ (Hexo)
• STRRL’s backyard: https://strrl.dev/ (Hugo)

You see, we have a variety of sites with different types – static and dynamic. How can we integrate them all with WebP Cloud to optimize site images and enhance loading speed?

• Note: The following are just examples. For comprehensive integration details, please refer to our integration documentation: https://docs.webp.se/webp-cloud/access/

WordPress

Originally, we developed our own plugin, but we found that it wasn’t as user-friendly as the widely-used WP-Super-Cache. Therefore, we recommend everyone to use WP-Super-Cache. You can refer to the WordPress section in https://docs.webp.se/webp-cloud/access/ for instructions.

Once you’ve done this, your site will be successfully connected to WebP Cloud. Isn’t it convenient?

Hexo

For Hexo users, Keshane Chen, one of our own, has developed a small plugin called hexo-webp-cloud-proxy.

Just run:

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

Then, add the following configuration to your Hexo’s _config.yml (adjust the pre_url and 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

This will successfully integrate your Hexo site with WebP Cloud.

Hugo

For Hugo, we have two integration approaches. One is a concept contributed by Hugo user STRRL, using Markdown Render Hooks to dynamically replace HTML on the page.

Create 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 }}

Then, add to config.toml:

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

This will integrate your Hugo site with WebP Cloud.

The second approach uses our generic Rewrite after build method. Currently, “WebP Server Go documentation site” and “WebP Cloud Services documentation site” are integrated using this approach. If you’re interested, you can refer to the public repositories of “WebP Server Go documentation site”:

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

To learn about our specific integration approach.

Halo

Our good friend Halo has created a plugin: https://github.com/webp-sh/halo-plugin-webp-cloud

Usage is as simple as with the WordPress plugin – install the plugin and fill in the address:

Your site will be integrated with WebP Cloud!

Custom-built

For custom-built sites like BennyThink’s YYeTs video sharing site: https://yyets.click/home, built with React + Tornado, integrating with WebP Cloud is even more convenient. After all, the code is all your own. Just replace the image rendering code with something like:

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 } />

More?

One distinctive feature that sets us apart from other CDNs is that we charge based solely on the number of requests for your images. We don’t limit bandwidth or conversion frequencies. Furthermore, if you exhaust your quota, image requests will be 302 redirected to your source server’s address. This ensures that even after reaching the request limit, your images will still load seamlessly.

Oh, by the way, all the features available to our users are exactly the same. There’s no such thing as “features only available to paying users” here.

To cater to small and medium-sized websites, we offer free users a daily quota of 2000 image requests (the quota resets every 24 hours at UTC+0 00:00). Based on our research, this free allowance is more than sufficient to meet the image needs of a typical small to medium-sized site.

WebP Cloud Services, operated by a small three-person team from Shanghai and Helsingborg, has been able to persevere solely through the support of our paid users. As we don’t engage in funding, we extend our heartfelt gratitude to all our users who have supported us from the beginning to this point. It’s your support that has led to the existence of our WebP Cloud Services as it stands today.

How about registering an account and trying it out on the WebP Cloud Services Dashboard right now? If you’re curious about the fantastic features it offers, you can take a look at our documentation: WebP Cloud Services Docs. We hope everyone has a great time exploring it!