Image Optimization Script

A Node.js script to resize and optimize images to multiple specified widths. This script leverages Sharp for fast image processing and includes customizable options for maximum width, output directory, and source image paths.

Features

• Resize images to predefined widths for responsive designs.
• Supports common image formats: JPEG, PNG, GIF.
• Output to a specified directory with the ability to control the maximum image width.
• Creates optimized images with quality: 80 by default.

Requirements

• Node.js (v14 or later recommended)
• Sharp library

Installation

1. Clone the repository or copy the script file.

2. Install dependencies by running:

   npm install

Usage

Run the script from the command line with the following options:

node index.js --source <source_images> [--max <max_width>] [--output <output_directory>]

Options

• --source (or -s): (Required) The path(s) to the source image(s). Multiple paths should be comma-separated.
• --max (or -m): (Optional) The maximum width for the optimized images (default: 5120).
• --output (or -o): (Optional) The directory where the optimized images will be saved (default: ./output).

Example Commands

1. Basic Usage

   Optimize a single image to the default output directory with the maximum width of 5120px.

   node index.js --source images/awesome.jpg

2. Custom Output Directory

   Save optimized images to a custom output directory:

   node index.js --source images/awesome.jpg --output ./optimized-images

3. Specify Multiple Images

   Optimize multiple images at once:

   node index.js --source "images/awesome.jpg,images/beautiful.png"

4. Set a Maximum Width

   Restrict the maximum width for optimized images to 2048px:

   node index.js --source images/awesome.jpg --max 2048

Example Output

For an image named awesome.jpg, with --max 1792, the script will generate resized versions of the image in various sizes (up to 1792px in width) and save them in the specified output directory:

• awesome-320.jpg
• awesome-512.jpg
• awesome-1024.jpg
• awesome-1536.jpg
• awesome-1792.jpg

Example Components

React

// Responsive Image Component
// Example usage:
// <ResponsiveImage imagePath="/path/to/awesome.jpg" maxWidth={1792} sizes="(max-width: 1792px) 100vw, 1792px" />

import React from "react";

interface ResponsiveImageProps {
  imagePath: string;
  maxWidth?: number;
  sizes?: string;
}

const widths = [
  320, 440, 512, 768, 1024, 1280, 1536, 1792, 2048, 2560, 3072, 3584, 5120,
];

export const ResponsiveImage: React.FC<ResponsiveImageProps> = ({
  imagePath,
  maxWidth = Math.max(...widths),
  sizes,
}) => {
  // Generate the srcset based on the available widths
  const srcSet = widths
    .filter((width) => width <= maxWidth) // Filter widths to only include those <= maxWidth
    .map((width) => `${imagePath.replace(".jpg", `-${width}.jpg`)} ${width}w`)
    .join(", ");

  return (
    <img
      src={`${imagePath.replace(".jpg", `-${maxWidth}.jpg`)}`} // Default src to the max width image
      srcSet={srcSet}
      sizes={sizes || `(max-width: ${maxWidth}px) 100vw, ${maxWidth}px`} // Default sizes if not provided
      alt=""
      style={{ maxWidth: `${maxWidth}px`, width: "100%", height: "auto" }}
    />
  );
};

Notes

• Only images in JPEG, PNG, or GIF formats are supported.
• The script will skip any image widths exceeding the specified max width.
• The output directory will be created if it doesn't already exist.

License

This script is open-source and free to use. Feel free to modify it as needed. 🤘