WebP features: Do what you want to do!

WebP features: Do what you want to do!
GuideWebP is a smaller replacement of JPEG and PNG formats invented by Google. Recently, there have been many questions about WebP support. Specifically, we can use it to do anything, not to do anything, such as browser support and CMS support. Today I want to clear all possible concerns. The degree of support for WebP is actually much better than you think.WebP browser support

Not all browsers support WebP, so it is important that you know which browsers support it, which may affect your decision-making, whether to convert and use WebP images on your website or project. Below are the support levels of all mainstream browsers and Their WebP.

As of July 2016, the global browser's support for WebP was69.6%-caniuse.com

Chrome WebP

Google Chrome officialWebP is supported since Chrome 23 (originally released in November 2012) and partially since Chrome 9. Partial support refers to WebP that does not support lossless and alpha channels.

Google's Android browser has officially supported WebP since version 4.2 (initially released on January 1, November 2012), and partially supported since version 4. Google Chrome Android supports Webp since Chrome 50.

Opera WebP

Official OperaSince Opera 12.1, we have supported WebP (originally released in November 2012) and since Opera 11.5. Partial support refers to WebP that does not support lossless and alpha channels.

All versions of the Opera mini browser currently support WebP.

FireFox WebP

FirefoxWebP is not supported currently. Bug 856375 of the Mozilla forum is discussing the issue.

Internet Explorer WebP

Internet Explorer and their new Edge BrowserWebP is not supported. At present, there is no intention to add support. However, there have been discussions with users, and Microsoft is asked to add Webp support to Edge.

Safari WebP

Apple's Safari and iOS SafariWebP is not supported. However, some tweets in HTML5test recently said that we are expected to see Safari support WebP on iOS 10. IOS 10 is currently in beta testing, so the time will indicate everything.

Should you use WebP?

Because the global WebP support is around 70%, it is very meaningful to use this image format to replace PNG and JPEG. It is also important to mention that no matter how WebP is implemented,You only provide WebP for supported browsers, While PNG and JPEG for other browsers. Using WebP will not damage your image. Consider this value as a value-added value rather than a change. There are other things to consider, such as the browser market share, current traffic, and the size of WebP files relative to PNG and JPEG files.

Browser market share

When deciding whether to use WebP, remember to check the browser market share. Because Chrome and Opera Support WebP, it is necessary to check their shares. We collect some statistics from different sources, all of which have their own different data collection methods:

• StatCounter browser market share

StatCounter's data as of June 2016 showed that Chrome had a market share of 58%, and Firefox ranked second in the market by about 16%.

• W3Counter browser market share

According to data from W3Counter as of June 2016, Chrome accounted for about 57% of the market, and Safari ranked second in the market by about 14%.

• W3Schools browser market share

According to data from W3Schools as of May 2016, Chrome occupies about 71% of the market share, and Firefox occupies about 17% of the market share.

• Clicky browser market share

According to data from Clicky as of July 2016, Chrome occupies about 50% of the market share, and Firefox ranks second with about 18%.

From the above data, we can see that,Chrome has an average market share of about 59%, so it must be realized that if Webp images are added to the project, most visitors will see the WebP version. Opera only has a small portion of the market share, but they can be seen by users.

Google Analytics

Although the browser market share may be biased towards Chrome for most people, it does not mean that your website/Project is the same. Data validation is always important. It is easy to do. Click "Browser & OS" in Google Analytics. In the following example, we can see that nearly 70% of the traffic comes from Chrome. In this case, WebP is advantageous, which means that 70% of visitors will see smaller files.

Also, don't forget the Mobile End! You can see it in the "Devices" ("Devices") Section of Google Analytics. As you can see, most of the traffic comes from Apple devices. Therefore, if iOS 10 fully supports WebP, it will be quite interesting, so a large amount of mobile traffic will be significantly different.

WebP file volume

A large number of studies have compared the size of WebP, PNG, and JPEG files. Be sure to check them out.

• JPG to WebP-compression size comparison
  • On average, WebP reduces file submission by 85.87%. The loading time is reduced by 11%, and the overall page size is reduced by 29%.
• PNG to WebP-compression size comparison
  • On average, WebP reduces file submission by 42.8%. The loading time is reduced by 3%, and the overall page size is reduced by 25%.
• WebP with WordPress cache Enabled
  Case Study

You also need to considerCost-benefit ratioCost-benefit ratio. For CMS such as WordPress, there are two types of images, one is JPEG or PNG, and the other is WebP. Therefore, using WebP will occupy more disk space on the server. But the fact is that smaller images bring faster loading time. The saved Traffic should not be ignored: depending on different projects, the accumulated traffic volume is considerable.

Others are using WebP, though you may not have noticed. Dollar Shave Club can reduce the size of its App from 230 MB to 30 MB! The result is that the WebP format is used to reduce the volume by seven times.

CMS WebP support

Then the platform support problem arises, whether you are using a CMS such as WordPress or Joomla, or simply a simple static site built by a PHP framework such as Laravel. Next we will introduce how to support Webp images on different platforms.

WordPress WebP

In fact, WordPress supports WebP easily. You can use our integrated Image Optimizer plug-in to automatically convert images to WebP when they are uploaded to the WordPress media repository.

Then you can use the free WordPress Cache Enabler plug-in to provide WebP images for visitors.

The point is that Cache Enabler is actually used to judge browser support, provide WebP for supported browsers, and provide JPEG or PNG for other browsers. In fact, it has automatically completed the switchover for you.

Joomla WebP

Yireo's free WebP Joomla extension allows you to enable WebP support with browser support. It detects the support of the browser for WebP, simple detection based on the user-agent (so that Chrome can be correctly matched) and additional JavaScript detection. If WebP is detected, the extension parses the HTML output to ensure that links that support images (png, jpg, and jpeg) are replaced by Webp images.

Magento WebP

Yireo's free WebP Magento extension allows you to enable WebP support with browser support. It detects the support of browsers for WebP, based on the user-agent simple detection (Chrome) and additional JavaScript detection (which can also match with other browsers ). If WebP is detected, the extension parses HTML output to ensure that links that support images (png, jpg, and jpeg) are replaced by Webp images.

WebP on other platforms

For other platforms, you should check how we provide WebP (how to deliver WebP ). Some platforms enable WebP support and may need to modify your

. Htaccess

File or Nginx configuration.

Summary

As you can see, WebP may be much more supportive than you initially thought. Of course, we should consider the browser market share and the current browsing data. For example, if more than 70% of the traffic comes from Chrome, it is significant to use WebP to accelerate the website. If you are using CMS, everything is simple, because there are many plug-ins to help you complete the conversion of WebP.

From: https://linux.cn: 443/article-7843-1.html

Address: http://www.linuxprobe.com/webp-versatile-what.html