grunt-sharp-optimize

Compression and conversion of images for grunt using sharp.

What is this

With this thing you can:

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

Features

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

How to use this

Installation

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.

---

Example of usage

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,
      },
    },
  },
});

⚠ Pay attention

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.

API

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

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

extname

Type:

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,
},

param

Type:

(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

):

alsoProcessOriginal

Type:

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,
},

extname_to_extname

Type:

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,
},

logLevel

Type:

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)

sharpOptions

Type:

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

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

Supported format names:

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

If you find a bug, please create an issue here.

If this project was useful to you, you can give it a ★ in repository.