gulp-sharp-optimize-images

gulp-sharp-optimize-images

Tested and works with gulp 5.0.0 and 4.0.2.

Compression and conversion of images for gulp 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.
• Has a minimum of dependencies.
• Supported formats: .png .jpg/jpeg .webp .avif .tiff .heif .gif

Why is this

• imagemin is unmaintained, see the issue.
• gulp-libsquoosh uses the outdated library @squoosh/lib, which does not have support for node > 16.0.0. In addition, the squoosh lib is no longer maintained.
• @donmahallem/gulp-sharp does not have normal documentation.

How to use this

Installation

npm i --D gulp-sharp-optimize-images

OR

yarn add gulp-sharp-optimize-images -D

Example of usage

import sharpOptimizeImages from 'gulp-sharp-optimize-images';
import gulp from 'gulp';

export function yourImages() {
  return gulp
    .src('yourSrcImagePath')
    .pipe(
      sharpOptimizeImages({
        webp: {
          quality: 80,
          lossless: false,
          alsoProcessOriginal: true,
        },
        avif: {
          quality: 100,
          lossless: true,
          effort: 4,
        },
        jpg_to_heif: {
          quality: 90,
        },
        png_to_avif: {},

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

    .pipe(gulp.dest('yourDistImagePath'));
}

API

sharpOptimizeImages({
  outputImageExtname: {
    param: value,
  },
  imageExtname_to_imageExtname: {
    param: value,
  },
});

outputImageExtname

Type: object
An object that allows you to convert all images into images of a specific type.
Also optimizes and transmits the original.

// example, all images will be converted to avif.
avif: {
  // If true, the originals will also be optimized and transferred.
  alsoProcessOriginal: false,

  param: value,
},

param

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): https://sharp.pixelplumbing.com/api-output#jpeg

alsoProcessOriginal

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

imageExtname_to_imageExtname

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

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

logLevel

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

// usage example
sharpOptimizeImages({
  logLevel: 'small',
  ...
});

// 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)

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.