Access #

In order to use our service, you need to change all image urls on page from your original one(e,g to the new one(e,g, here are some ways to archive this.

All the examples below are using:

  • Old URL:
  • New URL:

Make sure to make necessary changes.

Rewrite after build

If you’re using static website builder, you can try using this script after running build command(e,g hugo --minify):

Detailed usage:

pip3 install beautifulsoup4 && wget
python3 ./public "" ""

This script will walk through all the html files under ./public folder, and change all the imgs' src:

  • From /<something_here> to<something_here>
  • From<something_here> to<something_here>

Currently our plugin ( is under developent and may not work as expected, we found a famous Wordpress Plugin called WP Super Cache, the plugin contains another plugin called OSSDL CDN off-linker. (However that plugin itself seems not working in our dev environment).

Usage is as below, suppose you:

  1. Have WP Super Cache installed and enabled
  2. Your site URL is
  3. Your images URL is, this should be the same as your site URL if your images are inserted using Wordpress’s Media library
  4. Your Proxy Address on WebP Cloud Services is

Then you can configure WP Super Cache plugin as below:

  1. Site URL:
  2. Off-site URL:
  3. Include directories: wp-content/uploads
  4. Exclude if substring: .php,.css,.js

Please pay special attention to Include directories and Exclude if substring part, to make sure only images URL under wp-content/uploads are changed to WebP Cloud Services

In the configuration above, all images in posts and featured image will be changed accordingly, example site(with twentytwentythree theme):

You can use our Halo plugin at:, super easy to use, more usage details is on that GitHub page.
This method is contributed with ❤️ by STRRL

We are going to use “Markdown Render Hooks” to modify the way how hugo render the image as HTML.

  • Create a HTML file layouts/_default/_markup/render-image.html with blow content:
{{ if site.Params.webpCloudProxy.enable }}
    {{ if site.IsServer }}
<p class="md__image">
    <img src='{{ .Destination | safeURL }}' alt="{{ .Text }}" {{ with .Title }} title="{{ . }}" {{ end }} />
    {{ 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 }} />
        {{ else }}
<p class="md__image">
    <img src='{{ .Destination | safeURL }}' alt="{{ .Text }}" {{ with .Title }} title="{{ . }}" {{ end }} />
        {{ end }}
    {{ end }}
{{ else }}
<p class="md__image">
    <img src='{{ .Destination | safeURL }}' alt="{{ .Text }}" {{ with .Title }} title="{{ . }}" {{ end }} />
{{ end }}
  • Append the following content to config.toml
enable = true
proxyUrl = ""
convertTypeList = ["jpg", "jpeg", "png", "gif"]
  • Then build your static site with hugo


This method is contributed with ❤️ by Keshane

If you’re using Hexo, you can try this:

  • Install a package called hexo-webp-cloud-proxy made by Keshane
npm install hexo-webp-cloud-proxy --save
  • Then add the following content to _config.yml:
  enable: true
  # the suffix of img type to use webp cloud service
  convert_type_list: ["jpg", "jpeg", "png", "gif"]
  # your site url
  # webp cloud service proxy url
  # the filter priority, see
  priority: 10
  • Then build your website as usual
Nginx rewrite

If you are using Nginx for serving the webpages, you can add theses lines to your server block:

location / {
    sub_filter_once off;
    sub_filter_types text/html;
    sub_filter  '<img src="' '<img src="';
    sub_filter  '<img src=' '<img src=';

    sub_filter  '<img src="/' '<img src="';
Service Worker

Add the following script in <HEAD> section of your HTML:

if ('serviceWorker' in navigator) {
            .then(function (registration) {
                console.debug('Service Worker registered success:', registration.scope);
            .catch(function (error) {
                console.warn('Service Worker registered failed.:', error);
            }); // end navigator.serviceWorker.register

Then create a file called service-worker.js under your website’s root path, with content below:

const proxyUrl = "";

self.addEventListener('fetch', event => {
    if (event.request.destination === 'image') {
        const oldSrc = new URL(event.request.url);
        const imageUrl = `https://${proxyUrl}${(oldSrc.pathname)}`
        const modifiedRequest = new Request(imageUrl);