Image Batch Renamer

Introduction

Photographers returning from a shoot, e-commerce managers uploading product catalogs, and developers organizing design assets all face the same frustrating problem: images with useless auto-generated names like IMG_8847.jpg, DSC06291.png, or screenshot (12).webp. Renaming them one by one in Windows Explorer is tedious and error-prone.

This Image Batch Renamer lets you upload as many images as you need, define a naming pattern (prefix, suffix, and sequential counter), preview the new names, edit any individual name inline, and download everything as a ZIP — without a single file ever leaving your browser.

Technical & Concept Breakdown

How the renaming pattern works:

Each filename is constructed as:

[prefix][original_or_counter][suffix].[extension]

Example with prefix = "product_", suffix = "_v2", counter enabled starting at 1:

• IMG_001.jpg → product_001_v2.jpg
• IMG_002.jpg → product_002_v2.jpg
• DSC_199.jpg → product_003_v2.jpg

Pattern options:

• Prefix — text prepended before the name
• Suffix — text appended after the name, before the extension
• Counter — replaces the original filename with a zero-padded sequential number (001, 002, 003...), or is appended to it
• Inline Edit — click any row to type any arbitrary name, overriding the pattern for that file

ZIP generation with JSZip: Once names are finalized, the JSZip library creates an in-memory ZIP archive:

const zip = new JSZip();
files.forEach((file, i) => {
  zip.file(newNames[i], file);  // adds the original binary with a new name
});
const blob = await zip.generateAsync({ type: 'blob' });

The browser then triggers a download of the ZIP — no server involved. The original image data is preserved exactly (no re-encoding, no quality loss).

The extension is always preserved from the original file (.jpg stays .jpg) unless explicitly changed in an inline edit.

Real-World Use Cases

Photographers: Rename hundreds of RAW exports from DSC_0001.jpg to 2026-02-client-name-001.jpg before delivering to a client. Professional, searchable, and organized.

E-commerce Teams: Product images from suppliers often arrive with supplier part numbers as filenames. Rename them to match your own SKU system in bulk before uploading to Shopify, WooCommerce, or Amazon.

Web Developers: Rename design asset exports (icons, illustrations, screenshots) to match file naming conventions (`icon-home-d...