Clamp to symbolize how data gets compressed.

Compression and decompression in the browser with the Compression Streams API

Write smaller web apps that don't need to ship their own compression or decompression library

Published on

The Compression Streams API is for compressing and decompressing streams of data using the gzip or deflate (or deflate-raw) formats.

With built in compression JavaScript applications do not need to include a compression library, making the download size of the application smaller. Stable Chrome and Safari Technology Preview now support this useful API. Compressing data is shown below.

const readableStream = await fetch('lorem.txt').then(
(response) => response.body
);
const compressedReadableStream = readableStream.pipeThrough(
new CompressionStream('gzip')
);

To decompress, pipe a compressed stream through the decompression stream.

const decompressedReadableStream = compressedReadableStream.pipeThrough(
new DecompressionStream('gzip')
);

Demo

Browser support

The Compression Streams API is supported from Chromium 80 and Safari Technology Preview 152. For other browsers, check CanIUse.

Acknowledgements

Hero image by Matt Artz on Unsplash.

Published on Improve article

Back

New in Chrome 105

Next

Optimizing Images with the Angular Image Directive

This site uses cookies to deliver and enhance the quality of its services and to analyze traffic. If you agree, cookies are also used to serve advertising and to personalize the content and advertisements that you see. Learn more about our use of cookies.