Convert to WebP Format – The Successor of JPEG

convert to webp

Web users well-versed in technology have surely heard of WebP – an image format developed by Google to ensure superior compression of photos. JPEG is considered outdated and too inefficient. The WebP format is a sophisticated alternative method for convenient image compression that is now entering the market. JPEG vs. WebP: reductions in file size of up to 80% are commonly achievable.

Browser support for WebP Format

Sounds promising: higher quality than JPEGs, with much smaller files. But every light has its shadow. Browser support is the biggest current disadvantage of the WebP technology. According to caniuse.com, at this time, Opera and Chrome support the modern image format WebP. Firefox has announced support for WebP images in the future and it is still being discussed in this thread. Internet Explorer and Safari are left out completely.

Nevertheless, it is worth it to deliver images in WebP format to the browsers named above. At the moment there are two browsers that officially support the format, but soon there will be three with WebP support – if Firefox sticks to their plan. Looking at the statistics of your own websites lets you know whether it will be worth it for your project to include images in two formats.

WebP for Chrome & Opera – JPEG for all other browsers.

WebP in the Wild

Several big names like Google, Facebook, and Ebay are campaigning for the use of WebP and are even actively using it. Here is an example we grabbed from eBay’s homepage. At the time of writing this, about 95% of the images on their homepage were in the WebP format.

YouTube uses WebP format in certain large thumbnails. Below is an example we grabbed from YouTube’s homepage.

Using Rewrite Rules to Deliver WebP

Rewrite rules allow you to deliver WebP images by changing the MIME type of an image. However, this is not the recommended method to deliver WebP images since it can cause conflicts if also using a CDN (due to the current state of WebP browser compatibility). Therefore, for WordPress users, we recommend using the Cache Enabler plugin as outlined further below.

However, in the event that you still need to deliver WebP images and aren’t using WordPress nor a CDN, then you can experiment with the following rules.

RewriteRules for Apache (.htaccess)

