Image compression basics: JPEG, PNG, WebP, and AVIF explained

Images are usually the heaviest thing on a modern web page. Get them wrong and your site is slow, your mobile users bounce, and your Core Web Vitals scores tank. Get them right and you can serve visually rich pages that load almost instantly, even on a spotty connection. The trick is understanding what each format is actually good at.

JPEG is the veteran. It uses lossy compression, meaning it throws away some visual information to save space, and it's optimized for photographs where the eye won't notice the discarded detail. Push the quality slider too low and you'll see artifacts around edges and blocking in flat areas. Keep it around 75–85 and most photos look identical to the original at a fraction of the file size.

PNG is lossless, which means it preserves every pixel exactly. That makes it the right choice for screenshots, diagrams, and any image with sharp edges or transparency. It's a poor choice for photos, though — PNG files of photographic content are often three to ten times larger than the JPEG equivalent for no visible benefit.

WebP is Google's replacement for both JPEG and PNG. It supports both lossy and lossless modes plus transparency, and it typically saves 25–35% on file size versus JPEG at similar quality. It's supported in every modern browser, so there's rarely a reason not to use it unless you're supporting very old software.

AVIF is the newer contender. It typically beats WebP by another 20% at the same quality, especially for photos, and supports HDR and wide color gamut. Browser support is now excellent, but encoding is much slower than JPEG or WebP, which matters if you generate images on the fly.

For most sites, a sensible default is: use AVIF or WebP as the primary format, keep a JPEG or PNG fallback for very old browsers via the <picture> element, and serve the appropriately sized image for each viewport. Never send a 4000px-wide hero image to a phone that's going to display it at 400px wide.

Compression tools like the one on ToolNest do the heavy lifting in your browser using the Canvas API. Because there's no server round-trip, you can experiment with quality settings in real time and pick the smallest file that still looks acceptable. For most photos, the difference between quality 80 and quality 95 is imperceptible but the file size can be double.

One more thing: strip metadata. Most cameras and phones embed EXIF data — camera model, GPS coordinates, timestamp — that you almost never want to publish. Good compression tools remove it by default, but it's worth checking. A leaked GPS coordinate in a listing photo is a small privacy disaster.