Image Resizer & Compressor

Resize and re-encode an image without uploading it anywhere. The file never leaves your tab.

Drop an image here, or

Choose file

Built with this prompt

Build a client-side image resizer in React with:
- A drag-and-drop zone plus a file picker, image files only
- Width and height inputs with an aspect-ratio lock toggle
- Output format select: WebP, JPEG, PNG
- A quality slider that's disabled for PNG
- Re-encode with canvas.toBlob and show original vs output file size and the % saved
- A download button with a sensible filename
- Everything stays in the browser — no upload
- Dark theme, no dependencies

Try in Project Starter →Guide: Handling file uploads →Guide: Performance optimization →