How to Compress Images for the Web: JPG, PNG, and WebP Explained

Images are almost always the largest assets on a webpage. A photo taken on a modern smartphone can easily be 8–12 MB. Upload it as-is and your page will crawl — especially on mobile. Compress it properly and you can serve the same visual quality in under 300 KB.

This guide explains the two types of compression, how JPG, PNG, and WebP each behave, and how to choose the right approach for each image.

What is Image Compression?

Image compression reduces the file size of an image before it's sent over the network. Smaller files mean faster page loads, lower bandwidth costs, and a better experience for visitors on slow connections.

There are two fundamentally different approaches:

• Lossy compression: permanently removes detail that's hard for the human eye to notice. Produces much smaller files. Used by JPG and WebP.
• Lossless compression: removes redundant data without losing any visual information. Files stay larger but quality is unchanged. Used by PNG.

Formats Compared: JPG, PNG, and WebP

JPG

• Best for photographs and images with gradients
• Lossy — lower quality setting means smaller file
• No transparency support
• Quality 80–85 hits the sweet spot between size and appearance for most photos

PNG

• Best for logos, icons, screenshots, and images with sharp edges or text
• Lossless — no quality degradation no matter how many times you save it
• Supports transparency
• Noticeably larger than JPG for photographs — don't use PNG for photos

WebP

• Developed by Google as a modern replacement for both JPG and PNG
• Roughly 25–35% smaller than JPG at equivalent quality
• Supports transparency, so it can replace PNG too
• Supported by all major browsers as of 2024

Which format should you use?

Practical file size targets

A smartphone photo at 8 MB compressed to different settings:

• JPG at quality 90: 1–2 MB
• JPG at quality 80: 500 KB – 1 MB
• WebP at equivalent quality: 300–700 KB

For most web images, aim for under 200 KB. Hero images can stretch to 400 KB if they're above the fold and visually critical.

Resize before you compress

Compression alone won't help if the image dimensions are too large. Displaying a 3,000 px wide image in a 600 px column wastes all those extra pixels. Resize to roughly 2× the display size (to look sharp on retina screens) before compressing — that alone often cuts file size by 70–80%.

Frequently Asked Questions

Does compressing a JPG degrade quality every time?

Re-saving an already-compressed JPG at a lower quality does accumulate degradation — this is called "generation loss." If you're editing an image, always work from the original and export only at the end. For PNG files (lossless), repeated saves cause no degradation.

Does WebP work in all browsers?

Yes, WebP is supported in Chrome, Firefox, Safari (since 2020), and Edge. Internet Explorer doesn't support it, but IE reached end-of-life in 2022. If you need to support IE, the HTML <picture> element lets you serve WebP to modern browsers and a JPG fallback to older ones.

How does image compression affect Core Web Vitals?

Largest Contentful Paint (LCP) — one of Google's Core Web Vitals — measures how quickly the largest visible element (often a hero image) loads. Compressing and properly sizing that image is one of the highest-impact improvements you can make to LCP. Google PageSpeed Insights will flag oversized images and show their exact impact.

Summary

• Lossy compression (JPG, WebP) produces smaller files; lossless (PNG) preserves quality exactly
• WebP is the best default choice — smaller than JPG and supports transparency like PNG
• Always resize to display dimensions before compressing
• Target under 200 KB per image for general web use

Compress, convert, and resize images directly in your browser — no software to install:

• Image Compressor — reduce JPG and PNG file size while preserving quality
• WebP Converter — convert JPG or PNG to WebP format
• Image Resizer — resize to exact dimensions before compressing