Updated: July 1, 2026
Use quality 75–85 as a practical starting point for most website JPEGs, 85–90 for product or portfolio images, and 90 or above only when print or maximum archive detail is required. Resize the image to its actual display dimensions before compressing, choose 4:2:0 chroma subsampling for ordinary photos, and compare the result at 100% zoom before publishing. These three decisions together — quality range, resize-first order, and subsampling choice — account for most of the file-size savings available to you. Below quality 70, compression artifacts become more likely around edges and text; above 90, file sizes grow quickly for detail that is difficult to perceive on a screen. This guide gives you the exact numbers by use case, explains the two settings most people overlook, and provides a repeatable workflow you can verify yourself.
Key Takeaways
- Quality 75–85 works for most web photos. It often reduces file size substantially with no visible loss at normal viewing sizes, per Google's image optimization guidance.
- Resize before you compress. This single step usually saves more bytes than any quality-slider change.
- Use 4:2:0 chroma subsampling for photos; 4:4:4 for screenshots and text. The difference is visible on sharp colored edges.
- Enable progressive encoding for large images. It can improve perceived load speed and may produce a slightly smaller file for larger images.
- Never re-save the same JPEG repeatedly. Each re-save compounds lossy damage. Always compress from the original lossless file.
Best JPEG Quality Settings by Use Case
The quality slider is a 0–100 abstraction. The table below is a practical reference based on web-performance guidance from Google web.dev and MDN Web Docs. Treat the ranges as starting points — the right number for your image depends on its content, dimensions, and visual requirements.
| Use case | Recommended quality | Chroma subsampling | Notes |
|---|---|---|---|
| Website hero / background | 70–78 | 4:2:0 | Speed is the priority; slight softening is usually invisible at scale |
| Blog / article photos | 78–85 | 4:2:0 | Practical all-round balance for photographic content |
| E-commerce product shots | 82–90 | 4:2:0 or 4:4:4 | Detail matters; test the higher end on textured surfaces |
| Photography portfolio | 85–92 | 4:4:4 | Preserve fine gradients and skin tones |
| Print or archive | 90–100 | 4:4:4 | Print exposes artifacts that screens tend to hide |
| Screenshots with text | 90–100 | 4:4:4 | Sharp edges and colored text require full chroma |
Quick decision rule: Start at quality 80. If you see visible artifacts, go up by 5. If the file is too large, resize to display dimensions first, then try lowering by 5. Repeat until the image passes a side-by-side visual check at 100% zoom.
Why Quality 85 Is a Common Default
Quality 85 is a practical default in many web workflows because it sits just above the range where compression becomes noticeable on most photographic content, while still delivering meaningful size savings. If you need a single number to apply consistently, 85 is a reasonable anchor for web photos; adjust downward for speed-critical pages and upward for high-stakes product or portfolio images.
What "Compressing a JPEG" Actually Does
JPEG uses lossy compression. Instead of storing every pixel, it separates the image into brightness (luma) and color (chroma) layers, then removes higher-frequency color and detail information that is less noticeable in many photographs. As described in Google's web.dev JPEG guide, this is what lets a well-compressed JPEG look close to the original while being a fraction of the size.
The catch: JPEG works in 8×8 pixel blocks. When quality is set too low, the seams between those blocks become visible — producing the blocky, smeared look you may have seen on over-compressed images. Compression is therefore a balancing act between file size and visual fidelity, not a single magic slider.
The Two Settings Most People Miss
Chroma Subsampling: 4:4:4 vs 4:2:0
Human eyes are more sensitive to brightness (luma) than to color (chroma), so JPEG can store color data at lower resolution without obvious loss for most photographs. This is called chroma subsampling:
- 4:4:4 — full color resolution, largest file. Use for text, screenshots, and images with sharp colored edges.
- 4:2:0 — color stored at reduced resolution, noticeably smaller file. Appropriate for photographs, where the difference is usually imperceptible.
The common mistake is using 4:4:4 for ordinary photos (wastes bytes) or 4:2:0 for red text on a colored background (causes visible color bleed at edges).
Progressive vs Baseline JPEG
A baseline JPEG loads from top to bottom. A progressive JPEG sends a low-resolution preview of the whole image first, then refines it in passes. According to Google's web.dev image guidance, progressive encoding can improve perceived loading for large images and may produce a slightly smaller file for larger images — though results vary by encoder and image content. Enable it for anything larger than a thumbnail; it is a sensible default for most web JPEGs.
Step-by-Step: Compress a JPEG Online
This workflow applies to any decent browser-based compression tool.
- Start from the original file, not a previously compressed copy. Re-compressing a JPEG compounds lossy damage with each pass.
- Resize to display dimensions first. Example: a 2400 px photo displayed in an 800 px column should be exported at 800–1600 px (the higher end covers Retina screens), not at 2400 px. This step typically saves more bytes than the quality slider alone.
- Set quality to 80 as a baseline, then refer to the table above for your specific use case.
- Choose 4:2:0 subsampling for photos; 4:4:4 for screenshots and images with sharp colored text.
- Enable progressive encoding for large images.
- Compare against the original at 100% zoom. If you cannot see a difference, lower quality by 5 and check again. Stop when you first notice a change, then go back up one step.
- Confirm the output file size fits your page-weight budget.
You can use LessMB as part of this workflow to reduce JPEG file size online, then compare the exported image against the original before publishing.
How to Check Whether a Compressed JPEG Still Looks Good
After compression, verify the output against these signals before publishing:
| What to check | How to check | Pass signal |
|---|---|---|
| Visual artifacts at edges | Open at 100% zoom and inspect high-contrast areas | No visible blockiness or color bleed |
| Text and sharp lines | Zoom into any text or logo areas | Letters remain sharp and legible |
| File size vs budget | Check OS file info or browser DevTools network tab | Within your target budget |
| Image dimensions | Check file properties | Matches intended display size (×2 for Retina) |
| Color accuracy | Compare side by side with the original | No noticeable color shift |
Compress vs Convert: When JPEG Is Not the Right Format
Sometimes the biggest win is changing format, not tightening quality:
| Situation | Better move |
|---|---|
| Photo, broad browser support needed | Keep JPEG at quality 78–85 |
| Photo, modern browsers only | Serve WebP or AVIF with a JPEG fallback — both formats can deliver smaller files than JPEG at comparable quality, according to Chrome Developers image format guidance |
| Logo, icon, flat color, transparency | Use PNG or SVG, not JPEG |
| Screenshot with text | PNG, or high-quality JPEG at 4:4:4 |
When to Keep JPEG Instead of Converting to WebP or AVIF
JPEG remains a broadly supported fallback format worth keeping when: your publishing platform or CMS does not yet support WebP/AVIF delivery; you need maximum compatibility across older browser versions; or the conversion pipeline adds more operational complexity than the file-size benefit justifies. In those cases, a well-compressed JPEG at quality 80–85 is a reasonable, compatible choice.
Common Mistakes That Ruin JPEGs
- Editing and re-saving repeatedly. Every save is a fresh round of lossy compression. Keep a lossless master (PNG or camera RAW) and export JPEGs from it.
- Compressing before resizing. Resize first, then compress.
- Setting quality to 100 "to be safe." The jump from 90 to 100 often increases file size significantly for detail that is difficult to perceive on screen.
- Using JPEG for flat-color graphics. Logos and text-heavy graphics get muddy; use PNG or SVG.
- Skipping the visual check. Numbers are a starting point; a side-by-side check at 100% zoom is the final arbiter.
Verification Checklist
Before publishing a compressed JPEG, confirm:
- File exported from the original, not a re-compressed copy
- Dimensions match the largest display size (accounting for Retina)
- Quality in the correct range for the use case
- Subsampling appropriate (4:2:0 for photos / 4:4:4 for text and sharp edges)
- Progressive encoding enabled for large images
- Side-by-side visual check passed at 100% zoom
- File size within page-weight budget
- No visible blocking, color bleed, or edge artifacts
FAQ
What is the best JPEG quality setting for websites?
Quality 75–85 is a practical starting range for most website photos. It often reduces file size substantially while keeping visual quality acceptable at normal viewing sizes. Drop toward 70–75 for large hero images where speed matters most, and stay at 85–90 for product shots that need to look sharp.
Does compressing a JPEG reduce its quality?
Yes. JPEG is a lossy format, so every save discards some detail permanently. The goal is to choose a quality level where the loss is measurable by tools but not noticeable at normal viewing sizes. Above roughly 75, many viewers cannot see a difference on typical web images.
Is it safe to compress JPEGs online?
It depends on the tool. Check whether the tool processes images locally in your browser or states a clear upload-deletion policy. Look for HTTPS and review the privacy policy before uploading sensitive images. No tool can guarantee privacy unless you have verified how it handles uploaded files.
What quality should I use for printing photos?
For print, use quality 90–100 and keep 4:4:4 chroma subsampling. Print reveals compression artifacts that screens tend to hide, so avoid heavy compression and never re-save a JPEG multiple times before printing.
How small should a website JPEG be?
A useful starting budget is under 200 KB for content photos and under 100 KB for smaller inline images, but the right target depends on your page-weight goals and connection speed assumptions. Resizing to actual display dimensions before compressing is what makes small, still-sharp files achievable.
Should I resize before compressing a JPEG?
Yes. Resize to your largest intended display size first, then compress. Serving a 4000 px image scaled down to 800 px in CSS wastes far more bytes than any quality-slider adjustment. Resize first, compress second — the order matters.
Is WebP better than JPEG for websites?
WebP and AVIF can deliver smaller files than JPEG at comparable quality for most photographic content, according to Chrome Developers guidance. However, JPEG remains a broadly supported fallback. The practical approach for modern sites is to serve WebP or AVIF with a JPEG fallback using the <picture> element.
Next Steps
- Pick one representative image and run it through the step-by-step workflow above.
- Note the quality level where you first see a difference — that is your personal ceiling for that image type.
- Apply the same settings across similar images and set format fallbacks (WebP or AVIF) if your platform supports them.
- After publishing, check whether image weight and LCP improved using browser DevTools or a page speed tool — other factors such as caching, server response time, and lazy loading also affect LCP.