Image compression for developers

AVIF + WebP fan-out, responsive sets, custom rename templates, advanced codec controls. CLI-grade workflow in your browser.

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 tier exposes the knobs CLI tools have: AVIF effort (0-9 — higher means slower but tighter compression), WebP method (0-6 — same trade-off), JPEG chroma subsampling (4:4:4, 4:2:2, 4:2:0 — text and line art need 4:4:4; photos work fine at 4:2:0), and per-format quality overrides. Most users want the default Auto Quality but the controls are there when you need them.

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.

Tools you'll combine

Responsive image set generator, multi-format export, filename templates, saved presets, Core Web Vitals guide, MiniPx vs Cloudinary.

How it works

Pick your responsive breakpoints: Standard: 150 / 640 / 1280 / 2560 px. Customise via the Pro responsive set editor.
Enable multi-format export: Tick AVIF + WebP + JPG. The engine produces all three for each breakpoint.
Set a predictable rename template: Use {name}-{width}.{ext} or hero-{width}.{ext} so the output files sort cleanly.
Save as a Pro preset: Bundle everything into one preset. Future batches: drop image, one-click apply, download ZIP.
Reference via <picture> in HTML: Three <source> tags (AVIF, WebP, JPEG) with srcset + sizes. Browser picks the best supported format and right size automatically.

Frequently asked questions

How does this compare to sharp + a build script?

sharp is faster (native Node, no canvas overhead) and integrates into CI. MiniPx is faster to ITERATE during design (drag, drop, see the output sizes immediately). Use sharp for production builds; use MiniPx during design + experimentation.

Can I batch-process a folder via the CLI?

Not directly — MiniPx is a browser tool. The Pro batch mode lets you drop 100+ files at once and download as ZIP. For true CLI workflows, sharp or imagemin is the right tool.

Does AVIF encoding work in all browsers?

Chrome and Edge encode AVIF natively. Safari and Firefox fall back to PNG. MiniPx detects the actual output format and skips AVIF requests where the browser can't encode — no silent mislabeling.

How tight is the AVIF compression?

Typically 30-50% smaller than equivalent-quality JPEG. With AVIF effort = 9 (slowest) you get the best ratio; effort 4-6 is a reasonable speed/quality balance.

Can I integrate this into my build pipeline?

Not directly — MiniPx is a UI tool. For build-pipeline integration, use sharp + an image-optimisation Next.js / Vite plugin. MiniPx is for the design / iteration phase, before final assets land in your repo.

Image compression for developers