How WebP Cuts Image Size by 40% and Ensures Cross‑Platform Compatibility

What is WebP?

WebP is an image format launched by Google in 2010 that provides effective compression, reducing file size while preserving visual clarity.

Compression advantage

At the same visual quality, a WebP image can be about 40% smaller than a JPEG image. For example, a 346 KB picture converted to WebP at a target quality of 80 becomes only 80 KB.

Compatibility issues

Support for WebP is good in Google‑related browsers, but many other platforms still lack native support.

Compatibility solutions

JavaScript detection

Load a base64‑encoded WebP image in an img element and check whether the width and height properties are set in the onload event; if they are, the browser supports WebP.

var img = new Image();
img.src = "data:image/webp;base64,......";
img.onload = function () {
    // img.width, img.height
    // ...
};

iOS

On iOS, the client can download a WebP image, transcode it to JPEG or PNG in real time on the front end, and display the standard image to the user, saving network loading time.

Android

Android 4.0 and later natively support WebP.

User download fallback

When a user initiates a download, provide the corresponding JPEG version of the image instead of WebP.