Compression and conversion of images for grunt using sharp.

• Optimize your images.
• Convert your images to other formats (including, but not limited to .webp and .avif).

• Using the sharp plugin.
• A beautiful log system.
• Flexible API.
• Supported formats: .png .jpg/jpeg .webp .avif .tiff .heif .gif

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm i grunt-sharp-optimize

OR

yarn add grunt-sharp-optimize

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-sharp-optimize');

Or use the load-grunt-tasks plugin.

grunt.initConfig({
  sharp: {
    files: {
      src: 'your_src_images/**/*.{gif,webp,avif,png,jpg,jpeg,svg}',
      dest: 'your_dest_images/',
    },
    options: {
      logLevel: 'small',

      webp: {
        quality: 80,
        lossless: false,
        alsoProcessOriginal: true,
      },

      avif: {
        quality: 100,
        lossless: true,
        effort: 4,
      },

      gif_to_webp: {
        quality: 90,
      },

      png_to_avif: {},

      jpg_to_jpg: {
        quality: 80,
        mozjpeg: true,
      },
    },
  },
});

Using this plugin together with the grunt-newer plugin and the like may not allow it to work correctly. This plugin has a built-in system that replaces the functionality of similar plugins.

sharp: {
  ...,
  options: {
    sharpOptions: {},
    logLevel: 'codename',

    extname: {
      param: value,
    },
    extname_to_extname: {
      param: value,
    },
  },
}

Type: object
An object that allows you to convert all images into images of a specific type.

// example, all images will be converted to .avif
avif: {
  param: value,
},

Type: any (depends on the parameter)
Option for an output image.
To familiarize yourself with the available options, refer to the plugin documentation (for example, this section for .jpeg):

Type: boolean
Default value: false
It also allows you to optimize and move the original files. It only works for the type extname: {} parameter.

avif: {
  // If true, the originals will also be optimized and transferred.
  alsoProcessOriginal: true,
},

Type: object
An object that allows you to convert images of a specific type into images of a specific type.
Does not transmit originals.

// example, all images in the format .jpg will be converted to .avif
jpg_to_avif: {
  param: value,
},
// you can also optimize images without changing the extension
jpg_to_jpg: {
  param: value,
},

Type: string
Default value: small
Can get the value: small | full | ''
Allows you to change the logging.

// usage example
options: {
  logLevel: 'full',
  ...,
}

// Log if the value of logLevel is equal to 'small' (default value):
yourImage.jpg => webp

// Log if the value of logLevel is equal to 'full':
The file the_absolute_path_to_your/image.jpg was processed to image.webp

// Log if the value of logLevel is equal to '' (or other value):

(the log is disabled)

Type: object
If you need to pass certain parameters directly to the sharp plugin, use this parameter.

// usage example
options: {
  sharpOptions: {
    animated: true,
    limitInputPixels: false,
  },
  ...,
}

• png
• jpg | jpeg
• webp
• avif
• tiff
• heif
• gif