The culprit for the rapid expansion of the Web page is the exquisite picture

Absrtact: Baidu Weight query Webmaster trading Links Exchange Site monitoring Server monitoring SEO monitoring Whether you believe it or not, with the rapid development of the Internet Web page is also continuing to become larger. The culprit for the rapid expansion of the Web page is not extensive use

Baidu Weight Query Webmaster Trading Links Exchange Web site monitoring Server monitoring SEO monitoring

Whether you believe it or not, with the rapid development of the Internet, Web pages are 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-share some tips for optimizing the load speed of Web pages.

One way to compress images effectively 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, Mozilla's questions were resolved. But Firefox and IE are still not supported.

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 element, the future may be possible. Because the syntax is broadly similar, you can use the following code:

The above code can cover a variety of situations: browsers that support WEBP and elements, browsers that support but 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 issues to consider 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!