How it works

The compression happens on your device. Your files stay in the browser and are never sent to a server.

Browsers can decode nearly every image format, but encoding is a different story. The built-in canvas.toBlob() can't make AVIF in most browsers, offers little control over the result, and doesn't really optimize PNG. So this tool runs real encoders compiled to WebAssembly: libavif, libwebp, MozJPEG and OxiPNG. Each one is downloaded only the first time you use that format, and each runs in a Web Worker so the page stays responsive.

Which format to pick

WebP is the safe default for photos and graphics. It's usually much smaller than JPEG, supports transparency, and encodes quickly.
AVIF often produces the smallest files, especially at lower quality. It's also by far the slowest to encode, so large photos can take a while.
JPEG is for when something simply won't accept a modern format. MozJPEG squeezes more out of it than a standard encoder does.
PNG is lossless, so it suits screenshots, diagrams and images that need exact pixels. Photos saved as PNG stay large no matter what.

Quality numbers don't translate between formats

75 in WebP doesn't look the same as 75 in AVIF or JPEG. The scales are unrelated, so judge by eye. Use the before and after slider at 100% and look at the hard places: skin, sky gradients, fine text and sharp edges.

Resizing usually saves more than quality does

A photo straight from a phone can be 4,000 pixels wide and shown at 800. Halving the width removes three quarters of the pixels, which no quality setting can match. Aim for about twice the size the image is displayed at, so it stays sharp on high-density screens.

Serving modern formats with a fallback

<picture> lets the browser take the first format it understands:

html
<picture>
  <source srcset="photo.avif" type="image/avif" />
  <source srcset="photo.webp" type="image/webp" />
  <img src="photo.jpg" alt="Describe the image" width="1200" height="800" loading="lazy" />
</picture>

Set width and height so the page doesn't jump when the image arrives, and leave out loading="lazy" on the main image at the top of the page, since delaying it hurts your Largest Contentful Paint.

What gets removed

Re-encoding drops metadata such as camera details and GPS location. That's good for privacy and file size, but keep your originals if you need it. Color profiles are not preserved either, so images in a wide color space may look slightly different after conversion.

When the file gets bigger

Compression isn't guaranteed to help. An image that's already well optimized can grow when it's encoded again, and each lossy pass also loses a bit more detail. If a file shows a red percentage here, keep the original. It's also better to compress from the best source you have, not from a copy that's already been compressed.

How it works#