What quality setting should I use for WebP/JPEG on the web?

A common starting point is WebP quality 75–85 or JPEG 75–85. Always validate on real art direction — flat illustrations tolerate lower quality; photos with skin tones may need higher settings.

Why do compressed images look blurry around text?

Lossy codecs optimise for natural images; high-contrast edges (text, line art) show ringing. Use PNG/WebP lossless or SVG for those assets.

Is resizing the same as compressing?

No. Resizing changes pixel dimensions; compression changes how those pixels are encoded. Doing both in the correct order (resize first, then compress) usually yields cleaner results.

Can I compress without losing metadata?

Sometimes. Stripping EXIF reduces bytes and privacy risk but removes camera info. Keep metadata when rights management requires it.

Does double compression matter?

Yes. Social platforms and CDNs often recompress uploads. Upload the highest quality allowed if you care about final appearance.

What is chroma subsampling?

JPEG often stores colour at lower resolution than brightness because eyes are less sensitive to colour detail — it saves space with minimal perceived loss for photos.

Pillar guidePillar guide

Image Compression Deep Dive: Quality, Artefacts & Pipelines

How lossy and lossless compression work, what artefacts look like, choosing quality settings, and building a sane resize/compress pipeline for web and product media.

March 22, 202621 min read

The goal: smallest file, acceptable perception

Compression is an optimisation problem under human perception constraints. Algorithms throw away information that is unlikely to matter — but the threshold depends on viewing distance, display DPI, and content type. Product teams should define acceptance criteria: e.g., “no visible banding on brand gradients at 2× mobile width.” Pair this deep dive with “Web Image Optimization for SEO” when your success metric is search performance, not just byte count.

Lossless compression: no pixels harmed

PNG, WebP lossless, FLAC (audio parallel), and ZIP-style container tricks remove statistical redundancy without changing pixels. You should still resize oversized sources — lossless encoding cannot invent smaller pixels if you feed it a 6000px-wide hero for a 360px slot. Use lossless masters in your DAM; produce lossy derivatives per channel.

Lossy compression: what actually gets thrown away

Block-based transforms (like JPEG’s DCT) quantise high-frequency detail — sharp edges, fine textures — first. That is why JPEG loves portraits but hates screenshots. Modern codecs (WebP, AVIF) use more sophisticated transforms and entropy coding, so they reach the same perceived quality at lower bitrates than JPEG — when encoders are well tuned. Visible artefacts include ringing (halos on edges), blocking (8×8 squares), colour bleeding, and banding in smooth gradients.

SSIM, butteraugli, and why your eyes beat metrics

Automated scores help batch tuning, but visual review on real devices still wins. Check iOS Safari, a mid Android phone, and a calibrated desktop monitor if you ship to all three. When metrics disagree with designers, trust the designers on brand colours and typography — then negotiate codec settings with measured LCP impact.

Pipeline order: crop → resize → encode

Common mistakes: compressing a huge image, then resizing — artefacts get magnified oddly. Instead decode → crop/rotate → resize to display logical pixels (consider devicePixelRatio) → encode once. For responsive images, generate a srcset ladder (e.g., 400/800/1200w) rather than one giant file.

Table: encoder knobs and what they trade

Knob | Effect ----------------|------------------------ Quality (CRF/Q) | Primary visual/size trade Preset/speed | Encoder effort vs efficiency Chroma subsamp | Colour detail vs size (JPEG) Noise reduction | Can smooth film grain (use carefully) Sharpness filter| Can hide softness post-quantise Document the settings you used — future you will thank present you.

CDN and adaptive delivery

Even perfect encodes need cache strategy. Use long cache lifetimes with fingerprinted filenames. For auth-gated images, watch TTL and purges. Adaptive bitrate belongs to video, but images benefit from adaptive resolution via srcset and client hints where appropriate.

MagicConverters in the pipeline

For ad-hoc conversions outside CI — marketing swaps, vendor uploads, one-off compress jobs — MagicConverters provides browser-based tools without local software installs. For recurring production, automate with your stack; for exceptions, a vetted converter keeps teams unblocked.

Frequently asked questions

What quality setting should I use for WebP/JPEG on the web?
A common starting point is WebP quality 75–85 or JPEG 75–85. Always validate on real art direction — flat illustrations tolerate lower quality; photos with skin tones may need higher settings.
Why do compressed images look blurry around text?
Lossy codecs optimise for natural images; high-contrast edges (text, line art) show ringing. Use PNG/WebP lossless or SVG for those assets.
Is resizing the same as compressing?
No. Resizing changes pixel dimensions; compression changes how those pixels are encoded. Doing both in the correct order (resize first, then compress) usually yields cleaner results.
Can I compress without losing metadata?
Sometimes. Stripping EXIF reduces bytes and privacy risk but removes camera info. Keep metadata when rights management requires it.
Does double compression matter?
Yes. Social platforms and CDNs often recompress uploads. Upload the highest quality allowed if you care about final appearance.
What is chroma subsampling?
JPEG often stores colour at lower resolution than brightness because eyes are less sensitive to colour detail — it saves space with minimal perceived loss for photos.

image compressionlossy vs losslesswebp qualityjpeg artifactscompress images for webimage optimization pipeline

Guide