WebP Support – It’s More Than You Think

webp support

WebP is Google’s alternative smaller image format to that of JPEGs or PNGs. There has been a lot of confusion lately over WebP support and just exactly what you can and cannot use it with, such as browser support, CMS support, etc. Today we want to clear up any doubts you might have. WebP support is actually a lot better than what you might think.

WebP Support for Browsers

Not every browser has WebP support and so it is important to know which ones do as this might affect your decision of whether or not you want to convert and deliver WebP images into your website and or project. Below are all the major browsers and an explanation about WebP support.

As of July 2016, global WebP Support from browsers is 69.6% – caniuse.com

Chrome WebP

Google Chrome has officially had WebP support since Chrome 23 (originally released in November, 2012), and partial support since Chrome 9. Partial support means they didn’t support lossless and alpha versions of WebP.

Google’s Android browser has officially had WebP support since 4.2 (originally released in November 2012), and partial support since Android browser version 4. Google’s Chrome for Android browser has had WebP support since Chrome 50.

Opera WebP

Opera has officially had WebP support since Opera 12.1 (originally released in November, 2012), and partial support since Opera 11.5. Partial support means they didn’t support lossless and alpha versions of WebP.

Opera’s mini browser officially supports WebP in all current verions.

FireFox WebP

Firefox doesn’t currently have WebP support. This is currently being discussed on the Mozilla forums in bug 1294490.

Internet Explorer WebP

Internet Explorer, along with their new Edge browser, both don’t have WebP support. And there aren’t any plans to add it at this point. However, there is a uservoice discussion going on where people are requesting that Microsoft add WebP support to Edge.

Safari WebP

Apple’s Safari browser, along with their iOS Safari browser, both don’t have WebP support. However, there was a recent tweet from HTML5test that we could possibly be seeing WebP support in Safari in iOS 10. iOS 10 is currently in beta so time will tell.

Should You Use WebP?

Since WebP support globally hovers around 70%, it can make a lot of sense to use this image format as an alternative to PNGs and JPEGs. It is very important to note, that no matter how implement WebP, you are simply serving WebP images to browsers that support it, and then PNGs and JPEGs to the other browsers. You aren’t breaking your images by using WebP. Think of it as an addition, rather than a change. There are also a few other things to consider, such as browser market share, your current traffic, and WebP file sizes as compared to PNGs and JPEGs.

1. Browser Market Share

When determining whether or not you should use WebP, remember to look at the browser market share, since Chrome and Opera support WebP it is good to know where they stand. We collected some stats from a few different sources as they each collect data in their own unique way.

StatCounter Browser Market Share

According to StatCounter as of June 2016, Chrome holds around 58% of the market share, and Firefox comes in second at around 16%.

browser market share statcounter

W3Counter Browser Market Share

According to W3Counter, as of June 2016, Chrome holds around 57% of the market share, and Safari comes in second at around 14%.

browser market share w3counter

W3Schools Browser Market Share

According to W3Schools, as of May 2016, Chrome holds around 71% of the market share, and Firefox comes in second at around 17%.

browser market share w3schools

Clicky Browser Market Share

According to Clicky, as of July 2016, Chrome holds around 50% of the market share, and Firefox comes in second at around 18%.

clicky browser market share

After looking at the data above, Chrome on average holds about 59% of the browser market share. So it is important to realize if you add WebP images to your project, a majority of visitors will indeed see the WebP versions. Opera only holds a small part of the market share, but they will also see them.

2. Google Analytics

Now just because the browser market share might be leaning towards Chrome for most people, it doesn’t necessarily mean your website/project is the same. It is always very important to confirm these numbers. You can easily do so by clicking into the “Browser & OS” section of your Google Analytics. In our example below you can see that almost 70% of the traffic is coming from Chrome. So in this scenario, WebP could be very beneficial, as it means 70% of the visitors are going to be delivered incredibly smaller file sizes.

browser google analytics

And don’t forget about mobile! You can view this under the “Devices” section in your analytics. As you can see in our example a majority of the traffic comes from Apple devices. So it will be interesting to see if iOS 10 gets full WebP support as that will be a dramatic difference for a lot of mobile traffic.

google analytics mobile

3. WebP File Sizes

We have already written a couple case studies on comparing WebP file sizes with those of PNGs and JPEGs. Make sure to check them out.

There is also the cost-benefit ratio to consider. For CMS systems such as WordPress, you now have two images instead of one, a JPEG or PNG and a WebP image. So using WebP will take up more of your disk space on your server. But the fact of the matter is: smaller image file sizes lead to faster website load times. 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 CMS Support

