ImageResizer

A browser-based image resizer that shows estimated output file size before committing. Single HTML file architecture — no server required, no installation needed.

Features

Image Loading

• Drag & Drop — Drop images directly onto the page
• File Picker — Click "Choose Files" to browse and select
• Clipboard Paste — Paste images with Ctrl+V / Cmd+V
• Batch Loading — Load multiple images at once

Resizing Options

• Percentage Scaling — Quick presets (25%, 50%, 75%, 100%, 150%, 200%) or custom 1-500%
• Pixel Dimensions — Set exact width and/or height
• Preset Sizes — Thumbnail (150x150), Small (320x240), Medium (640x480), HD (1280x720), Full HD (1920x1080), 4K (3840x2160), Square 1:1 (1080x1080)
• Aspect Ratio Lock — Maintain proportions when resizing

Output Settings

• Quality Slider — Adjust compression level (10%-100%) for lossy formats
• Format Conversion — Convert between PNG, JPEG, GIF, and WebP
• Real-time File Size Estimation — See estimated output size before downloading
• Size Comparison — Shows percentage reduction/increase from original

Download Options

• Single Download — Download individual resized image
• Batch ZIP Download — Download all images as a ZIP file (uses JSZip)

Image Management

• Remove Images — Click X button on thumbnails to remove individual images
• Reset to Original — Restore all images to their original state after resizing
• File Size Display — Each thumbnail shows dimensions and file size

Usage

1. Open image-resizer.html in any modern browser
2. Load image(s) using drag-drop, file picker, or paste
3. Adjust resize settings (percentage, dimensions, or presets)
4. Configure output format and quality
5. Check estimated file size
6. Click Download (single) or Download All (ZIP)

Technical Details

• Architecture: Single HTML file with embedded CSS and JavaScript
• Dependencies: JSZip (loaded from CDN for ZIP functionality)
• Browser Support: All modern browsers (Chrome, Firefox, Safari, Edge)
• Processing: Client-side only using Canvas API — no server uploads

File Structure

ImageResizer/
├── image-resizer.html    # The entire application
├── README.md             # This file
└── .planning/            # Development planning docs

Key Functions (JavaScript)

Function	Description
loadImageFile(file)	Loads an image file and adds to state
displayImage(imageData)	Renders image preview thumbnail
resizeImage(imageData, width, height)	Resizes image using Canvas API
calculateDimensions(width, height)	Calculates target dimensions based on settings
updateFileSizeEstimate()	Calculates and displays estimated output size
downloadSingle()	Downloads first/selected image
downloadAllAsZip()	Creates ZIP with all images and downloads
removeImage(id)	Removes image from batch
resetToOriginal()	Restores all images to original state
getMimeType(format)	Maps format string to MIME type
getExtension(format)	Maps format string to file extension
formatFileSize(bytes)	Formats bytes as "X.X KB"

State Objects

// Loaded images array
loadedImages = [{
    id: number,
    name: string,
    dataUrl: string,
    width: number,
    height: number,
    originalFile: File,
    originalDataUrl: string,
    originalWidth: number,
    originalHeight: number
}]

// Resize settings
resizeSettings = {
    mode: 'percentage' | 'dimension',
    percentage: number,
    width: number,
    height: number,
    lockAspect: boolean,
    originalAspect: number
}

// Output settings
outputSettings = {
    format: 'png' | 'jpeg' | 'gif' | 'webp',
    quality: number  // 0.1 to 1.0
}

License

MIT License — Free to use, modify, and distribute.