Image Compression Explained — Reduce File Size Without Losing Quality
Why a 4MB photo and a 400KB photo can look identical on screen, and how to land on the right side of that trade every time.
Why image weight is the thing worth fixing
Open the developer tools on almost any slow page and look at what is heavy. It is rarely the code. On a typical site, images account for somewhere around half the bytes — often more than the HTML, CSS, JavaScript, and fonts put together. Which means that if you want a site to feel faster, images are not one lever among many. They are usually the lever.
The frustrating part is that most of those bytes buy nothing. A photograph straight off a phone is optimised for editing headroom: maximum data, minimal assumptions. Displayed at 800 pixels wide in a blog post, the overwhelming majority of that data is describing detail the viewer's screen will never resolve. You are paying full freight to ship information into a void.
What the user actually experiences
On a fast connection, an oversized hero image is a shrug. On a phone on a patchy mobile network — which is a large share of real traffic — it is the difference between a page that feels instant and one where content jumps around while a 3MB banner grinds in. Google's Core Web Vitals put a number on this: Largest Contentful Paint is very often an image, which means image weight is directly and measurably part of how your pages are ranked.
How compression actually works
Every compression method is a bet about what you will not notice. Understanding the bet is what separates guessing from choosing.
Lossless: throw away redundancy
Lossless compression finds repetition and encodes it more efficiently. A thousand identical white pixels get stored as "white, times one thousand" rather than a thousand separate entries. Decompress it and you get back every original bit, exactly. Nothing is lost — hence the name. The catch is that photographs contain very little exact repetition, so lossless gains on a photo are modest.
Lossy: throw away what the eye discounts
Lossy compression goes further. It exploits the fact that human vision is not a measuring instrument. We are far more sensitive to changes in brightness than in colour, and we are poor at spotting fine detail in busy areas. JPEG leans on both: it stores colour information at lower resolution than brightness, then discards high-frequency detail in each small block of the image.
Done gently, this is invisible. Done aggressively, you get the tell-tale JPEG look — blocky skies, muddy smears around text, coloured haze along sharp edges. The art is finding the point just before that starts.
Why quality 100 is a trap
People reach for quality 100 assuming it means "perfect". It mostly means "enormous". The gap between quality 90 and 100 is typically invisible on screen but can double the file. Meanwhile the gap between 90 and 75 is often also invisible and saves a great deal more. Somewhere in the 75–85 range is where most photographs live comfortably.
Generation loss is real
Every time you re-save a JPEG, it is decoded and re-encoded, and each round discards a little more. Do it enough times and the image visibly degrades — the digital equivalent of photocopying a photocopy. Keep an original somewhere and compress from it, rather than compressing the compressed version repeatedly.
JPEG vs PNG vs WebP
JPEG: photographs
JPEG was designed for continuous-tone images — photographs, gradients, anything where colour shifts smoothly. It is very good at that and supported literally everywhere. It has two weaknesses worth knowing: it cannot do transparency, and it handles hard edges badly, which is why text in a JPEG often looks slightly grubby.
PNG: graphics, text, transparency
PNG is lossless and supports transparency. That makes it right for logos, icons, screenshots with text, diagrams, and anything with large flat colour areas or sharp edges. Put a photograph in a PNG and you will get a faithful, gigantic file — often several times the JPEG equivalent for no visible benefit. The most common mistake in this whole area is a photograph saved as PNG.
WebP: the modern default
WebP does both lossy and lossless, supports transparency, and typically lands 25–35% smaller than an equivalent JPEG at comparable quality. Browser support is now effectively universal. If you are choosing today and have no legacy constraint, WebP is the sensible default.
A quick decision rule
Photograph, no transparency needed? JPEG or WebP. Logo, icon, screenshot, or anything needing transparency? PNG or WebP. Unsure? Try both with our image compressor and compare — it takes a minute and beats theory.
Getting the settings right
Resize before you compress
This is the step people skip, and it is the one that matters most. If an image displays at 800 pixels wide, a 4000-pixel-wide source is carrying five times the pixels it needs. No compression setting rescues that — you are just compressing waste more efficiently. Resize to roughly the display size first with the image resizer, then compress. The order matters.
Allow for high-density screens by exporting at roughly twice the layout width, and that is plenty. Beyond 2x, returns vanish.
Compress once, from the original
Keep your full-resolution originals in a folder you do not touch. Derive web copies from them each time. This avoids generation loss and means that when you redesign at a different size in two years, you still have something to work from.
Judge with your eyes, at real size
Do not evaluate a compression setting zoomed to 400%. Nobody views your site that way. Look at it at the size it will actually appear, on the kind of screen it will actually appear on. Images that look flawed at 400% are frequently indistinguishable at 100%.
Where to be conservative
Faces, skies, and gradients show artefacts first — skin goes waxy, blue skies band. Busy textures like foliage or gravel hide artefacts well and take aggressive settings happily. If your image is mostly a face against a clear sky, ease off.
Strip the metadata
Photos carry EXIF data: camera model, settings, timestamps, and often GPS coordinates. That is both weight and a privacy question. A photo taken at home and posted publicly can carry your address in its metadata. Most compressors strip this; it is worth confirming that yours does.
Website performance
The Core Web Vitals link
Largest Contentful Paint measures when the biggest visible element finishes rendering. On most pages that element is an image. Compressing your hero image is therefore not a vague nice-to-have — it is a direct, measurable improvement to a metric Google uses.
Always set width and height
An image without dimensions in the markup causes the browser to reflow the page once it loads, shoving content around. That is Cumulative Layout Shift, and it is intensely annoying to users. Setting width and height attributes lets the browser reserve the space in advance. It costs nothing.
Lazy-load what is below the fold
Adding loading="lazy" to images further down the page defers them until the user scrolls near. Do not do this to your hero image — you would delay the very thing LCP is measuring.
Check your work
After optimising, look at the page's actual weight rather than trusting the feeling of having improved things. If you are also tightening up markup, the meta tag analyzer is a reasonable next stop.
Social media optimisation
Platforms recompress everything
This surprises people. Upload a pristine image to any major social platform and it will be re-encoded to that platform's own settings regardless. You cannot opt out. What you can do is give the recompressor a clean starting point: a correctly sized, lightly compressed image survives the process far better than one already mangled at quality 40.
Size to the platform
Every platform has its preferred dimensions, and mismatched aspect ratios get cropped — usually through someone's head. Resize deliberately rather than letting an algorithm decide. Our resizer handles the common ratios.
Open Graph images
When your link is shared, the preview image comes from your Open Graph tags. 1200×630 is the safe standard. Get it wrong and your link renders as a sad grey box, which is a poor return on a good post. The meta tag generator will produce the markup.
Frequently asked questions
Does compressing an image always reduce quality?
No. Lossless compression reduces size with no quality change whatsoever. Lossy compression does discard data, but at sensible settings the loss is below the threshold of perception on a normal screen at normal size.
What quality setting should I use?
Start at 80 and look at the result. Most photographs are fine between 75 and 85. Images with faces or large smooth gradients want the upper end; busy textures tolerate the lower. There is no universal number — the content decides.
Why is my PNG so large?
Almost certainly because it is a photograph. PNG is lossless, so it faithfully stores every pixel of noise your camera sensor produced. Convert it to JPEG or WebP and expect a dramatic reduction with no visible difference.
Should I use WebP everywhere?
For new work, largely yes — support is effectively universal now and the savings are real. If you must serve very old software, keep a JPEG fallback.
Is compressing images online private?
It depends on the tool. Ours runs in your browser: the image is read from disk by JavaScript, processed in memory, and handed back as a download. It is never uploaded. You can confirm that yourself in the Network tab.
Will compression remove my EXIF data?
Usually, and usually that is what you want — especially for GPS coordinates. If you need EXIF preserved for archival reasons, keep your originals separately.
Can I compress lots of images at once?
Yes, though since the work happens on your device, a very large batch will take longer on a phone than a laptop. That is the trade for not uploading anything.
Wrapping up
Image optimisation is not really a technical problem. It is a habit: resize to the size you actually need, pick the format that matches the content, compress once from an original, and look at the result with your own eyes before shipping it. Do that consistently and your pages will be faster than most of the web without you ever touching a build tool.
When you want to try it, the image compressor and image resizer are free and run entirely in your browser. The rest of our image tools follow the same rule.