Image Compression for Developers — Free, Fast & Private
Developers usually have two options for image optimisation: write a build-time pipeline (sharp + imagemin + a postcss plugin) or pay for a CDN that does it on demand (Cloudinary, Imgix, Bunny). Both work; both are overkill for a static site or a one-person project. MiniPx fills the middle: a browser-based tool that runs the same image-optimisation logic as the CLI pipelines, with no setup and no per-image fees.
What developers actually need
Drop a hero image, get back a folder containing AVIF + WebP + JPEG fallback at 4 breakpoints (150 / 640 / 1280 / 2560 px). 12 files in total. Filenames predictable: hero-{width}.{ext} → hero-150.webp, hero-640.webp, etc. Drop the ZIP into public/img/. Reference via <picture> with three <source> tags and a default <img srcset="..." sizes="...">. Done.
Advanced codec controls
Pro exposes one encoder knob that CLI tools have: a per-format quality override. Set AVIF to 55 and WebP to 75 and the fan-out honours both. An override applies to every output in that format, the primary included — leave it blank and that format follows the main quality setting. Effort and method dials are deliberately absent: the encoders on the browser path take no such parameter, so a slider for them would move nothing.
The browser canvas-API engine
Compression runs on the Canvas API via Web Workers. AVIF encoding uses canvas.toBlob(..., \'image/avif\', quality) which Chrome and Edge support natively (Safari and Firefox: WebP-only, with PNG fallback for AVIF). The engine detects which format the browser actually encoded and routes accordingly — no silent PNG masquerading as AVIF.
When you'd still want a CLI / CDN
For sites with thousands of images updated daily, automate via a build pipeline (sharp + Next.js Image, or a CI step that runs against the public/ directory). For user-generated content uploaded at runtime, a CDN like Cloudinary or Bunny is the right fit. MiniPx is the sweet spot for static sites, personal projects, marketing pages, blogs, and small business sites where you control the asset lifecycle. If you are not sure which bucket you fall into, run the page image weight analyzer against a deployed URL first — the image count and total payload usually settle the build-pipeline-versus-CDN argument on their own.
Tools you'll combine
Responsive image set generator, multi-format export, filename templates, saved presets, Core Web Vitals guide, MiniPx vs Cloudinary. And for the asset every project needs on day one, the favicon generator turns one 512px PNG into favicon.ico, the apple-touch and manifest icons, and the head snippet — in the browser, same as everything else here.
For the browser API underneath all of this, compressing images with the Canvas API walks through the actual code path.