resize-images

A simple CLI tool to generate responsive image sizes from selected images.

This tool works on macOS and uses AppleScript and the sips command-line tool to resize images to specified dimensions.

Features

Select multiple images using a file picker. Resize images to 320px, 768px, and 1024px widths. Save resized images with the format <original_name>_.png in the same directory as the original file. Automatically open the directory containing the resized images after processing.

Requirements

macOS: This tool uses osascript (AppleScript) for file selection and sips for image resizing, both of which are macOS-specific utilities. Installation Install via npm

You can install responsive-image-generator globally using the following command:

npm install -g responsive-image-generator

Navigate to the Project Directory After installation, navigate to the directory where you want to run the tool.

Usage After installation, you can use the CLI tool with the following command:

resize-images

Steps

Run resize-images from your terminal.

A file picker will open, allowing you to select one or multiple images.

The tool will resize each selected image to three sizes: 320px, 768px, and 1024px. Resized images will be saved in the same directory as the originals, with the format <original_name>_.png.

After resizing, the tool automatically opens the directory containing the resized images.

resize-images

You will see output similar to this:

Resized to 320px: /path/to/image_320.png
Resized to 768px: /path/to/image_768.png
Resized to 1024px: /path/to/image_1024.png

Images resized successfully

Using the Generated Images in HTML and CSS

To make the most of the responsive images generated by this tool, you can use the following HTML and CSS examples.

HTML Example with srcset and sizes Attributes

<img
  src="/images/_320.png"
   srcset="
    /images/_320.png 320w,
    /images/_768.png 768w,
    /images/_1024.png 1024w
  "
  sizes="(min-width: 1024px) 1024px, (min-width: 600px) 768px, 100vw"
  alt="Responsive Image"
  class="responsive-image"
/>

CSS Example with Media Queries

You can also use CSS media queries to control the display size of the images based on the viewport:

/* Default style for small screens (mobile devices) */
.responsive-image {
  width: 100%;
  max-width: 320px;
}

/* Medium screen size: tablets */
@media (min-width: 600px) {
  .responsive-image {
    max-width: 768px;
  }
}

/* Large screen size: desktops */
@media (min-width: 1024px) {
  .responsive-image {
    max-width: 1024px;
  }
}

How It Works

The srcset attribute in HTML allows the browser to choose the best image size based on the viewport width: The sizes attribute specifies the conditions for each image size: (min-width: 1024px) 1024px: Uses the 1024px image for large screens. (min-width: 600px) 768px: Uses the 768px image for medium screens. 100vw: Uses 100% of the viewport width for smaller screens.

The CSS media queries provide a fallback to control the display size if srcset isn’t fully supported:

License

This package is licensed under the ISC License.