@parcel/transformer-image

What is @parcel/transformer-image?

@parcel/transformer-image is a Parcel plugin that allows you to transform and optimize images in your web projects. It supports various image formats and provides functionalities such as resizing, converting formats, and optimizing images for better performance.

What are @parcel/transformer-image's main functionalities?

Image Resizing

This feature allows you to resize images to specified widths. The code sample demonstrates how to configure the transformer to resize images to widths of 300, 600, and 1200 pixels.

module.exports = {
  "transformers": {
    "*.{png,jpg,jpeg}": [
      "@parcel/transformer-image"
    ]
  },
  "transformer": {
    "@parcel/transformer-image": {
      "sizes": [
        300, 600, 1200
      ]
    }
  }
};

Image Format Conversion

This feature allows you to convert images to different formats such as WebP and AVIF. The code sample shows how to configure the transformer to convert images to WebP and AVIF formats.

module.exports = {
  "transformers": {
    "*.{png,jpg,jpeg}": [
      "@parcel/transformer-image"
    ]
  },
  "transformer": {
    "@parcel/transformer-image": {
      "formats": {
        "webp": true,
        "avif": true
      }
    }
  }
};

Image Optimization

This feature allows you to optimize images by setting the quality level. The code sample demonstrates how to configure the transformer to optimize images with a quality setting of 80.

module.exports = {
  "transformers": {
    "*.{png,jpg,jpeg}": [
      "@parcel/transformer-image"
    ]
  },
  "transformer": {
    "@parcel/transformer-image": {
      "quality": 80
    }
  }
};

Other packages similar to @parcel/transformer-image

sharp

Sharp is a high-performance image processing library that allows you to resize, convert, and optimize images. It is highly configurable and supports a wide range of image formats. Compared to @parcel/transformer-image, Sharp is more versatile and can be used outside of the Parcel ecosystem.

imagemin

Imagemin is a popular image optimization tool that supports various plugins for different image formats. It focuses on reducing image file sizes while maintaining quality. Imagemin can be used as a standalone tool or integrated into build processes, making it a flexible alternative to @parcel/transformer-image.

gulp-imagemin

Gulp-imagemin is a Gulp plugin for image optimization using Imagemin. It allows you to integrate image optimization into your Gulp build process. While @parcel/transformer-image is specific to Parcel, gulp-imagemin is tailored for Gulp users.

README

The README file is missing