A forwarding rule on the server level takes care of distributing the requests for the correct file formats, independently of the browser. In plain terms: the embedding of pictures in the HTML source code does not change in any way and is not affected (e.g. <img src="image.jpg" alt="Your Image" />). The distribution of the correct image is ensured by the RewriteRule in the system file .htaccess:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
    RewriteRule ^(path/to/your/images.+)\.(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

When a JPEG or PNG image is displayed in the browser, it is exchanged for a WebP file by the server and assigned the MIME type image/webp. The file extension (file format) does not change.

Important: The snippet above .htaccess needs to be positioned relatively high up.

RewriteRules for Nginx (nginx.conf)

Analogously to the Apache web server, there is a solution for Nginx:

location ~ ^(/path/to/your/images.+)\.(jpe?g|png)$ {
    if ( $http_accept ~* webp ) {
        set $webp "A";
    }
    if ( $request_filename ~ (.+)\.(png|jpe?g)$ ) {
        set $file_without_ext $1;
    }
    if ( -f $file_without_ext.webp ) {
        set $webp "${webp}E";
    }

    if ( $webp = AE ) {
        add_header Vary Accept;
        rewrite ^(.+)\.(png|jpe?g)$ $1.webp break;
    }
}

The image/webp web; entry in the Nginx system files mime.types is very important in this context—that’s how Nginx sends the correct MIME type to the browser.

RewriteRules for IIS

And here are the rules for IIS.

<system.webServer>
    <rewrite>
        <rules>
            <rule name="webp">
                <match url="(.+)\.(jpe?g|png)$" ignoreCase="false" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{HTTP_ACCEPT}" pattern="image/webp" ignoreCase="false" />
                    <add input="{DOCUMENT_ROOT}/{R:1}.webp" matchType="IsFile" />
                </conditions>
                <action type="Rewrite" url="{R:1}.webp" logRewrittenUrl="true" />
              <serverVariables>
                  <set name="ACCEPTS_WEBP" value="true" />
              </serverVariables>
            </rule>
        </rules>

        <outboundRules>
          <rule name="Set Vary header" preCondition="IsWebp">
            <match serverVariable="RESPONSE_Vary" pattern=".*" />
            <action type="Rewrite" value="Accept"/>
          </rule>
          <preConditions>
             <preCondition name="IsWebp">
              <add input="{ACCEPTS_WEBP}" pattern="true" ignoreCase="false" />
             </preCondition>
            </preConditions>
        </outboundRules>

    </rewrite>
    <staticContent>
        <mimeMap fileExtension=".webp" mimeType="image/webp" />
    </staticContent>
</system.webServer>

Cost-benefit ratio

Back of the envelope calculation: two file formats per image. For CMS systems such as WordPress, multiply that with the number of all created file sizes. That sounds complicated and like a lot of work. What’s the point of all of that? Is the effort worth it? You might come to different decisions based on the project and the target group.

The fact of the matter is: smaller image file sizes lead to faster website load times. We have mentioned several times that website performance is indisputably a factor affecting SEO. Readers are also happy when the blog sites they visit are displayed quickly.

The savings in traffic should also not be forgotten: depending on the project, a tidy sum can quickly accumulate. Having to deliver fewer bytes ultimately means that the server has to shoulder a smaller burden.

WebP vs JPEG resulted in a 77% decrease in page size! And WebP vs PNG, a 27% decrease.  WebP Case Study

JPG to WebP Test

We ran a test in WordPress with 5 large JPG images to demonstrate how much compression actually takes place and the significant size difference between .jpg and .webp files. We are using lossless compression with Optimus to optimize the images and also convert to WebP format upon upload to the media library. WordPress Cache Enabler then delivers WebP images based on browser support.

jpg-to-webp-2
jpg-to-webp-3
jpg-to-webp-4
jpg-to-webp-5

File Name Original Size Compressed JPG WebP Format Size Difference %
jpg-to-webp-1.jpg 480 KB 407 KB 43 KB 89%
jpg-to-webp-2.jpg 659 KB 578 KB 113 KB 80%
jpg-to-webp-3.jpg 787 KB 715 KB 127 KB 82%
jpg-to-webp-4.jpg 617 KB 543 KB 61 KB 88%
jpg-to-webp-5.jpg 605 KB 543 KB 70 KB 87%

We then ran a page comparison test with GTMetrix, JPG vs WebP, and you can see the total difference in page size. WebP resulted in a 77% decrease in page size. 

Tools

Currently there is a rather small selection of tools available for the creation of WebP graphics—understandable considering that the method is still in its infancy and many development statuses are marked as experimental.

WordPress WebP

If you are wanting to convert images in WordPress to WebP format optimus.io is one of the best solutions. Optimus offers a developer API to convert JPEG or PNG images to WebP. The service Optimus, which is powered by KeyCDN, allows to integrate the conversion process directly in your application. The service also has a WordPress plugin that converts images during the upload process. You can then combine it with the free WordPress Cache Enabler plugin which will automatically deliver WebP images in Chrome and PNG and or JPEG in Firefox and IE. It does this by creating to separate cached files. You can see below we are using this setup on this blog and and so all of our images are WebP.

Analysis

If WebP variants of images were placed on the server and the forwarding rule was added to the .htaccess file, the optimized image files are ready to be delivered. But how exactly is it controlled whether the WebP images were actually delivered to the selected browser? After all, there is no visual difference within the browser: JPEG and WebP images look almost identical.

The answer is simple: the graphics are always returned to the browser by the server in conjunction with information on the MIME type: for JPEGs it is image/jpeg, for PNGs it is image/png and for WebP it is correspondingly image/webp. That way any type of graphics format can be easily identified and allocated, even if the file has a „foreign“ file extension.

Browsers such as Chrome and Opera include so-called developer tools which allow you to display information such as the MIME type of a file.

Activating the developer tools in browsers:

Chrome: Chrome Menu/More tools/Developer tools → Tab Network
Opera: Page/Developer tools/Opera Dragenfly → Tab Network

TL;DR

  • WebP has smaller file sizes than JPEG
  • WebP looks better than JPEG even at higher compression rates
  • WebP is supported by Chrome, Opera, and soon Firefox
  • WebP speeds up load times and saves traffic
  • WebP has to be converted using tools or optimus.io

A huge advantage: You can immediately start outputting WebP images in your project. No change to the embedding of graphics in the html code is necessary. The forwarding rule for .htaccess described above verifies whether there is a WebP version for the accessed (JPEG) image file on the server – if yes, WebP format will be sent to the supported browser, otherwise the default (JPEG) image is used.

Related Articles

Happy conversion to WebP!

Convert to WebP Format – The Successor of JPEG was last modified: April 10th, 2017 by Sven Baumgartner
  • or use the official webP encoder from google with the following GUI (Windows Only)
    https://github.com/samcpt/WebPGUI

  • Gibberish

    In a recent post, you mentioned that WebP support was one of your motivations for changing hosts from Kinsta. So Kinsta does not support WebP at all? I’m currently using them but haven’t been able to get webp versions to display. Trying to figure out if I’m doing something wrong or if it’s server-side.

    • Just ask them to enable the Cache Enabler plugin for you. There is an option to integrate webp files.

      • Gibberish

        Yeah, doesn’t work. Found an explanation from Brian in a comment thread on another post here. Apparently it’s due to the heavy object caching that Kinsta uses that the WebP request doesn’t get triggered. https://woorkup.com/wordpress-cache-enabler/

        • That is correct. It isn’t because they can’t support it, rather it is because of how the caching works. Cache Enabler needs to be able to cache both the GZIP version and the WebP version. Kinsta uses object caching which doesn’t work along with the caching to disk method.

  • masterinfo

    relatively to Firefox … it seems to me that things have changed .. they do not have any intention to adopt WebP:
    https://www.reddit.com/r/firefox/comments/46wxye/why_is_firefox_still_not_supporting_webp/

  • Leo

    Hmm, should we delete our old photos/images, after creating webp versions?

    • Hey Leo,

      If you use our free Cache Enabler plugin + Optimus plugin there is no need to delete your old images. https://optimus.keycdn.com/support/configuration-to-deliver-webp/ In fact you want to leave them because only certain browsers support WebP. For example, in Chrome, users will get WebP versions and in Firefox, they will get your PNG/JPEG version.

      • Leo

        Hey Brian, the problem is, on WPHostingSpot, I’m hitting 90% of the SSD space due to having both webp and jpeg :( Guess there’s no way to have only one format?

        • Oh, do see your dilemma. Unfortunately there is no way to get around that problem because of browser support. If more browsers pick up WebP format there might one day be :)

  • Sammy D

    What is the config for IIS?

  • Baga Bagy

    what is the recommended quality setting? i tried 75 but the outuput webp file is larger than compressed jpg

    • Which WebP converter tool are you using? We tend to recommend losslessly compressing your images as that way there is no quality loss. Have you double checked in the tool you’re using that there aren’t any additional settings that need to be configured to ensure your images are properly optimized.

      • Baga Bagy

        hi cody thanks for getting back. i tried irfanview and WebP encoding tool GUI with similar results. the original images were jpg, optimized with irfanview at quality 60

        • I don’t any first hand experience with those conversion tools myself. Have you tried converting a couple of different images to see if the results differ? Also have you double checked the tool’s settings to see if there are any options which may be adding additional size to your image?

          • Baga Bagy

            i tried with a folder of jpg images and changed options but the file size doesn’t change much

          • I’m unable to test with ifranview or the WebP encoder as I’m using a Mac. However I just tried with the XnConvert tool (http://www.xnview.com/en/xnconvert/) and reduced a PNG from 71kb to 10kb with WebP. WebP settings are:
            – 90 quality,
            – compression method 4,
            – filter strength 60.
            You may want to give that a try.

          • Baga Bagy

            hi cody i tried the encoder tool you suggested but results are the same as before.
            i think webp works only on unoptimized jpgs or pngs, i mean about file size reduction.

  • David Ruess

    Hi, if I had the code in my .htaccess file and it converted both png, and jpeg to webp; what code could I replace it with to convert the webp files back to png, and jpeg? It’s just screwing up my site for some reason with Firefox. I’ll add support for webp later, but right now I’m just trying to revert the mime types back.
    Thanks for your help!

    • To stop using webp files you can just remove or comment out the .htaccess code.

      • David Ruess

        Thanks Cody! and thanks for replying so fast!

Shares
Share This

Share This

Share this post with your friends!