Understanding JPG quality
Stop chasing a magic number—set JPG quality from display size, content, and upload limits.
Key takeaway
Bottom line: JPG quality is a trade-off dial, not a trophy score. Match dimensions to the layout first, then approve quality by zooming real problem areas. There is no universal percentage.
What the slider actually does
JPG is lossy. Lower quality discards more detail to shrink bytes; higher quality keeps more information and grows the file. Scales differ across tools (0–1 vs 0–100), so do not treat numbers as portable truth. Trust the preview on your content.
Resize before you crush quality
A crisp 2400px encode is wasteful in an 800px column. A tiny image crushed too far destroys faces and type. Practical order: resize → mid quality export → zoom inspection → micro-adjust quality.
Use-case pass/fail thinking
| Use | Approach | Fail signal |
|---|---|---|
| Thumbnails | Small edge length + assertive compression | Unrecognizable product |
| Article body | Width-matched, balanced quality | Mushy skin/sky |
| Hero | Quality headroom | Banding |
| Form uploads | Hit the cap first | Unreadable text |
Claims like “always use 85” are risky across encoders. Define pass/fail visually.
Where artifacts show first
- Smooth skies and gradients
- Skin texture
- Small lettering
- High-contrast edges (blocking)
Recompressing downloads
Social saves may already be crushed. Another hard pass can hurt more than it helps. Remaster from HEIC/camera originals when possible.
Transparency note
JPG has no alpha. Transparent PNG/WEBP becomes a flat background fill—format limit, not a quality bug.
Local experimentation
Browser JPG compressors are ideal for private A/B tests. Calibrate on one image, then batch. If you also strip metadata via re-encode, judge quality the same way.
Why quality numbers are not portable
One tool’s 80 can look like another’s 60 depending on subsampling, sharpening, and metadata. Wiki rules that only say “use 85” break when the encoder changes. Store the number with sample files and zoomed pass/fail screenshots. Target-KB autos search quality for you—convenient, but verify readable regions on document photos.
Safer batching
Do not crush portraits, landscapes, screenshots, and text comps with one preset. Split presets by content type. Log total bytes before/after on a real sample set when you need stakeholder buy-in—use totals, not invented average percentages.
When the slider is the wrong tool
JPG will never gain transparency. A very high-quality JPG can still lose to a mid WEBP on weight. If the slider stops helping, revisit resize and format choice. Quality is the last fine control, not the only one.
Preset starter pack
Thumbs: short edge 400–600 with assertive quality. Body: 1200–1600 balanced. Hero: 1600–2000 with headroom. Documents: readability first, resize before chasing KB. Recalibrate numbers per encoder, encode purpose into filenames, and settle debates on zoomed comparisons—not abstract scores.
Approve on mobile first
Judge banding on a real phone in bright light—skies and walls fail there first. Share two or three candidates with stakeholders as A/B images, not as abstract quality numbers, then batch the winner’s settings.
Practical summary
Quality numbers are not portable. Match dimensions, approve on mobile, document presets, remaster instead of thrashing downloads, and leave JPG when you need alpha. Compare candidate images visually with stakeholders. Spend twenty minutes building a three-image calibration kit for your brand—portrait, sky gradient, and text overlay—and reuse it whenever the encoder or CMS pipeline changes.
That kit becomes the acceptance test for future “just lower quality a bit” requests from people who are not looking at phones.
Appendix: talking to non-technical stakeholders
Replace “quality 80” with two downloads labeled A/B and ask which is acceptable on a phone. Record the winning encoder setting privately. This translation layer prevents endless slider debates in meetings where half the room cannot see the difference on a conference-room TV but will notice mushy text on their own devices later.
Related tools
FAQ
Is quality 100 always best?
Often you pay bytes for tiny gains. Aim for an acceptable pass line.
To halve size, halve quality?
No—relationship is nonlinear. Resizing often helps more.
Screenshots with JPG quality?
Text-heavy UI may be better as PNG.
Can I reuse one setting forever?
Recalibrate when content types change.
Why did compression make it larger?
Re-saving an already tight JPG at high quality can grow it.