Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/joaquimnetocel/images-folder-optimizer
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.
https://github.com/joaquimnetocel/images-folder-optimizer
avif gif image-optimization image-processing image-resize jpeg png tiff webp
Last synced: 3 months ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/joaquimnetocel/images-folder-optimizer
- Owner: joaquimnetocel
- Created: 2023-09-23T17:19:02.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-10-03T22:51:27.000Z (over 1 year ago)
- Last Synced: 2024-10-18T06:38:29.694Z (4 months ago)
- Topics: avif, gif, image-optimization, image-processing, image-resize, jpeg, png, tiff, webp
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/images-folder-optimizer
- Size: 27.2 MB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# images-folder-optimizer
A high performance package that uses [sharp.js](https://sharp.pixelplumbing.com/) 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.
    [](https://twitter.com/joaquimnetocel)
## 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:
```bash
npm install -D images-folder-optimizer
```
- CREATE A JAVASCRIPT (OR TYPESCRIPT) FILE, AS `example.js`:
```javascript
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:
```bash
node example.js
```
- CHECK THE NEW IMAGES IN `static/images/optimized`.
## BUILT-IN EXAMPLES
YOU CAN FIND BUILT-IN EXAMPLES IN `src/examples/` [[LINK](https://github.com/joaquimnetocel/images-folder-optimizer/tree/main/src/examples)]. LET'S TRY ONE OF THEM:
```bash
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](https://sharp.pixelplumbing.com/api-resize#resize) | NO | - |
| objectPngOptions | SHARP.JS OPTIONS FOR PNG TRANSFORMATIONS | [CHECK IT HERE](https://sharp.pixelplumbing.com/api-output#png) | NO | - |
| objectJpegOptions | SHARP.JS OPTIONS FOR JPG TRANSFORMATIONS | [CHECK IT HERE](https://sharp.pixelplumbing.com/api-output#jpeg) | NO | - |
| objectWebpOptions | SHARP.JS OPTIONS FOR WEBP TRANSFORMATIONS | [CHECK IT HERE](https://sharp.pixelplumbing.com/api-output#webp) | NO | - |
| objectAvifOptions | SHARP.JS OPTIONS FOR AVIF TRANSFORMATIONS | [CHECK IT HERE](https://sharp.pixelplumbing.com/api-output#avif) | NO | - |
| objectAvifOptions | SHARP.JS OPTIONS FOR AVIF TRANSFORMATIONS | [CHECK IT HERE](https://sharp.pixelplumbing.com/api-output#avif) | NO | - |
| objectTiffOptions | SHARP.JS OPTIONS FOR TIFF TRANSFORMATIONS | [CHECK IT HERE](https://sharp.pixelplumbing.com/api-output#tiff) | NO | - |
| objectGifOptions | SHARP.JS OPTIONS FOR GIF TRANSFORMATIONS | [CHECK IT HERE](https://sharp.pixelplumbing.com/api-output#gif) | NO | - |
| objectBlurOptions | SHARP.JS OPTIONS FOR BLUR TRANSFORMATIONS | [CHECK IT HERE](https://sharp.pixelplumbing.com/api-operation#blur) | 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](https://sharp.pixelplumbing.com/api-resize#resize) | NO | - |
| stringGravity | WATERMARK POSITION | 'centre' OR 'northwest' OR 'northeast' OR 'southeast' OR 'southwest' | NO | `centre` |