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...
| Layer | Technology |
|---|---|
| Markup | HTML5 |
| Style | CSS3 w/ Flexbox & Custom Properties |
| Logic | JavaScript (ES6+) |
| Animation | Anime.js for interactivity |
| Icons | Font Awesome 6 |
| Hosting | GitHub Pages, Vercel, Netlify |
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 .-
Upload Image
- Drag & drop into the upload panel or click Browse Files.
-
Preview Metadata
- Original dimensions and file size are shown.
-
Resize Image
- Enter width/height. Aspect ratio lock optional.
-
Adjust Compression
- Move the quality slider from 10% to 100%.
-
Preview Changes
- Output preview and new file size displayed.
-
Download
- One-click download with timestamped filename.
-
Reset
- Clears all inputs and resets the interface.
| Feature | Value |
|---|---|
| Supported Formats | .jpg, .jpeg, .png, .webp |
| Max File Size | 30 MB |
| Min Dimensions | 1×1 pixels |
| Quality Range | 10% – 100% |
| Output Naming | resized_<timestamp>.<ext> |
| Theme Customization | Via CSS :root variables |
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
-
Fork this repo
-
Create your feature branch:
git checkout -b feature/amazing-feature
-
Commit your changes:
git commit -m "Add amazing feature" -
Push to your branch:
git push origin feature/amazing-feature
-
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!
