Image

Image assets can be imported and processed like any other asset in Parcel. As with any other asset you can import this asset from any other asset, so you can import images from html, css, js, ts, ...

ΒΆ Parcel image transformer

Using the Parcel transformer @parcel/transformer-image you can resize, change the format and quality of an image. To do this we added the possibility to define query parameters.

To do these image transformations we rely on the image transformation library Sharp, therefore we require you to install it locally using npm install sharp -D or yarn add sharp -D.

The query parameters you can use are:

Supported image formats: jpeg / jpg, png, webp, tiff, heic / heif, avif and raw. For gif support, you need to setup a custom libvips build.

A JavaScript example:

main.js:
import imageUrl from "url:./image.jpeg?as=webp&width=250";

An HTML example:

index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML Example</title>
</head>
<body>
<picture>
<source src="url:./image.jpeg?as=webp&width=800" type="image/webp" />
<source src="url:./image.jpeg?width=800" type="image/jpeg" />
<img src="url:./image.jpeg?width=200" alt="test image" />
</picture>
</body>
</html>