24Picture

30 Free Image Tools — Right in Your Browser

---

Why 24Picture?

Every image tool runs 100% in your browser. No files are ever uploaded to a server. No signup. No ads. No tracking. Just open, process, download.

This project was built by the team at Toolknit.com and is now open-sourced for the community. The original production site is no longer maintained, but the codebase remains a solid reference for anyone building browser-based tools.

---

Featured Capabilities

Format Conversion JPG, PNG, WebP, AVIF, HEIC, TIFF, SVG, ICO — convert between any pair, no quality loss.	Compression & Resize Smart quality control, batch processing, percentage or dimension-based resize.	GIF Tools Create animated GIFs from images or sprite sheets, or convert GIFs to MP4.
Image Editing Crop with presets, rotate & flip, add watermarks, full editor with filters & effects.	Multi-Language English, 简体中文, 日本語, Español, Português — with full i18n support.	PWA & Offline Install on desktop or mobile. Works offline. Service worker caching included.

---

Tools Overview

Format Conversion — 16 tools

JPG → PNG	PNG → WebP	HEIC → JPG	WebP → PNG
WebP → JPG	PNG → JPG	JPG → WebP	SVG → PNG
SVG → JPG	AVIF → JPG	AVIF → PNG	HEIC → PNG
HEIC → WebP	TIFF → JPG	TIFF → PNG	ICO → PNG

Compression & Resize — 3 tools

Image Compress	Resize Image
Batch Convert

Editing — 7 tools

Crop Image	Rotate & Flip	Add Watermark
Image Editor	Base64 Converter	SVG Optimizer
Gradient Generator

GIF & Creative — 4 tools

GIF Maker	Sprite Sheet → GIF
GIF → MP4	Meme Maker

---

Tech Stack

Layer	Choices
Core	HTML5, CSS3, Vanilla JS (ES6+)
Image Engine	Canvas API, Web Workers, OffscreenCanvas
Animation	GSAP + ScrollTrigger
Libraries	Cropper.js, gif.js, HEIC2Any, UTIF.js, icojs, SVGO, JSZip
Icons	Phosphor Icons
Fonts	Nunito (subset by Unicode range)
API	PHP 8.2 (subscribe + visit counter — optional)

---

Quick Start

git clone https://github.com/ZihangDong/24picture.git
cd 24picture/public

# Any static server works
npx serve .
# or: python -m http.server 8000
# or: php -S localhost:8000

Open http://localhost:8000 — done.

For PHP API support (optional), point a PHP-capable server to public/ and configure config/emailoctopus.php with your credentials.

---

Structure

24picture/
├── public/
│   ├── index.html                     # Homepage
│   ├── tools/                         # 30 tool pages (one per tool)
│   ├── blog/                          # Multi-language blog articles
│   ├── api/                           # PHP endpoints (subscribe, visits)
│   ├── assets/
│   │   ├── css/         (8 files)     # Stylesheets
│   │   ├── js/          (25+ files)   # i18n engine, tool logic, modules
│   │   ├── fonts/                     # Nunito subsets
│   │   ├── vendor/      (11 libs)     # Cropper.js, gif.js, GSAP, etc.
│   │   └── images/blog/               # Blog cover images
│   ├── service-worker.js              # PWA offline support
│   └── site.webmanifest               # PWA manifest
├── config/                            # PHP config (example credentials)
├── netlify.toml                       # Netlify deploy config
└── .gitignore

---

Contributing

New tools, translations, performance improvements — all welcome.

• Fork → branch → PR
• Follow the existing tool page template
• Update sitemap.xml and llms.txt if needed

See CONTRIBUTING.md for full guidelines.

---

License

MIT — see LICENSE.

---

Credits

Built by Toolknit.com — building tools that empower creators.

Standing on the shoulders of amazing open-source projects: Cropper.js, gif.js, HEIC2Any, UTIF.js, SVGO, GSAP, Phosphor Icons, JSZip, browser-image-compression, icojs, and more.

_{Crafted with care by Toolknit.com  ·  Where tools are woven}