WebP Support - It's More Than You Think
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
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 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 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.
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%.
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%.
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%.
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%.
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.
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.
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.
- JPG to WebP - Comparing Compression Sizes
- WebP resulted in a 85.87% decrease in average image size. Our load times decreased by 11% and total page weight decreased by 29%.
- PNG to WebP - Comparing Compression Sizes
- WebP resulted in a 42.8% decrease in average image size. Our load times decreased by 3% and total page weight decreased by 25%.
- WebP Case Study with WordPress Cache Enabler
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 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.
Then you can use our free WordPress Cache Enabler plugin to serve up the WebP images to your visitors.
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.
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.
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.