Imagify is a fast, privacy-first, single-file web application for resizing, compressing, and converting images directly in the browser. Built with vanilla JavaScript, the HTML5 Canvas API, and Tailwind CSS, all image processing happens 100% locally in your browser memory—no images are ever uploaded to a server.
- 100% Client-Side & Private: Zero backend servers or external API calls. Your images never leave your device.
- Real-Time Optimization & Preview: Instantly preview visual quality and compare original vs. optimized file sizes and compression percentages as you adjust settings.
- Multi-Format Export: Convert and optimize images into JPEG, PNG, WebP, or AVIF (automatically detects browser support for modern formats).
- Custom Dimensions & Aspect Ratio Lock: Resize images between
1pxand10,000pxwith an interactive aspect ratio lock toggle to prevent distortion. - Precision Quality Control: Fine-tune compression from
1%to100%using either the interactive range slider or direct numeric input. - Smart Validation & Warnings:
- Automatic MIME-type validation (
JPG,PNG,WebP,GIF) and10MBmaximum file size guard. - Visual alerts when an image exceeds
5MBor when selected settings result in a file larger than the original.
- Automatic MIME-type validation (
- Zero-Dependency Deployment: Shipped inside a single self-contained
index.htmlfile with dark mode enabled by default.
- Upload an Image
- Drag and drop an image (
JPG,PNG,WebP, orGIF, up to10MB) onto the upload zone, or click the box to browse your files.
- Drag and drop an image (
- Adjust Dimensions (
Width&Height)- Upon upload, the original dimensions are automatically populated and the Aspect Ratio Lock (link icon between Width and Height) is enabled by default.
- Enter a new width or height (between
1and10,000pixels). Click the link icon if you want to unlock the aspect ratio and resize width and height independently.
- Choose an Output Format
- Select JPEG (best for photos; fills transparent areas with white), PNG (lossless with transparency), WebP, or AVIF (next-gen compression, enabled automatically if supported by your browser).
- Tune Compression Quality
- For lossy/configurable formats (
JPEG,WebP,AVIF), drag the Quality slider or type a percentage (1%–100%). - Watch the Preview and Optimization Stats panel update in real time. If the new settings increase the file size over the original, a yellow warning indicator (
⚠️) will appear.
- For lossy/configurable formats (
- Set Filename & Download
- Customize the output filename (defaults to
<original-name>-<width>x<height>) and click Download Optimized Image to save the file with the matching extension.
- Customize the output filename (defaults to
Because Imagify is a self-contained client-side application, no build step or package installation is required.
- Clone or download this repository:
git clone https://github.com/LaylKnight/imagify.git cd imagify - Double-click
index.htmlto open it in any modern web browser.
Using a local server mimics a production environment:
-
Using Python:
python -m http.server 8000
Then open
http://localhost:8000in your browser. -
Using Node.js (
npx):npx http-server -p 8000
Then open
http://localhost:8000in your browser.
- Markup & Structure: HTML5
- Styling: Tailwind CSS (via CDN, dark-first UI)
- Image Processing: Vanilla JavaScript (ES6+), HTML5
CanvasAPI (ctx.drawImage,canvas.toBlob),FileReader&BlobURLs
Non-Commercial / Personal & Portfolio Use Only
Copyright © 2026 LaylKnight. All Rights Reserved.
- Permitted Use: You are free to view, download, and run this project for personal, educational, and portfolio evaluation purposes.
- Commercial Restriction: This software and its source code may not be used for commercial, monetization, or for-profit purposes (including integrating it into paid products, commercial services, or ad-supported platforms) without prior written permission.
- Commercial Inquiries: For commercial licensing or profitable use inquiries, please contact the author directly via GitHub (@LaylKnight) before use.
See the LICENSE file for full details.