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
as: File format to use, for example:
Supported image formats:
gif support, you need to setup a custom libvips build.
An HTML example: