Sep 10, 2024 07:00:00

By using the image compression format 'WebP' when compressing an entire website, it is possible to achieve a compression rate higher than gzip.

When browsing a website, compressing and transferring various resources such as images and documents makes it easier to view the page comfortably even on a thin connection. Engineer Alisa Sileneva announced that a certain degree of compression can be achieved by using '

WebP ', which was developed for image compression, to compress websites.

WebP: The WebPage compression format | purplesyringa's blog
https://purplesyringa.moe/blog/webp-the-webpage-compression-format/

Many browsers support formats such as gzip and Brotli, and web servers use different formats depending on the situation. gzip can be used in almost all cases because it is fast and has a light load, but Brotli has a higher compression rate than gzip but takes longer to process.

Sireneva wanted to use Brotli to make her site lighter, but GitHub Pages, where she hosted her blog, didn't support Brotli, so the longest post on her blog required 92KB of gzip compression instead of 37KB for Brotli compression.

Although Sireneva tried to manually deal with Brotli compression, the shortest JavaScript code required to decompress Brotli was 71KB, which was counterproductive, and the Brotli decoder built into the browser could not be used due to the API specification .

So Sireneva came up with the idea of using image compression. If it's compressed into an image format, it can be decompressed through the browser's built-in canvas API . Sireneva considered GIF and PNG formats, but decided to use WebP.

The results of Mr. Sileneva's test of the compression ratio of various files are shown in the figure below. WebP, shown in green, has a higher compression ratio than gzip, shown in blue, and in some files it achieves a compression ratio approaching Brotli.

The code for decompressing WebP looks like this. However, since the Canvas API is widely used for fingerprinting, there is a problem that noise is mixed in and typos are mixed in the output HTML when 'Strict Tracking Protection' is enabled in Firefox.

In fact, if you compress a web page in WebP format and display it as an image, it will look like the image below.