Images are the single largest contributor to page weight on the median website — around 45% of total bytes by HTTP Archive's numbers. That means image compression is not a peripheral optimization; it's the optimization. Get it right and you'll knock a full second off LCP on mid-tier phones. Get it wrong and no amount of code-splitting will save you.
Step 1: resize before you compress
Every image should be delivered at (at most) the size it will actually be displayed. A 4000×3000 photo squeezed into a 400×300 card is not just wasteful — it's actively slower, because the browser has to decode the huge source before scaling. Resize to double the displayed dimensions (for retina) and no more.
Step 2: pick the right encoder
For photographs: WebP or AVIF, with JPG fallback if you must. For graphics with transparency: WebP or PNG. For icons and simple shapes: SVG whenever possible. The wrong choice here can double file size for the same visual quality.
Step 3: choose a quality level, not a file size (usually)
For most web imagery, aim for quality 0.80–0.85 on JPG and WebP. That's the sweet spot: files are small, artefacts invisible on normal screens. Reserve quality 0.95+ for hero images and photography portfolios. Reserve target-size compression (e.g. 'this file must be under 100 KB') for portals that impose a hard limit.
Step 4: strip metadata
EXIF data (camera model, GPS, timestamps) can add 20–50 KB per image, plus it leaks information you probably didn't mean to share. Every compressor worth using strips it by default; check yours does. On this site, the compressor strips EXIF unless you explicitly ask it to preserve.
Step 5: verify with real numbers
PageSpeed Insights, Lighthouse, WebPageTest. Run your before-and-after through one of these on a throttled 3G/mobile profile. A hero image dropping from 900 KB to 180 KB should show up as a 400–700 ms LCP improvement on that profile. If it doesn't, something else is bottlenecking — a render-blocking script, a slow font, or a missing preload.
Common mistakes
Compressing something that's already been compressed and expecting a big win. Compressing PNGs as JPGs when they contain text. Serving one giant image to both phones and desktops with no responsive set. Using auto-compress plugins on a WordPress site that then re-compress on every page render. Forgetting that CDNs like Cloudflare and Vercel can compress on your behalf, freeing you from doing it manually.
Do all five steps consistently and most sites end up at a page weight roughly a quarter of what they started with, with no perceived quality loss. That's the entire game.
Frequently asked questions
What's the best quality setting for web JPGs?
For general content, 0.80–0.85 is the sweet spot: files are small, artefacts invisible on normal screens. Reserve 0.95+ for hero images and photography portfolios.
Does compressing an image twice make it worse?
Yes. Every JPG re-save loses a little quality. Compress once from the source, and keep an uncompressed master for future re-exports.
Do I need to strip EXIF data?
Yes, for two reasons: it saves 20–50 KB per image, and it prevents accidentally leaking GPS location and camera details. Any good compressor strips it by default.
Shariq founded ImageConvertToJPG after a decade of shipping image pipelines for e-commerce and publishing platforms. Every tool on the site runs entirely in the browser — no uploads, no accounts, no tracking on tool pages.