Skip to content

This is a high speed package that uses Sharp.js to recurively transform, convert and optimize images from a folder to smaller, web-friendly JPEG, PNG, WebP, GIF and AVIF images. It is also possible to add watermark to the transformed/optimized images.

Notifications You must be signed in to change notification settings

joaquimnetocel/images-folder-optimizer

Repository files navigation

images-folder-optimizer

LOGO

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.

GITHUB VERSION NPM VERSION NPM Downloads NPM License Twitter

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

About

This is a high speed package that uses Sharp.js to recurively transform, convert and optimize images from a folder to smaller, web-friendly JPEG, PNG, WebP, GIF and AVIF images. It is also possible to add watermark to the transformed/optimized images.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published