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.

32 Comments

    1. Cody

      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.

      1. Uli

        Hi Cody,

        are you sure that the first method you described, works with Cloudflare?
        I tested it, and for me it looks like it would not work. First, I cleared all caches (own server, cloudflare) and visit my site with Chrome. All works as it should, I got the _webp.html.gz File from the local Cache-Folder and the .webp Images.
        But, that view with Chrome also filled the Cloudflare Cache. So, second step, I visited my site with Firefox. But, no images, because Cloudflare cached the view with Chrome (with the _webp.html.gz file), and deliver this to every Browser, doesn’t matter if webp was supported or not.

        Sorry for my bad spelling, english is not my first language.
        So, understand my Problem? Any Ideas how that could be fixed?

        If you have to know, I use Cache Enabler and Optimus HQ.

        Kind regards, Uli

        1. Cody Arsenault

          I just tested this with CloudFlare and it is working as expected. This should be no different than using any other CDN. Have you verified that you don’t have any rules in your .htaccess file that might be interfering with this?

  1. Amir Emami

    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

  2. Derek Yang

    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!

  3. YanBen

    Hi,

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

    Cheers,

  4. Eric Valois

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

    1. Cody

      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.

        1. Cody

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

  5. 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!

  6. 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?

  7. 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.

    1. Cody

      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.

      1. 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.

  8. Alex Kappel

    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.

  9. Manuela Unterbuchner

    Is there any way to generate a .webp image from an image edited in WordPress? Currently it doesn’t generate .webp files from images that were cropped or rotated in WordPress, for example. These aren’t picked up by the bulk optimizer either.

    1. Cody

      You will need to use a plugin such as regenerate thumbnails https://en-ca.wordpress.org/plugins/regenerate-thumbnails/ in this case. Once the regeneration is complete you can re-optimize the image with Optimus. However, it is recommended to do your image modifications outside of WordPress and re-upload the file since modifying it within WordPress will add extra data to the URL (e.g. test-image-e1496921412776.webp).

      1. Manuela Unterbuchner

        Thanks for the quick feedback, I’ll give it a go. Usually I do all the editing beforehand but in this particular case, it is down to the Beaver Builder plugin offering various crops of an image which makes it easer for the end user to insert an image.

  10. James Maiden

    I am using KeyCDN and LiteSpeed Cache, so won’t be using the Cache Enabler Plugin.
    The method above for when Cache Enabler is not used states it won’t work with a CDN.
    Is there a way to use WebP in my situation?

    1. Cody

      Cache Enabler is currently the only plugin that will allow you to properly deliver WebP images to supported browsers while falling back to JPGs or PNGs for unsupported browsers (in combination with a CDN).

        1. Cody Arsenault

          Sorry, that is not currently on our roadmap at this time as you can use Cache Enabler to deliver .webp images.

  11. nilblank

    Why aren’t all my images being delivered as webp?

    I am using Optimus HQ, Cache Enabler and CDN Enabler. I have tested while logged out of WP and using an incognito window, then checked my assets’ ‘content-type’ in Developer Tools. Some of my smaller sized logos are WebP. None of my large photos are.

    Shouldn’t this be a perfect workflow for serving WebP instead of png and jpg? So, why isn’t it working?

    Thanks in advance.

  12. Juan Pablo Guerrero

    Hello friends! I need to know why I can not deliver webp images from wordpress. I have optimus HQ plugin and cache enabler.And make all the settings.
    Yesterday worked well but today I can not deliver .webp in Chrome.
    Also added in .htacces “AddType image / webp .webp” and nothing.

    Thanks!

Leave A Comment?