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:

width: The width to resize the image to
height: The height to resize the image to
quality: The image quality percentage you want, for example ?quality=75
as: File format to use, for example: ?as=webp

Supported image formats: jpeg / jpg, png, webp, tiff, heic / heif and raw

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>