You're exporting a photo from Photoshop, Lightroom, or your phone's camera roll and you hit the quality slider. Do you go 100% to be safe? 80% to save space? The numbers don't mean what you think they mean, and picking the wrong one either bloats your file for no visual benefit or introduces ugly blocky artifacts you can't undo later.
Unlike PNG, JPEG actually has a real quality dial — but that dial doesn't behave the way most people assume. The relationship between the number you pick and what you actually get, in both file size and visual fidelity, is wildly non-linear. Once you understand how it really works, choosing the right setting takes seconds.
For most web images, a JPEG quality between 75% and 85% gives the best balance of visual fidelity and file size. Product or hero images can go up to 90%, thumbnails can drop to 60%, and print work should stay at 90–100%. Going above 90% rarely improves visible quality but can double your file size, since the JPEG scale is non-linear near the top.
What does the JPEG quality setting actually do?
JPEG is a lossy format, meaning the compression process permanently discards some image data based on what the human eye is least likely to notice. The "quality" number — usually shown as 0–100, or as a 0–12 scale in Photoshop — controls how aggressively that discarding happens. It is not a measure of resolution, sharpness, or color accuracy on its own; it's a dial on how much detail gets thrown away during three specific stages of compression:
- Color space conversion. The image is converted from RGB to YCbCr, separating brightness (luma) from color (chroma), because the eye is far more sensitive to brightness differences than color differences.
- Chroma subsampling. Color resolution is reduced more than brightness resolution, since you can throw away a lot of color detail before anyone notices.
- Quantization. The image is broken into small blocks, transformed mathematically, and the precision of that transformation is reduced — this is the actual step your quality slider controls, and where almost all visible artifacts originate.
The critical thing to understand: this scale is not linear. Moving from 100% to 90% quality can cut file size by 50–70% with no visible difference at normal viewing distance, because the top of the scale spends enormous file size preserving detail the eye barely registers. Moving from 50% to 40% might only save a small amount further, while introducing very visible blocking. The sweet spot is almost never at the extremes.
Why the right setting matters
Picking a JPEG quality setting isn't a cosmetic choice — it has direct, measurable consequences across performance, cost, and how your images actually look once they leave your editing software:
- Page speed. Photos are usually the heaviest assets on a web page. Exporting at 100% instead of 80% can double or triple page weight for zero perceptible gain, directly hurting Core Web Vitals like LCP.
- Storage and bandwidth costs. Photography sites, e-commerce catalogs, and CDNs pay per gigabyte. Multiplying every product photo's size by 2–3x for no visual benefit adds up fast at scale.
- Print quality. The opposite risk applies here — using a web-appropriate 75% quality setting for a large print job will reveal compression artifacts that were invisible on screen, especially in shadows and smooth gradients.
- Repeated editing. Every time a JPEG is opened, edited, and re-saved as a JPEG, it's compressed again on top of already-lossy data. Choosing the right quality and workflow up front avoids compounding this generation loss.
Step-by-step: choosing the right quality setting
- Identify where the image will be used. A thumbnail, a hero banner, a product photo, and a print file all have different tolerances for compression. Decide this before you touch a slider — it determines your entire target range.
- Start at 80% as your baseline. For the vast majority of photographic web images, 80% is the well-tested middle ground between visible quality and file weight. Export at this setting first before adjusting up or down.
- Adjust based on image content, not just use case. Images with smooth gradients, skin tones, or large flat color areas (sky, walls) show compression artifacts sooner — push these toward 85–90%. Busy, high-detail textures (foliage, fabric patterns, crowds) hide compression artifacts well and can often drop to 70–75% unnoticed.
- Zoom in at 100–200% to check for artifacts. Compression damage shows up first around high-contrast edges — text, logos, sharp object boundaries. If you see blockiness or color bleeding (mosquito noise) around these areas, increase the quality value by 5–10 points and re-export.
- Use Save for Web / Export tools, not generic Save As. Dedicated export dialogs (Photoshop's "Export As", Lightroom's Export panel) give finer-grained control and often strip unnecessary metadata automatically, unlike a basic overwrite save.
- Enable progressive encoding for web images. A progressive JPEG renders at low resolution first and sharpens as it downloads, improving perceived load speed on slower connections — most modern browsers support this with no downside.
- Always export from the original, never from a previously saved JPEG. If you need to re-edit later, go back to the source file (RAW, PSD, or an unedited copy) rather than re-opening and re-saving the compressed JPEG, to avoid compounding generation loss.
Common mistakes that waste quality or space
1. Always exporting at 100%
100% quality feels like the "safe" choice, but it's almost always wasteful. The algorithm spends a disproportionate amount of file size preserving detail that's invisible at normal viewing distance. Unless you're archiving a master file or sending to a professional print house, 100% is rarely the right call.
2. Assuming quality percentages mean the same thing across tools
Photoshop's 0–12 scale, Lightroom's 0–100% scale, and various online compressors don't map to each other 1:1. A "quality 80" export from one tool can look noticeably different from "quality 80" in another. Always judge by the visual result and file size in the tool you're actually using, not by assuming a universal standard.
3. Re-saving the same JPEG repeatedly
Opening, editing, and re-saving a JPEG over and over compounds compression artifacts each time — this is generation loss, and it's permanent. If your workflow involves multiple editing passes, work in a lossless format (PSD, TIFF, PNG) and only export to JPEG once, as your final step.
4. Using a single quality setting for every image on a page
A hero banner and a footer thumbnail don't need the same quality setting. Applying one blanket export quality across an entire site either over-compresses your most important visuals or wastes bandwidth on images nobody examines closely. Set quality per role, not per project.
Real-world quality examples
These are representative results from exporting the same source images at different JPEG quality settings, using a standard Save for Web workflow:
The pattern holds across most photography: smooth, low-detail areas like sky, skin, and flat backgrounds reveal compression artifacts first, while busy, high-frequency detail can absorb much more aggressive compression before anyone notices.
Quality setting by use case
Rather than one universal number, the right setting depends entirely on where the image is going and what it's showing.
| Use case | Recommended quality | Typical savings vs. 100% | Artifact risk | Notes |
|---|---|---|---|---|
| Thumbnails / icons | 60–70% | 70–85% | Low | Small display size hides most compression artifacts |
| General web photos | 75–85% | 50–70% | Low | The universal sweet spot for blog posts and content images |
| Hero / banner images | 85–90% | 35–55% | Low-medium | Large display size makes artifacts more noticeable |
| E-commerce product photos | 85–92% | 30–50% | Low-medium | Customers zoom in — detail and color accuracy matter |
| Email attachments | 70–80% | 55–70% | Low | Keeps attachments under client size limits |
| Print / professional photography | 90–100% | 0–25% | N/A | Print reveals artifacts screens hide — prioritize fidelity |
Compress your JPEG right now — free
The Rebrixe JPEG Compressor runs entirely in your browser. Your images are never uploaded to a server — compression happens locally, and you can preview the exact visual result and file size at any quality setting before downloading. No account, no file size limit, no watermarks.