img-webp-resizes v1.0.0

img-webp-resizes

A lightweight Node.js utility for converting images to WebP format and generating responsive resized images with customizable breakpoints. Includes both server-side processing and client-side utility functions for rendering responsive images.

Features

• Automatic conversion of images to WebP format
• Resizing images based on customizable breakpoints (default: TailwindCSS breakpoints)
• Support for both local and remote images
• Generation of JSON files containing paths to the processed images
• Flexible configuration to meet specific requirements
• Client-side utility for rendering responsive images

Installation

Install the package via npm:

npm install img-webp-resizes

Usage

Process a Single Image

import { processImage } from 'img-webp-resizes';

const imagePath = './src/images/example.jpg';
const outputDir = './img';

await processImage(imagePath, outputDir);

Exemple :

await processImage('https://domaine.com/image1.jpg','./img', { breakpoints: [100,200,300] });

Process Multiple Images

import { processImages } from 'img-webp-resizes';

const imagesPaths = ['./src/images/image1.jpg', './src/images/image2.jpg'];
const outputDir = './img';
const options = {
    breakpoints: [300, 600, 900] // Custom resizing breakpoints
};

await processImages(imagesPaths, outputDir, options);

Exemple :

await processImages(['https://domaine.com/image1.jpg', './image2.png'], './img', { breakpoints: [] });

Options

The processImage and processImages functions accept an options object to customize behavior:

JSON Output

For each processed image, a JSON file is generated containing the paths to the resized images, with keys representing the breakpoints. Example:

{
  "640": "./img/output/example-640.webp",
  "768": "./img/output/example-768.webp",
  "1024": "./img/output/example-1024.webp",
  "1280": "./img/output/example-1280.webp",
  "full": "./img/output/example.webp"
}

Server-Side Processing

Import and Process Single Image

imgRendered(originPath: string, attributes?: Record<string, string | boolean>): HTMLElement

Generates a responsive image element (<picture> tag) based on the JSON data generated during server-side processing.

• originPath: Path to the original image.
• attributes: Additional attributes for the <img> tag (e.g., alt, class, ...).

import { imgRendered } from "img-webp-resizes";

const imageElement = imgRendered('./output/example.jpg', {
  alt: 'Example Image',
  class: 'responsive-img',
});

document.body.appendChild(imageElement);

Author

Developed by Jordan Dechappe.

Licence

This project is licensed under the MIT License.