Configuration to Deliver WebP

WebP is an alternative image format that was developed by Google. WebP images are considerably smaller than JPG and PNG file formats - size reductions of up to 80% are commonly achievable. Read more about the details of WebP here: Convert to WebP - The Successor of JPEG.

In this article, we will focus on how you can use the webp image format with Optimus.

The free version of Optimus does not come with the ability to convert to WebP however, the HQ and HQ Pro versions both do. There are two methods to enable the delivery of WebP images, the following will explain both ways.

WordPress WebP

The recommended method to deliver WebP images in WordPress is through using Optimus in conjunction with the Cache Enabler plugin. Within the Cache Enabler, you have the option to "Create an additional cached version for WebP image support".

Once this option is selected, the Cache Enabler will parse the jpeg and png images within the wp-content/uploads directory. If there is an equivalent .webp image (that was generated by Optimus) it will then be included in the static WebP cached HTML file and will be delivered with a .webp extension.

MIME type

If you have any issues with WebP showing up, ensure that the MIME type, image/webp is enabled on your server. On Apache you can add the following code to your .htaccess file.

 AddType image/webp .webp

If you are on Nginx you can add the following code to your mime.types file.

image/webp webp;

WebP on other platforms

Alternatively, if you are not using the Cache Enabler plugin, you'll need to add the following configuring snippet to your .htaccess or nginx config file. This method does NOT work with a CDN. This snippet is broken down into the following pieces:

• The RewriteEngine On line simply activates the rewrite engine.
• The next line is the first condition that checks if the request is made with an HTTP header that includes image/webp. This will determine if the browser supports WebP.

• The next line is the second condition that check if the WebP file is present on the local server.
• If both of these conditions are met, the snippet then goes and replaces the content of .jpg, .jpeg, and .png to .webp.

Apache WebP configuration

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
    RewriteRule ^(wp-content/uploads.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

<IfModule mod_headers.c>
    Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

Alternative if the extension .webp has been appended (image.jpg.webp):

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{DOCUMENT_ROOT}/$1.(jpe?g|png).webp -f
    RewriteRule ^(wp-content/uploads.+\.(jpe?g|png))$ $1.$2.webp [T=image/webp,E=accept:1]
</IfModule>

<IfModule mod_headers.c>
    Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

Nginx WebP configuration

# http config block
map $http_accept $webp_ext {
    default "";
    "~*webp" ".webp";
}

# server config block
location ~* ^(/wp-content/.+)\.(png|jpg)$ {
    set $img_path $1;
    add_header Vary Accept;
    try_files $img_path$webp_ext $uri =404;
}

These examples are optimized for WordPress. You may need to adjust the path accordingly in different setups.

Both the Apache and Nginx configuration methods above are not recommended as they will not work with a CDN nor with other reverse proxies.

With the configuration snippet added, PNG and JPEG files will now be rewritten as WebP. However, the file extension itself does not change. A PNG file will still appear as a .png and a JPEG will still appear as a .jpeg in the URL of the image. In order to verify your image is in WebP format, you can navigate to the image URL, open Chrome Developer Tools, and navigate to the Network tab. Clicking on the image file will open up the response headers for that file which shows that the Content-Type is image/webp.

Use this method to double-check you have successfully configured your Optimus installation to deliver WebP images. Using this feature will not only reduce the size of your image, thus decreasing page load times, but will also help improve SEO.