On this page
How image compression actually works
A photograph straight out of a phone camera contains far more information than any screen can show. A 12-megapixel image holds twelve million colour samples, but a full-width image on a blog is displayed at maybe 1200 pixels across. Most of that data is spent describing detail nobody will ever see.
Lossy compression exploits a quirk of human vision: we are very sensitive to brightness and comparatively blind to fine colour shifts. JPEG and WebP break the image into small blocks, convert each block into a set of frequency components, and then throw away the components describing detail too fine to register. The quality slider decides how aggressively that discarding happens.
This is why a 4 MB photo can become a 400 KB file that looks identical side by side. It is also why compressing an already-compressed image a second time makes it worse without making it much smaller — the removable information is already gone.
Choosing a quality level
The quality number is not a percentage of visual fidelity. It is an instruction to the encoder about how coarsely to round its numbers. In practice these bands hold up well:
| Quality | Typical saving | Use it for |
|---|---|---|
| 90–100 | 20–40% | Print, product photography, archiving |
| 75–85 | 60–80% | Websites, blogs, email — the sweet spot |
| 60–70 | 80–88% | Thumbnails, background images, previews |
| Below 55 | 90%+ | Only when size matters more than looks |
Start at 80. Compress, open the result at full size, and look at the areas that fail first: gradients in a clear sky, the edge between hair and background, and dark shadow areas. If those look clean, try 70 and check again. If you see banding or a mottled texture, step back up.
One caveat: images with text, sharp diagrams or screenshots degrade much faster than photographs. Lettering picks up a visible halo well before a landscape shows any damage. For those, either stay above 90 or use PNG.
JPEG, PNG or WebP
Format choice usually saves more than the quality slider does, because the wrong format can double a file before compression even starts.
JPEG is for photographs. It handles smooth tonal variation efficiently and is readable by literally everything. It cannot store transparency, and it smears sharp edges.
PNG is lossless and supports transparency. That makes it right for logos, icons, screenshots and any graphic with large flat areas of colour. Using PNG for a photograph is the single most common cause of an unnecessarily enormous file — a photo saved as PNG is routinely five to ten times larger than the same photo as JPEG.
WebP does both jobs better. It compresses photographs about 25–35% smaller than JPEG at matching quality, supports transparency like PNG, and is supported by every browser released in the last several years. For anything destined for a web page, WebP is the default worth reaching for.
The one time to avoid WebP is when the file is leaving your control — an older print service, a legacy CMS, or a client who will open it in outdated software. In that case export JPEG and accept the extra kilobytes.
Resizing beats compressing
If you take one idea from this page, take this one: reducing an image's dimensions saves far more than any quality setting, and costs nothing visually when the image was oversized to begin with.
File size scales roughly with pixel count, which scales with the square of the width. Halving a 4000-pixel-wide image to 2000 pixels removes about three quarters of the pixels before the encoder even runs. Combine that with quality 80 and a 5 MB original commonly lands under 200 KB.
Sensible widths for common jobs:
- 2560 px — full-bleed hero images on high-density displays
- 1920 px — full-width content images, the safe default
- 1280 px — standard blog and article images
- 800 px — sidebar images, cards and thumbnails
- 400 px — avatars and small previews
Use the maximum width control above and the tool handles the height automatically, keeping the aspect ratio intact. Images already narrower than your limit are left untouched.
Compressing for a website
Images are almost always the heaviest thing on a web page, and page weight feeds directly into Largest Contentful Paint — one of the Core Web Vitals that affects both ranking and how fast the page feels to a real visitor on mobile data.
A practical target for a content page:
- Hero image under 200 KB
- In-article images under 120 KB each
- Thumbnails under 40 KB
- Total page weight under 1 MB
To hit those numbers: resize to the width the image is actually displayed at,
export WebP at quality 78–82, and add loading="lazy" to every image
below the fold. Always set explicit width and height
attributes too — that reserves the space before the image loads and prevents the
layout from jumping, which is a separate Core Web Vitals penalty.
Five mistakes worth avoiding
Compressing the same file repeatedly. Each pass discards more information and the damage accumulates. Always start from your original.
Using PNG for photographs. The most expensive habit in web imagery. Switch the output format to JPEG or WebP and watch the size collapse.
Uploading camera-resolution images to a website. A 4000-pixel photo displayed in a 700-pixel column wastes about 97% of the bytes it costs.
Judging quality on a zoomed-out preview. Compression artefacts hide at small sizes. View at 100% before deciding.
Deleting your originals. Compression is one-directional. Keep the full-quality files somewhere; you will eventually need a bigger version.