Image compressor & converter

What this image compressor does

Drop one image or a whole folder of PNG, JPEG, WebP or AVIF files and get smaller files back in the format you choose. Each image is decoded, optionally downscaled to a maximum width, and re-encoded with the jSquash WebAssembly codecs (libwebp, libavif, mozjpeg and oxipng) inside a Web Worker, so the page stays responsive even for a batch of 20-megapixel photos. Every row shows the original and new byte sizes with the percentage saved, and a summary line adds them up. Download files one by one or grab the whole batch as a single ZIP. Nothing is uploaded.

How to use it

1. Drop images onto the dashed area or click it to pick several files at once. They start compressing immediately with the current settings.
2. Choose the output format — WebP (default), AVIF, JPEG or PNG.
3. Move the quality slider (1–100). It is disabled for PNG, which is lossless.
4. Optionally set max width in pixels; 0 keeps the original size.
5. Changed a setting after the fact? Click Apply new settings to re-encode every image from its original, not from the previous result.
6. Click the per-row download button, or Download all as ZIP to save the batch in one archive (the ZIP is built in the browser too).

WebP vs AVIF vs JPEG vs PNG

Numbers below are typical for a 1600px photo; your mileage depends on the content. The full comparison with sample images is in WebP vs AVIF.

Format	Lossy / lossless	Alpha	Typical size vs JPEG q80	Encode speed	Browser support
JPEG	lossy	no	100% (baseline)	fast	everything
PNG	lossless	yes	3–10x larger for photos	medium	everything
WebP	both	yes	25–35% smaller	fast	all current browsers
AVIF	both	yes	40–60% smaller	slow (seconds)	Chrome, Firefox, Safari 16+

Rules of thumb:

• Photos for the web — WebP at 70–80 is the safe default. AVIF at 50–65 looks the same and is noticeably smaller, but encoding takes a few seconds per image in the browser.
• Screenshots and UI with text — WebP at 85–90, or PNG if the text must stay razor sharp. JPEG at any quality rings around text edges.
• Logos and icons with transparency — WebP or PNG. Never JPEG.
• Thumbnails — set max width to the rendered size times 2 for retina screens (a 300px card wants a 600px image), then compress. Downscaling usually saves more bytes than any quality setting.

Quality settings in practice

The quality number is not a percentage of “how good it looks” — each codec maps it differently. A quick reference:

Quality	WebP	AVIF	JPEG
90–100	near-lossless, large	overkill	archival
75–85	visually identical for photos	very high quality	standard web quality
60–75	small, fine at normal zoom	sweet spot	visible softness
below 50	blocky in gradients	still usable for backgrounds	obvious artifacts

Dark gradients and skies show banding first; faces and fine texture show blurring. If a hero image looks wrong at 70, try 80 before giving up on the format — the size difference between 70 and 80 is often only 10–15%.

Serving the result

Ship modern formats with a JPEG fallback using picture so old browsers still get an image:

<picture>
  <source srcset="/hero.avif" type="image/avif" />
  <source srcset="/hero.webp" type="image/webp" />
  <img src="/hero.jpg" width="1600" height="900" alt="…" loading="lazy" />
</picture>

Set width and height on the img to avoid layout shift, and keep the LCP hero image out of loading="lazy". Smaller files improve Largest Contentful Paint directly, which is where most of the Core Web Vitals gain comes from.

Related tools and snippets

• Image to Base64 — inline a tiny compressed icon as a data URL after shrinking it here.
• SVG optimizer — for vector artwork, optimize the SVG instead of rasterizing it.
• Favicon generator — build the 16–512px icon set from a square source image.
• Aspect ratio calculator — work out the height for a given max width before resizing.
• WebP vs AVIF — side-by-side samples and when each format wins.