Home > Developer > Web Develop
WEBP is an image format introduced by Google, which is based on VP8 encoding, which can compress images significantly. As with JPEG, WEBP is also a lossy compression, but in the same picture, the WEBP format is 40% smaller than a JPEG image.
Wiki
Baidu Encyclopedia
It is an open source project where we can get the source code and related tools.
Browser supportApparently, Google Chrome was introduced first, and Opera 11.10 added support for WEBP.
If you can see the picture below, your browser supports WEBP.
Support for more browsers!The advantages of WEBP are obvious, but the lack of mainstream browser support makes it still impossible to promote. but that doesn't prevent us from trying!
Most browsers themselves cannot decode the WEBP format, but can be handed to us to implement! Although the Web page script is not competent, but with the help of flash technology, we can fully achieve efficient and fast decoding.
And, almost all browsers support flash ...
WEBP Plug-inThe current version total 3 files: webp.js, webp.swf and WEBP.HTC. Download the package file here.
You can use WEBP by inserting the following code between <body></body>.
<script type="text/javascript" src="WebP.js"></script>
The plugin will capture the IMG elements in the page using the WEBP format and replace them with Flash. Image decoding and display are done in Flash, so the current version of CSS settings for the background image is not valid.
Of course, as a substitute for the JPEG format, it makes sense to use large images only, otherwise too much decoding consumes a lot of resources.
Demo1: The simplest kind of columnPreview in New Window
Demo2: Preserve Original propertiesPreview in New Window
Demo3: Preserve Original style<style>img{filter:alpha (opacity=50); opacity:0.5;}. T{border:blue dotted 2px;} </style>Preview in New Window
Demo4: Supports dynamic onboarding<div id= "Con" ></div><script type= "Text/javascript" >var d = document.getElementById ("con"); function Add () {d.innerhtml = " ';} Function del () {d.innerhtml = "";} </script><button onclick= "Add ()" > Load </button><button onclick= "del ()" > Remove </button>Preview in New Window
This article transferred from: http://www.etherdream.com/WebP/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
