This is a client-side web application for optimizing images. It allows users to resize and compress images directly in their browser, without needing to upload them to a server.
- Client-Side Processing: All image processing is done in the browser, ensuring user privacy and speed.
- Multiple File Upload: Upload up to 10 images at once.
- Drag and Drop: Easily add images by dragging them onto the application.
- Image Resizing: Specify a target width or height to resize images while maintaining the aspect ratio.
- Image Compression: Adjust the quality of the output images to reduce file size.
- Live Preview: See a preview of the original and optimized images, including the percentage of size reduction.
- Download Images: Download the optimized images individually.
- Download full code base. Run index.html.
- Upload Images: Drag and drop your image files (PNG, JPG, or WEBP) onto the upload area, or click to select them from your computer.
- Set Optimization Options:
- Resize: Enter a desired width or height. The other dimension will be calculated automatically to preserve the aspect ratio.
- Compress: Use the slider to set the desired quality level (1-100).
- Process Images: Click the "Optimize All" button to start the optimization process.
- Download: Once processing is complete, you can see the size reduction and download each optimized image.
- React: For building the user interface.
- Tailwind CSS: For styling the application.
- HTML5 Canvas: For performing the image resizing and compression.
- Babel: For in-browser JSX and modern JavaScript transpilation.