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 $uri$webp_ext $uri =404;
}
Note: The examples above are optimized for WordPress. You need to adjust the path accordingly in different setups.

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.

  • Hi,

    The “Apache WebP Configuration” is supported a server behind the CloudFlare? Thanks.

    • Hello,

      The Apache WebP Configuration snippet checks to see if the .webp file is present on the local server and then will replace the .jpg or .png file. However, the .png or.jpg extension will still remain on the image which will not work with a CDN or proxy. This is why we recommend using the first method with the Cache Enabler plugin which will actually create a static WebP html file which will deliver the WebP image with the .webp extension allowing you to use it with a CDN.

      • Hello Cody,

        Totally understand, thank you!

  • Hello Cody
    Apparently there was an update for the chrome developer tools, because A week ago I could see “content-type” in header section but I can not now, can you please guide me how I can be sure that my images are in webp? for example this one:

    ajibtarin.com/wp-content/uploads/2015/11/Ajibtarin-Poster.png

  • Hi! I upgraded to Optimus HQ, enabled “Creation of WebP files” in “Optimus Settings,” enabled “Create an additional cached version for WebP image support” in “Cache Enabler Settings,” then uploaded a few test images, however the content type is still “image/jpeg” rather than “image/webp.”

    Any insights? Thanks!

  • YanBen

    Hi,

    Any idea of the WebP htaccess rules for LiteSpeed webserver ? Apparently the Apache rules don’t work…

    Cheers,

  • I did the Recommended Method, the Alternative Method and both are not working. What I’m doing wrong?

    • Hey Eric, with the recommended method did you ensure you were logged out of your WP site when testing? This is required as the Cache Enabler does not deliver the cached version when you are logged in.

      • Yes, I tested it on Incognito mode. Can I send you my website on a private email?

        • You can open up a support ticket with us directly from the KeyCDN support page and we will take a closer look.

  • Robert Duffner

    I need a little help, I’m uploading images with webp enabled, I can replicate my issue with a specific image. However, when I upload to WP and it converts my image to webp it increases from 202kb to over 1mb. What am I doing wrong? Please help!

  • jarylwang

    Why not also serve users who are logged in the webp version if it exist? It is quite strange for a returning visitor who is not logged in to be served webp, then upon logging in he is served jpg/png which is larger in size?

  • Radu Palicica

    I followed your insrucitons but content-type is still saying image/jpeg and not webp as expected. Could someone let me know what am i doing wrong? We got the Optimus HQ and the Cache enabler installed.

    • Have you tested the images when not logged in to the WordPress backend? Cache Enabler doesn’t deliver the cached version of your pages for logged in users.

      • Radu Palicica

        Yes. I tested it in incognito on chrome where I was not logged in.

      • Radu Palicica

        Hi Cody, would you be able to help out or at least point me in the right direction? I’ve wasted already a whole day trying to make this work without much luck.

  • I have the same problems as the persons below. I have sent a support mail via your contact form. Hoping for support. Also added the settings in nginx.