A simple, browser-based tool for batch processing images. Resize, rename, and download multiple images at once without any server uploads - everything happens right in your browser! This tool is designed to be simple and straightforward, but it can serve as a solid foundation for more complex use cases.

• Batch Resize: Resize multiple images simultaneously with custom dimensions
• Smart Cropping: Automatic focal point detection for intelligent cropping
• Batch Rename: Rename multiple images with custom prefixes and sequential numbering
• No Upload Required: All processing happens locally in your browser - your images never leave your device
• Batch Download: Download all processed images as a convenient ZIP file
• Preview & Select: View thumbnails and selectively choose which images to process
• Multiple Operations: Delete, resize, and rename images in one workflow

• A modern web browser (Chrome, Firefox, Safari, or Edge)
• No installation required!

1. Open the Tool: Simply open index.html in your web browser

2. Add Images:

   • Click "Add images" button or drag and drop images onto the drop zone
   • Supports JPG and PNG formats
   • You can add as many images as you need

3. Select Images:

   • Click "Continue" to see all your images
   • Use "Select all" or "Clear all" for quick selection
   • Or click individual images to select/deselect them

4. Process Your Images:

   To Resize:

   • Click "Resize selected"
   • Enter desired width and/or height in pixels
   • Check "Auto width" to maintain aspect ratio based on height
   • Check "Auto height" to maintain aspect ratio based on width
   • Check "Save dimensions as default" to remember your settings
   • Click "Proceed" to resize

   To Rename:

   • Click "Rename selected"
   • (Optional) Enter a prefix for your files (e.g., "vacation", "product")
   • Enter a starting number (e.g., "1" or "001" for zero-padded numbers)
   • Images will be renamed sequentially in the order they appear
   • Click "Proceed" to rename

   To Delete:

   • Click "Delete selected" to remove unwanted images from the batch

5. Download:

   • After processing, click "Download" to get all your images in a ZIP file
   • Extract the ZIP to access your processed images

This tool uses modern browser APIs to process images entirely on the client side:

• No Server Required: All image processing happens in your browser using JavaScript
• Privacy First: Your images are never uploaded to any server
• Smart Cropping: Uses the smartcrop.js library to intelligently identify focal points when cropping
• EXIF Handling: Automatically corrects image orientation based on EXIF data
• ZIP Generation: Creates downloadable ZIP archives using JSZip

• HTML5/CSS3: Modern, responsive interface
• JavaScript (ES6+): Client-side image processing
• Bootstrap 4: UI framework for responsive design
• Libraries:
  • JSZip: ZIP file generation
  • smartcrop.js: Intelligent image cropping
  • blueimp-load-image: Image loading with EXIF handling
  • FileSaver.js: File download functionality
  • Masonry: Grid layout
  • Viewer.js: Image preview functionality

batch-image-resizer/
├── index.html          # Main application page
├── video.html          # Video tutorial page
├── main.js             # Core image processing logic
├── viewer.js           # Image viewer functionality
├── style.css           # Custom styles
├── viewer.css          # Viewer styles
├── 2.png              # Drop zone icon
├── loading.gif        # Loading animation
└── README.md          # This file

• Preparing product photos for e-commerce websites
• Batch processing vacation photos before sharing
• Creating consistent image sizes for presentations
• Organizing and renaming large photo collections
• Generating thumbnails from full-size images
• Quick image format conversion (PNG to JPG)

• 100% Client-Side: All processing happens in your browser
• No Data Collection: We don't collect, store, or transmit any of your images
• No Tracking: No analytics or tracking scripts
• Offline Capable: Once loaded, works without internet (except for CDN libraries)

• Aspect Ratio: Use "Auto width" or "Auto height" to maintain proportions
• Zero-Padded Numbers: For better file sorting, use "001" instead of "1" as starting number
• Large Batches: The tool can handle many images, but processing time increases with quantity
• Preview: Click on any image thumbnail to view it in full size
• Keyboard Shortcuts: Use Tab and Enter to navigate the interface quickly

• Maximum image size depends on your browser's memory
• Very large batches (500+ images) may slow down processing
• Download button appears only after processing operations
• Requires a modern browser with HTML5 Canvas support

This project is open source and available for personal and commercial use.

Contributions, issues, and feature requests are welcome! Feel free to fork this project and submit pull requests.

If you encounter any issues or have questions, please open an issue on the repository.

Made with ❤️ for the developer community