Why is everyone using WebP?
WebP is a new image format proposed by Google in 2010. By today's standards, it can no longer be considered "new" technology, given the emergence of even newer formats like JPEG XL and AVIF. However, in daily work, we often encounter images saved with the .webp extension. So what makes WebP so magical that more and more websites are "abandoning" commonly used PNG and JPG formats in favor of it?
Understanding WebP
For a long time, loading speed has been one of the most critical factors in website optimization. Both visitors and search engines consider the time it takes to load a page as an important evaluation metric. Streamlined code or caching mechanisms are part of the solution for faster website loading, but the size of images displayed on web pages also affects loading speed. This is where WebP comes into play.
The WebP image format originates from the VP8 video codec, which is part of the WebM video container, representing a single compressed frame of the WebM video format. A powerful feature of the VP8 codec is its ability to perform intra-frame compression, compressing each frame of the video and then compressing the differences between frames. WebP's compression algorithms include both lossy and lossless compression.
Lossy Compression Algorithm: Based on the VP8 video codec, it reduces file size by sacrificing some image details. The lossy compression algorithm selects the optimal compression method and parameters based on image characteristics, color distribution, and other factors to minimize file size.
Lossless Compression Algorithm: Based on the LZ77 algorithm and ANS encoder, it reduces file size while preserving the complete image. The lossless compression algorithm also selects the optimal compression method and parameters based on image characteristics and color distribution.
WebP's efficient compression and fast loading speed make it an ideal format for web design. It is widely used on many websites and applications, including Google Chrome, YouTube, Facebook, Pinterest, and WordPress. While a few years ago some browsers did not support WebP, today, apart from the retired IE browser, most browsers have opened up support for WebP.
Advantages of WebP
For websites with a large number of images, most of them use WebP format, which not only reduces bandwidth usage but also decreases loading times for users, improving their experience. Currently, WebP has become the preferred image format for mainstream websites.
Smaller File Size
Compared to traditional PNG, JPG, and even animated GIF formats, WebP takes up less space. According to Google's tests, WebP images can be 26%-34% smaller than JPEG images and 25%-34% smaller than PNG images.
Faster Loading Speed
Due to their smaller file size, WebP images load and display faster, enhancing user experience. This is particularly beneficial on mobile devices and low-bandwidth environments, where WebP images reduce waiting times and data consumption.
High-Quality Image Display
WebP images provide high-quality display, especially in lossy compression, where they maintain better image quality than JPEG. This is because WebP uses the VP8 video codec's compression algorithm, which preserves better image quality even when sacrificing some details.
Supports Transparency and Animation
WebP images support both lossy and lossless compression, as well as transparency and animation effects. When handling transparency and animation, WebP images can be smaller than GIF and PNG formats while maintaining better display quality.
Using WebP in Web Pages
Given how useful WebP is, how can we use WebP images in web pages? It's actually quite simple—we can embed WebP images using HTML code. For example: xml
In the code above, the <picture> element contains two <source> elements and one <img> element. The <source> elements specify different image formats, while the <img> element serves as the fallback image if none of the formats are supported. Replacement: For browsers that do not support WebP, JavaScript can be used for detection and replacement. For example: stylus
In the code above, JavaScript creates a new Image object and sets its src attribute to a WebP image. If the image loads successfully, the <img> element's src attribute is set to the WebP image; otherwise, it defaults to another format.
Some users may worry that not all browsers support WebP, such as IE. Here, we strongly recommend Upyun's WebP adaptive feature, which requires no changes to the website server or front-end code. Simply enable the WebP adaptive feature in the backend, and the CDN platform will intelligently determine whether the client browser supports WebP decoding. If supported, it returns the WebP image; otherwise, it returns the original image—no changes are needed on the client or origin server.
Technology evolves rapidly, and in recent years, two emerging image formats—JPEG XL and AVIF—have begun gaining popularity. These formats surpass WebP in compression efficiency and detail retention to some extent. Let's look forward to the future development of image formats.