images-folder-optimizer

A high performance package that uses sharp.js to recursively optimize, transform and convert images from a folder to smaller, web-friendly JPEG, PNG, WebP, GIF and AVIF images. It is also possible to add watermark to the output images controlling opacity and positioning.

FEATURES

• PROCCESS ALL IMAGE FILES IN A FOLDER AT ONCE
• SIGNIFICANT REDUCTION IN IMAGE SIZE
• SCAN FOR IMAGE FILES RECURSIVELY ON ALL SUBFOLDERS
• CONVERSION BETWEEN IMAGE FORMATS, CHOOSING BOTH INPUT AND OUTPUT FORMATS
• IMAGE RESIZING
• IMAGE TRANSFORMATIONS (ONLY BLUR FOR NOW)
• POSSIBILITY TO OVERLAP A WATERMARK IMAGE CONTROLLING ITS OPACITY
• FULL TYPESCRIPT SUPPORT
• FULL CONTROL FOR SHARP.JS PARAMETERS

HOW TO USE IN YOUR PROJECT

• INSTALL THE PACKAGE:

  npm install -D images-folder-optimizer

• CREATE A JAVASCRIPT (OR TYPESCRIPT) FILE, AS example.js:

  import { functionOptimizeImages } from 'images-folder-optimizer';
  
  functionOptimizeImages({
      stringOriginFolder: 'static/images/originals',
      stringDestinationFolder: 'static/images/optimized',
      arrayOriginFormats: ['jpg', 'png'],
      arrayDestinationFormats: ['webp', 'avif'],
  }).then((results) => {
      console.table(results);
  });

• RUN THE FILE:

  node example.js

• CHECK THE NEW IMAGES IN static/images/optimized.

BUILT-IN EXAMPLES

YOU CAN FIND BUILT-IN EXAMPLES IN src/examples/ [LINK]. LET'S TRY ONE OF THEM:

npx tsc
node dist/examples/exampleFormatConversion.js

PARAMETERS AND TYPING

• PARAMETERS FOR functionOptimizeImages:

| PARAMETER | DESCRIPTION | TYPE | REQUIRED | DEFAULT | | - | - | - | - | - | | stringOriginFolder | THE FOLDER WITH THE ORIGINAL IMAGES | string | YES | - | | stringDestinationFolder | THE FOLDER WHERE THE OPTIMIZED IMAGES ARE GOING TO BE SAVED | string | YES | - | | arrayOriginFormats | FORMATS OF THE ORIGINAL IMAGES | ARRAY WITH ELEMENTS BEEING 'webp' OR 'avif' OR 'png' OR 'jpg' OR 'tiff' OR 'gif' | YES | - | | arrayDestinationFormats | FORMATS FOR THE NEW IMAGES | ARRAY WITH ELEMENTS BEEING 'webp' OR 'avif' OR 'png' OR 'jpg' OR 'tiff' OR 'gif' OR 'svg' | YES | - | | stringFileNameSuffix | SUFIX FOR THE NEW FILE NAMES. EVERY ORIGINAL FILE NAME WITH THIS SUFIX IS GOING TO BE IGNORED | NO | - | | objectResizeOptions | SHARP.JS OPTIONS FOR IMAGE RESIZING | CHECK IT HERE | NO | - | | objectPngOptions | SHARP.JS OPTIONS FOR PNG TRANSFORMATIONS | CHECK IT HERE | NO | - | | objectJpegOptions | SHARP.JS OPTIONS FOR JPG TRANSFORMATIONS | CHECK IT HERE | NO | - | | objectWebpOptions | SHARP.JS OPTIONS FOR WEBP TRANSFORMATIONS | CHECK IT HERE | NO | - | | objectAvifOptions | SHARP.JS OPTIONS FOR AVIF TRANSFORMATIONS | CHECK IT HERE | NO | - | | objectAvifOptions | SHARP.JS OPTIONS FOR AVIF TRANSFORMATIONS | CHECK IT HERE | NO | - | | objectTiffOptions | SHARP.JS OPTIONS FOR TIFF TRANSFORMATIONS | CHECK IT HERE | NO | - | | objectGifOptions | SHARP.JS OPTIONS FOR GIF TRANSFORMATIONS | CHECK IT HERE | NO | - | | objectBlurOptions | SHARP.JS OPTIONS FOR BLUR TRANSFORMATIONS | CHECK IT HERE | NO | - | | objectWatermarkOptions | OBJECT WITH OPTIONS FOR WATERMARK INSERTION | typeWatermarkOptions DESCRIBED BELLOW | NO | - |

• typeWatermarkOptions TYPE:

| KEY | DESCRIPTION | TYPE | REQUIRED | DEFAULT | | - | - | - | - | - | | stringWatermarkFile | PATH OF THE IMAGE TO USE AS WATERMARK | string | YES | - | | numberOpacity | WATERMARK OPACITY | number BETWEEN 0 AND 1 | YES | - | | objectResizeOptions | SHARP.JS OPTIONS FOR RESIZING THE WATERMARK IMAGE | CHECK IT HERE | NO | - | | stringGravity | WATERMARK POSITION | 'centre' OR 'northwest' OR 'northeast' OR 'southeast' OR 'southwest' | NO | centre |