WebP Support
WebP is Google's alternative smaller image format to that of PNG or JPEG. 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 and CMS support. 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 2020, global WebP support from browsers is 79.4%
- caniuse
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.
Safari WebP
Apple's Safari browser, along with their iOS Safari browser, will both have WebP support in Safari 14 and iOS 14 (expected to be released in September, 2020).
Firefox WebP
Mozilla Firefox has officially had WebP support since Firefox 65.0 (originally released in January, 2019).
Mozilla's Firefox for Android has officially had WebP support since Firefox 68 (originally released in July, 2019). Mozilla's Firefox for iOS doesn't have WebP support yet (but that may change once Apple releases support for WebP).
Edge WebP
Microsoft Edge has officially had WebP support since version 1809 of Windows (originally released in October, 2018).
Internet Explorer WebP
Microsoft Internet Explorer doesn't have WebP support and it never will because there will be no new versions of the Internet Explorer browser.
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 versions.
Should you use WebP?
Since WebP support globally hovers around 80%, it can make a lot of sense to use this image format as an alternative to PNG and JPEG. 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 the default format, like PNG and JPEG, 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 PNG and JPEG.
1. Browser market share
Remember to look at the browser market share when determining whether or not you should use WebP. After many years of development the most commonly used browsers support WebP. 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 2020, Chrome holds 65.47% of the market share, Safari 16.97%, and Firefox 4.25%.
W3Counter browser market share
According to W3Counter, as of June 2020, Chrome holds 63% of the market share, Safari 14.4%, and Firefox 5.1%.
W3Schools browser market share
According to W3Schools, as of May 2020, Chrome holds 80.7% of the market share, Firefox 8.5%, and Safari 4.1%. These statistics are measured by the monthly visits W3Schools receives.
Clicky browser market share
According to Clicky, as of July 2020, Chrome holds 62.92% of the market share, Safari 14.44%, and Firefox 7.71%.
After looking at the data above, Chrome on average holds about 68% of the browser market share. It is important to realize if you add WebP images to your project, a majority of visitors will indeed see the WebP versions. Once Apple releases Safari 14 and iOS 14, which will add support for WebP, it will make a significant increase in global WebP support.
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 or application is the same. It is always very important to confirm these numbers, which can easily be done in 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! As you can see in our example a majority of the traffic comes from Apple devices. Once iOS 14 gets full WebP support it 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 PNG and JPEG. 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 PNG or JPEG 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.
Automatic WebP conversion
In May, 2019 we released our powerful Image Processing service that is capable of converting images to WebP. Combined with our Cache Key WebP feature we can automatically convert and deliver by our global network WebP formatted images when accepted.
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.
Then you can use our free 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 PNG and or JPEG to the other browsers. It is actually doing all of the switching for you automatically.
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 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 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 file 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 there are plugins that can handle the conversion and automatic switching from PNG or JPEG to WebP.