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 or 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”. Cache-Enabler-WebP-Settings

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 the following code to your mime.types file.

image/webp webp;

Joomla WebP

The free WebP Joomla extension by Yireo allows you to enable WebP support if the browser supports it. Browser support for WebP is detected based on a simple user-agent check (so that Chrome browsers are matched right away) and an additional JavaScript detection (so that other WebP browsers are matched as well). If WebP is detected, the extension will parse the HTML output to make sure links to supported images (png, jpg, jpeg) are actually replaced with WebP images. To install you will need to do the following:

  1. Get WebP running in your hosting environment
  2. Install the plugin in the Extension Manager
  3. Enable the plugin in the Plugin Manager

Magento WebP

The free WebP Magento extension by Yireo allows you to enable WebP support if the browser supports it. Browser support for WebP is detected based on a simple user-agent check (Chrome browser) and an additional JavaScript detection. If WebP is detected, the extension will parse the HTML-output of the Magento root-block to make sure links to supported images (png, jpg, jpeg) are actually replaced with WebP images. To install you will need to do the following:

  1. Setup the WebP binaries on your server
  2. Install the Magento module

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 a HTTP header that includes image/webp. This will determine if the browser supports WebP. Request Header Image/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 .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

Nginx WebP Configuration

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

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

Note: These examples are optimized for WordPress. You 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.

Webp Format

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.