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

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.