Parcel 2: Compression and Image Optimization

[devongovett]

This is an epic level RFC to summarize a project to support compression and image optimization in Parcel 2. The details of each specific plugin will be contained in their own tickets, linked below.

Overview

Parcel is a build tool for your entire application. Unlike other bundlers, it includes native support for all of your code and assets, not just your JavaScript. Because of this, we can perform a lot more application wide optimizations that other tools cannot. One of these areas we can support is automatic compression and image optimization across your whole app, regardless of where your images are referenced from (e.g. HTML, CSS, JS, etc.). We are well positioned to provide best practice optimizations when building for production completely automatically.

Text asset compression

Text assets like HTML, CSS, JS, and SVG all benefit from compression with formats like gzip and Brotli. We should support plugins to let users enable this for their applications. Sometimes this is automatically handled by servers, but other times, such as when uploading to a file storage service like S3, it needs to be done in advance as part of the build. For this reason, we won't include these compression plugins in the default config, but it's fairly easy for users to enable them via .parcelrc.

{
  "extends": "@parcel/config-default",
  "optimizers": {
    "*.{js,css,html,svg}": ["...", "@parcel/optimizer-gzip"]
  }
}

The "..." syntax ensures that any other optimizers defined in @parcel/config-default for JS, CSS, etc. (e.g. Uglify) are run prior to gzipping.

Specific issues:

• @parcel/optimizer-gzip
• @parcel/optimizer-brotli

Image compression and resizing

Images can be some of the largest assets on a website, so it is imperative that they are resized to their displayed size and optimized prior to serving them to users. Parcel is in a great position to do this automatically as we already process all of the source code that would reference images, e.g. HTML, CSS, JS, etc. We should support plugins to optimize various image formats with best of breed image optimization tools, along with plugins to resize images to display sizes automatically.

Issues for image optimizers:

• @parcel/optimizer-mozjpeg
• @parcel/optimizer-pngquant
• @parcel/optimizer-svgo

Note: these are just a few to start with. Others could be added later.

Image resizing is also very important. Source images are often too large to ship to users, especially those on small devices like phones on slow cellular networks. With the <img srcset> attribute and the <picture> element it's now possible to ship different versions of an image at different sizes and resolutions to different devices. However, it can be difficult to generate all of the permutations of an image you'll need manually. Parcel can handle this automatically, by converting normal <img> references to <picture> with various resolutions and formats automatically.

In addition, we can support converting images to modern web-friendly image formats like WebP automatically. For example, HTML like this:

<img src="image.jpg" width="200">

could be transformed into HTML like this automatically, with all of the images automatically transformed and resized:

<picture>
  <source type="image/webp" srcset="image-200.webp, image-400.webp 2x">
  <source type="image/jpeg" srcset="image-200.jpg, image-400.jpg 2x">
  <img src="image-200.jpg" width="200">
</picture>

Issues for resizing and transformation plugins:

• @parcel/transformer-webp
• @parcel/transformer-image-resize
• @parcel/transformer-html-images

Feedback

Please leave feedback on this project in the comments below. For feedback on specific plugins, please comment on their respective individual issues.

[wbinnssmith]

How should compression optimizers allow for creating multiple different outputs, e.g. an uncompressed bundle.js, as well as compressed bundle.js.gz, bundle.js.br alongside one another?

[devongovett]

This is implemented by @parcel/optimizer-image