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