As the saying goes: A picture is worth a thousand words. On the Web, images make it easier and easier for users to see more information, but they can be smaller than thousands of bytes or more. Studies have shown that images account for an average of 64% of an HTTP web page. In the case of such a high proportion of images, users have very high requirements for the volume of images.

We can compress the image to reduce the size of the image. But how do you reduce the size of your image without drastically reducing its quality? Traditional image formats, such as JPEG, PNG, GIF and so on, have not much room for optimization, and Google launched WebP image format in 2010. WebP image in the same quality, 25-34% smaller than JPG volume, 26% smaller than PNG, and WebP can do part of the dynamic GIF function, but also support transparency and distortion, distortion compression and other modes.

Browsers like Chrome, Firefox, and Microsoft Edge already support WebP. With the release of iOS 14 and macOS Big Sur, 11 years after WebP was released, Apple finally followed suit. Safari is starting to support WebP. So far, the mainstream browsers have officially supported WebP format, it is believed that WebP will be more widely deployed and supported in the future.

The origin of the WebP

At first, WebP was born because Google developed a WebM video format based on VP8 video encoding format. Google engineers realized that WebM format was very suitable for compression of key frames, so they developed WebP image format.

The main goal of WebP is to reduce the size of image files with the same image quality as JPEG format, thus reducing the sending time and traffic consumption of images on the Internet. Shortly after its release, WebP was integrated into Chrome and Android, and Google released libraries to support WebP for iOS apps and other platforms.

While JPEG only provides lossy compression, WebP provides both lossy and lossless compression:

  • Lossy WebP compression uses image encoding in the same way that video keyframes are compressed in VP8 video codecs. The coded part of the image is used to predict the uncoded part, and the image is subdivided for prediction processing. The finer the blocks are, the more accurate the prediction will be. After obtaining the coding value, the original image data is subtracted from the predicted data to obtain the difference value, and only the difference value is encoded to control the size;

  • Lossless WebP compression uses known image fragments to precisely reconstruct new pixels, optimized with local palettes in cases where matching values cannot be found.

WebP compression

WebP combines the advantages of multiple image file formats over other image formats. It can be good for compressing photos and other detailed images like JPEG, or displaying dynamic images like GIF, or supporting transparent images like PNG. According to Google’s tests, WebP lossless compressed images have 45% less file size than PNG images. Even after pngCrush and PNGOUT are used for PNG images, WebP can still reduce file size by 28%.

The same quality results in smaller images, which is the meaning of WebP. Reduce bandwidth consumption by compressing image volume, reduce traffic cost for online services, faster display and shorter image sharing time, and bring better user experience for website and mobile application users. E-commerce sites such as Taobao and JD.com, which have lots of product images, or gallery businesses such as Petal and Unsplash, have all started using WebP to speed up page loading.

Use WebP in your project

Given WebP’s many advantages and the fact that browser platforms are basically supported, how do you deploy WebP in your project?

We can first use webpack, gulp and other plug-ins to batch convert a batch of Pictures in WebP format, and then use labels in the front end to automatically load pictures in WebP format when the visiting end supports WebP.

<picture class="picture">
  <source type="image/webp" srcset="image.webp">
  <img class="image" src="image.jpg">
</picture>
Copy the code

Image.webp is loaded if the browser supports the WebP format, image.jpg is loaded otherwise.

Alternatively, we have a lot of pages that use “lazy loading” of images — usually putting the URL of the image in a custom attribute of the IMG element, and then using JS to assign the URL to the SRC attribute at the appropriate time. Using similar principles, we can assign different SRC values to the IMG element depending on whether the browser supports the WebP format, as shown in the pseudocode below.

$('[data-url]').each(function(item, index){
    var ext = window.__supportWebP__ ? '.webp' : ''
    $(this).attr('src', $(this).attr('data-url') + ext)
})
Copy the code

The above are some common project transformation implementation using WebP operation methods. But this kind of transformation involves code transformation, project redeployment, so is there a more elegant, more efficient way to make their web pages quickly use WebP?

At present, The cloud has supported WebP image format conversion, but also support WebP adaptive function. Click on the WebP adaptive function in the background of Youbai Cloud to determine whether the client browser supports WebP decoding through the CDN platform. If so, the WebP format picture will be returned; if not, the original picture will be returned. There is no need for any change in the client and source site.

In our practice, after the use of WebP format, the size of the picture is generally reduced by more than 1/3, which not only accelerates the loading speed of the web page /App, saves bandwidth access traffic, but also makes the user’s smooth and silky access experience to a new level. We also made a WebP compression effect experience page, you can also quickly experience the magic of WebP

Recommended reading

What’s behind doge.jpg, do you know?

Page does not pop up? It was hijacked!