Dr. Stone-Inspired Client-Side Image Resizer

⚗️ “This is exhilarating! With science and code, we’ll rebuild civilization — one pixel at a time.” — Senku Ishigami

• About
• Screenshots
• Features
• Live Demo
• Technology Stack
• Installation
• Usage
• Configuration & Options
• Project Structure
• Contributing
• License
• Contact

AniResizer is a high-performance, privacy-respecting image resizer inspired by the anime Dr. Stone. It is built entirely with HTML5, CSS3, and vanilla JavaScript (ES6+) to work seamlessly in the browser without uploading images to any server.

AniResizer allows users to:

• Resize images (JPG, PNG, WebP)
• Maintain aspect ratio
• Adjust compression and quality
• See real-time size and dimension feedback
• Download resized images instantly

All operations are done client-side, making it fast, secure, and offline-capable.

Coming soon: include visual previews of the interface (upload panel, resize controls, preview pane, etc.)

✅ Privacy First

Images never leave your browser—no server uploads. Your data stays on your device.

✅ Aspect-Ratio Locking

Auto-calculates missing dimension when resizing if the lock is active.

✅ Quality Slider

Adjust compression level for JPEG, PNG, or WebP formats.

✅ Live Feedback

Shows both original and target file sizes & dimensions instantly.

✅ Smooth UI Animations

Using Anime.js for progress bars, floating particles, and transitions.

✅ Dr. Stone Themed

Styled with a modern yet scientific aesthetic, featuring quotes, green hues, and glow effects.

✅ Mobile-Optimized

Responsive and accessible across devices, including Android/iOS.

✅ Offline-Ready

Works as a fully static app—host on GitHub Pages, Vercel, or Netlify.

• 🌐 GitHub Pages: https://Shineii86.github.io/AniResizer
• ▲ Vercel: https://aniresizer.vercel.app Soon...
• 🌍 Netlify: https://aniresizer.netlify.app Soon...

git clone https://github.com/Shineii86/AniResizer.git
cd AniResizer

• Right-click index.html → Open with Live Server

npm install -g http-server
http-server .

1. Upload Image

   • Drag & drop into the upload panel or click Browse Files.

2. Preview Metadata

   • Original dimensions and file size are shown.

3. Resize Image

   • Enter width/height. Aspect ratio lock optional.

4. Adjust Compression

   • Move the quality slider from 10% to 100%.

5. Preview Changes

   • Output preview and new file size displayed.

6. Download

   • One-click download with timestamped filename.

7. Reset

   • Clears all inputs and resets the interface.

Customize colors, fonts, and layout by editing index.html's <style> block.

AniResizer/
├── index.html          # Main HTML + inline CSS & JS
├── LICENSE             # MIT License
├── README.md           # This file
└── assets/             # Optional assets (icons, images, etc.)
    ├── logo.svg
    ├── background.jpg
    └── fonts/

Contributions are welcome! Feel free to:

• 💡 Suggest features or improvements
• 🐛 Report bugs or usability issues
• 🤝 Submit pull requests

1. Fork this repo

2. Create your feature branch:

   git checkout -b feature/amazing-feature

3. Commit your changes:

   git commit -m "Add amazing feature"

4. Push to your branch:

   git push origin feature/amazing-feature

5. Open a Pull Request

Please follow the Contributor Covenant Code of Conduct.

This project is licensed under the MIT License. See the LICENSE file for details.

Shinei Nouzen

• GitHub: @Shineii86
• Twitter: @Shineii86

🧬 Rebuild your images with science and precision—just like Senku would!

🚨 Follow me on GitHub

⭐ Give a star to this project

For inquiries or collaborations

^{Copyright © 2025 Shinei Nouzen All Rights Reserved}