Then comes the issue of platform support, whether you are using a CMS like WordPress or Joomla, or simply a static site with a PHP framework like Laravel. Below we will explain a bit about how to serve up WebP images in the various platforms.

WordPress WebP

WordPress is actually quite easy to implement WebP support. You can use our Optimus Image Optimizer plugin to automatically convert your images to WebP when they are uploaded to your WordPress media library.

webp image optimizer

Then you can use our free WordPress Cache Enabler plugin to serve up the WebP images to your visitors.

webp support caching

The important part is that Cache Enabler actually determines the browser support and delivers WebP to supported browsers, and then JPEGs and or PNGs to the other browsers. It is actually doing all of the switching for you automatically.

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.

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.

WebP on Other Platforms

For other platforms, make sure to read our post on how to deliver WebP. Some platforms will require a tweak to your .htaccess file or Nginx config to enable WebP support.

Summary

As you can see, when it comes to WebP support, it is probably much more supported than you originally thought. You definitely have to take browser market share and data from your current traffic into consideration. If over 70% of your traffic for example is coming from Google Chrome, then it makes a lot of sense to use WebP to speed up your website. And if you are on a CMS, it is quite easy because their are plugins out there to do the automatic switching from JPEG or PNG to WebP.

Related Articles

14 Comments

  1. daris2000

    Great article, but I do want to point a critical elements that is missing: image quality. You cannot compare file sizes if you don’t also look at the quality of the image. I see you did link to an earlier comparison but there’s no clear side-by-side.

    I did an extensive image quality comparison about a year ago and it turned out that in particular on larger images, WebP realizes savings by smushing details, like an aggressive noise reduction. This loss of sharpness and detail may be acceptable to many given the savings, but definitely not in every scenario.

    1. Brian Jackson

      Thanks for your comment!

      I have made a note to go back and add the quality comparisons. Note: It matters a lot if you are referring to using WebP lossless vs WebP lossy. All of our examples use lossless formats. Maybe a slightly better comparison is here: https://optimus.keycdn.com/support/lossy-vs-lossless/

      With lossless, any degradation is rarely noticeable to the human eye. Unless your a photographer in which case you might be able to notice something. It is nothing compared to if you converted to lossy at the same file size. But like you said, it depends on your scenario, the types of images you are using, etc.

      1. daris2000

        Thanks for being open to feedback 🙂

        I cannot seem to find the link I used before where one has a slider that moves over a JPEG/WebP laid on top of each other, which was my main comparison tool.

        The link you share does have an interesting side-by-side, but I continue to believe that it is a bit too rosy: it’s a tiny thumb where people will not see much difference anyway, plus the photo itself is high contrast and sharp to begin with, which also impacts results. I recall in particular large images having a lot less favorable outcomes.

        I should say though that I actually am a photographer and also work on photography-based sites, so I suppose I do have a bias for image quality.

        One other mild criticism of WebP I like to add is that it limits what users can do with it, for this reason Facebook stopped their experiment. Meaning, people can’t download and reshare, open it locally, edit it, etc. That can be a good thing or a bad thing, depending on your goal 🙂

        1. Brian Jackson

          Always open to productive discussions 🙂 I have made a note to include some larger comparisons.

          I think everyone in their own profession is sometimes biased. I know when it comes to web performance, sometimes we are a little biased, but we try not to be. But the point of the article too was to show people that there is probably a lot more traffic that can consume WebP format than they might have thought.

          That is a great point about sharing aspect. For us, I guess we kind of look at that as a good thing because we are big fans of hotlink protection. But I can definitely see that as a downfall too.

  2. William

    Is there a way to use the Webp images created with Optimus without using the Cache Enabler plugin? Cache Enabler breaks certain parts of our site and we use a memory cache solution. I purchased Optimus in large part because of the webp creation and it’s going to waste.

  3. Dhvani Kotak

    Hello, Very good information shared.
    Thank you.

    Can you please tell me how to use jpeg and png instead of webp where browser doesnt support webp for same webpage.

    Not for background image but for the images from img tag as well.

    Thank you.

  4. Martin Fisher

    You say that “You can deliver WebP images with Cache Enabler however it won’t work if you’re also using a CDN or another reverse proxy”

    Are you saying that despite my using Optimus+Cache Enabler my use of Key CDN means that users still won’t get the benefit of my WebP images only standard formats? It rather sounds like it!

    1. Cody Arsenault

      That was a small typo in my comment. I meant to say “without” instead of “with”. The comment has now been updated.

Leave A Comment?