Control Site page size with Google WEBP picture format

Whether you believe it or not, with the rapid development of the Internet Web pages are also constantly growing.

The culprit for the rapid expansion of the Web page is not the extensive use of JavaScript libraries, CSS and endless shared buttons, but exquisite images. According to Httparchive's research, the picture occupies about 60% of the page's content. This means that most Web sites can compress pictures to reduce the size of the page itself. If you are interested in understanding Httparchive's research and how to optimize the loading speed of your Web page, recommend reading gbin1 past articles-sharing some tips for optimizing the speed of Web loading?

One of the effective ways to compress pictures is to use Google's WEBP image format, which can be reduced by 25% to 34% compared to the usual picture format. Although WEBP's potential for space-saving is a surprise, it is like the previous JPEG 2000 and other related results, and has not been widely supported by browsers.

Tip: WebP (pronounced "weppy"), a lossy compression graphics file format, derived from the image Encoding format VP8. Is Google's purchase of ON2 Technologies after the development of the format, issued under the BSD license terms.

To date, only Google Chrome and opera support the WEBP format (when using a mobile service provider's proxy browsing, both browsers automatically convert the picture to WEBP format). Mozilla did not support WEBP when it was first launched, but when the WEBP improved, all the problems that Mozilla posed were resolved. But Firefox and IE are still not supported at the moment.

However, as Opera's Bruce Lawson recently pointed out, using the sharp CSS magic, you can use WEBP on both Chrome and opera, while supporting JPG format. The code is as follows:

. mybackgroundimage {

Background-image:url ("Image.jpg");

Background-image:image ("IMAGE.WEBP" format (' WEBP '), "image.jpg");

}

The above code uses the new image fallbacks syntax in CCS image values and replaced Content Module level 4. Style modifiers are borrowed from @font-face to ensure that browsers do not download WEBP images without supporting WEBP.

Of course, this code is only useful for CSS background images, not most of the pictures provided by most websites. For pictures in the content, it is not easy to achieve the same effect at the moment, if the browser starts to support the proposed <picture> elements, the future may be possible. Because the <picture> syntax is roughly similar, you can use the following code:

<picture>

<source SRC=IMAGE.WEBP TYPE=IMAGE/WEBP >

<source src=image.png type=image/png >

<! --Fallback content-->

</picture>

The above code can cover a variety of situations: browsers that support WEBP and <picture> elements, browsers that support <picture> do not support WEBP, and browsers that are not supported at all. But it will take a while before this pseudocode really starts to work.

There are still other problems to be considered in the use of WEBP. For example, if you open a saved picture on a user's desktop, you may encounter problems when you open a webp picture.

Although WEBP is still immature, but his potential to reduce the size of the image is still a lot of his followers, I believe that will become an important web use picture Format!

Via nelly@-Geek community

Source: Help control Site page size with Google WEBP picture format