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