TinyPNG
Compress and resize PNG, JPEG, and WebP images entirely in the browser. Adjust quality and dimensions, then download individual images or a ZIP without uploading any image data.
- Period
- Context
- My role
The problem
Preparing images for the web often means uploading them to a compression service or processing them one at a time. TinyPNG keeps the work in the browser, with batch processing and control over output quality, format, and dimensions.
How it was built
Keep image processing on the device
React and TypeScript manage the interface while Canvas handles image encoding. Users can select or drop multiple files, resize them, and export PNG, JPEG, or WebP. The app runs as a static site with no backend or API keys, and no image data is uploaded.
Make compression behavior explicit
Quality is an encoder setting, not a promised file-size reduction. PNG encoding is lossless and ignores quality, so resizing or converting to WebP provides another way to reduce size. Same-format exports at the original dimensions keep the original file when encoding would make it larger; explicit resizing and format changes are still honored.
Handle the whole batch
Images process sequentially, settings changes discard stale results, and preview URLs are released when files are removed. Results can be downloaded individually or bundled with JSZip, with duplicate filenames handled inside the archive. Browser tests cover encoding, transparency, resizing, downloads, and mobile overflow.
Where it landed
- Client-side PNG, JPEG, and WebP compression with no image uploads
- Batch resizing, format conversion, and individual or ZIP downloads
- Static deployment with no backend or API keys required
Specification
- Processing
- Formats
- Downloads
- Frontend
- Validation