Complete Guide to Image Compression

Published: January 15, 2024 10 min read

Image compression reduces file size by encoding pixel data more efficiently — either by removing information the eye barely notices (lossy), or by finding mathematical patterns in the data that reconstruct the original exactly (lossless). The right method depends on the image content and what you need to do with it.

Lossy vs lossless: what actually changes

With lossless compression, every pixel is preserved. Decompress the file and you get back the exact original — bit for bit. PNG uses this approach, which is why it's the right choice for screenshots, logos, and anything with text. The file is larger, but the data is intact.

With lossy compression, some image data is permanently discarded. JPEG works by splitting the image into 8×8 pixel blocks, converting colour information to frequencies, and throwing away the high-frequency detail the eye is least sensitive to. The lower the quality setting, the more gets discarded — and that discard is irreversible. This matters practically: every time you open and re-save a JPEG, the lossy process runs again on already-degraded data. After three or four re-saves at moderate quality, artefacts accumulate visibly even if you started with a pristine source.

The practical rule: use lossy for photographs and images where you control the source file, and lossless for anything that needs to stay editable or exact.

How JPEG quality settings actually work

Most editors give you a quality slider from 1 to 100. The relationship between that number and file size is not linear — and most people compress at the wrong point on the curve.

Going from quality 95 to 85 typically cuts file size by 50–60% with almost no visible difference. Going from 85 to 70 cuts another 20–30% but introduces noticeable block artefacts on smooth gradients and skin tones. The sweet spot for general web use is 80–85. Below 75, artefacts become hard to ignore on large images. Above 90, you're mostly paying for file size with no real visual gain.

For a standard product photo on an ecommerce page, quality 82 and keeping the file under 200KB is a reasonable target. For hero images and lightbox-view product shots where zoom quality matters, 850KB or 950KB is more appropriate — visitors will scrutinise those closely. For a thumbnail or a social share image, quality 75 at the right pixel dimensions costs almost nothing visually.

Choosing the right format: JPG, PNG, or WebP

Format choice has a larger impact on file size than compression level in many cases. Here's how to decide:

Image type Best format Why
Photographs, product shots JPG or WebP Lossy compression handles continuous tone well
Logos, icons, screenshots with text PNG Sharp edges and text stay crisp; supports transparency
Transparent images for web PNG or WebP JPEG has no alpha channel; WebP supports transparency with better compression
Blog images, web banners WebP (JPG fallback) WebP is ~25–35% smaller than JPEG at equivalent quality
Form uploads, exam portals JPG Portal systems often reject PNG; JPG is the safest accepted format

One thing worth knowing about PNG: it supports transparency, but large transparent PNGs can still be compressed substantially using palette quantisation — a form of lossy compression applied to the colour table rather than the pixel values. This can cut PNG file size by 40–60% with very little visible change on flat-colour graphics. Our tool handles this automatically when you compress a PNG online.

Target file sizes by use case

There's no universal right answer for file size, but these are practical targets based on where the image ends up:

  • Hero or banner image (full-width web): under 300KB
  • Blog post inline images: under 150KB, often under 100KB for thumbnails
  • Ecommerce product photos: under 200KB at display resolution (not original camera resolution)
  • Email newsletter images: under 100KB — many mail clients block large images and slow load times frustrate readers
  • Government and exam portal uploads: check the portal's stated limit; most require 50KB or 100KB with specific pixel dimensions
  • Social media (Facebook, Instagram): these platforms recompress uploaded images anyway, so hitting 500KB is sufficient — compressing further doesn't prevent their recompression

That last point catches many people off guard. Platforms like Facebook and Instagram apply their own compression when you upload, regardless of how optimised your file was. The real benefit of compressing before upload is upload speed and mobile data usage, not final image quality on the platform.

Why image compression affects Core Web Vitals

Google's Largest Contentful Paint (LCP) metric measures how long the largest visible element on the page takes to load. For most pages, that element is a hero image. An uncompressed 3MB JPEG can push LCP above 4 seconds on a median mobile connection — well into the "poor" range that Google uses as a ranking signal.

Compressing that image to under 200KB typically brings LCP under 2.5 seconds (the "good" threshold) without changing its visible dimensions on screen. You can verify this with Google PageSpeed Insights, which will flag oversized images and estimate the savings in both bytes and seconds.

The second thing PageSpeed checks is whether images are served at their display size. A 4000×3000 camera photo displayed in a 800×600 container is sending four times as many pixels as needed — compression alone won't fix that. Resize to the actual display dimensions first, then compress.

Frequently Asked Questions

Does compressing an image reduce its pixel dimensions?

Not necessarily. Compression and resizing are separate operations. A tool can reduce file size without changing pixel dimensions (by increasing compression) or it can change dimensions without changing compression. Our tool targets a specific file size — it adjusts compression quality to hit that target, and only reduces dimensions if quality alone can't get there.

Can I decompress a JPEG back to its original quality?

No. JPEG compression is irreversible — the discarded data is gone permanently. This is why you should always keep your original source file (from the camera or design tool) and only compress copies. Converting a JPEG back to PNG produces a lossless copy of the already-compressed version, not a recovery of the original.

Why does my PNG come out larger than the JPEG?

PNG uses lossless compression, which preserves all pixel data. For photographs with millions of colour gradations, lossless compression achieves much less reduction than JPEG's lossy approach. A photograph saved as PNG can easily be 5–10× the size of the same image saved as JPEG at quality 85. PNG is only smaller for images with large areas of flat colour or hard edges — logos, diagrams, and screenshots.

Is WebP supported everywhere now?

As of 2024, WebP has over 97% browser support globally, including Safari (since version 14 in 2020). The remaining edge cases are very old browsers and some government intranet systems. For public-facing websites, WebP is safe to use as the primary format. For portal uploads and form submissions, stick with JPEG — many server-side validators only accept JPEG and PNG.

What's the best file size for a web page image?

Under 200KB for a hero image and under 100KB for inline images is a good rule of thumb. More precisely: keep total image weight per page under 1MB. Google's PageSpeed Insights will tell you exactly which images are oversized and by how much — that's a more reliable target than any fixed number.