What JPEG quality setting to use for web images and email

If you want the short answer on what jpeg quality web images need, set your export slider to 85. That number is the practical sweet spot for most photographs on the internet. It provides a file that looks virtually identical to the original photograph, but the file size drops dramatically.

Once you know the baseline, the rest of the conversation is just figuring out when to break that rule. The slider you see when saving an image can be confusing because it looks like a school grading scale. On a math test, 100 is perfect and 85 is a solid B. When compressing images, 100 is usually a massive waste of bandwidth and 85 is an A+.

The math behind the slider

The 1 to 100 scale is not linear. Going from 100 down to 90 drops a huge amount of file size because it strips out redundant data your monitor cannot even display properly. Going from 90 to 85 drops the size again with almost no visible penalty to the human eye.

But the curve behaves drastically differently on the extremes. Moving from 90 to 95 balloons the file size for diminishing visible gains. Your 200-kilobyte file suddenly becomes 800 kilobytes, but nobody looking at your website will be able to tell the difference. You are just forcing your visitors to download dead weight.

On the other end of the slider, dropping below 70 puts you in the danger zone. This is where the mathematical shortcuts the format uses become obvious to the naked eye. You will start to see banding in smooth color transitions. A clear blue sky will stop looking like a smooth gradient and start looking like horizontal stripes of slightly different blues. Skin tones might look patchy or blotchy. Dark shadows will fill up with blocky, pixelated noise.

Context dictates the setting

You have to match the quality to the job the image is doing. A hero banner requires different handling than a quick email attachment.

Website hero images

These are the giant banners at the top of a webpage. They set the first impression, so they need to look incredibly sharp. But they also block the rest of the page from loading if the file is too heavy. For a hero image, you want to lean toward higher quality. Setting it to 85 or 90 is usually safe.

The real secret to hero images is not the quality slider, but the physical dimensions. A massive 4000-pixel wide photo saved at 85 quality will still be a sluggish download. You need to shrink the physical dimensions first. If your website maxes out at 1920 pixels wide, you can use our resize image tool to shrink the dimensions before you compress it. A 1920-pixel image at 85 quality strikes the perfect balance of visual punch and fast loading.

Blog posts and articles

When an image is sitting between paragraphs of text, you have a lot more leeway. People are reading, scrolling, and glancing at the photos for context. For inline blog images, you can comfortably drop the quality to 80 or even 75 depending on the subject matter.

If the photo has a lot of natural texture, like a forest canopy, a gravel road, or a crowd of people, the busy details actually hide compression artifacts. You can push the compression harder on busy images. If the photo is mostly flat, simple surfaces, like a minimalist modern building against a clear sky, you might need to keep it at 85 so the flat areas stay clean.

Email attachments

Email clients are notorious for choking on large files. Most providers cap attachments at around 25 megabytes. Even if you stay under that limit, sending a massive uncompressed photo to someone's phone over a weak cellular connection is just frustrating for the recipient.

For email attachments, drop the quality down to 75 or 80. The compression might be slightly visible if the person downloads the file and zooms in closely on their monitor, but for quick viewing and sharing, it is more than enough. You can run your photos through a compress image tool before attaching them to keep your email threads lightweight and fast.

Photographs versus screenshots

This is the most common mistake people make with compression. The rules we just talked about only apply to photographs. JPEG was designed specifically for continuous-tone images. It loves smooth transitions, natural lighting, and gradients.

It absolutely hates sharp, high-contrast edges. It hates computer text, line art, icons, and software interfaces.

If you take a screenshot of a spreadsheet and save it as a JPEG at 85 quality, the white background might look fine, but the text will be surrounded by a fuzzy, blurry haze. This is called mosquito noise. The compression algorithm is trying to blend the black text into the white background, and it fails.

If you are saving a screenshot or an image with text overlay, you have two options. The first option is to crank the JPEG quality way up to 90 or 95. This forces the format to preserve those sharp edges, but the file size will be extremely heavy.

The better option is to stop using JPEG for that specific image. The PNG format was built exactly for this scenario. PNG uses lossless compression, meaning it keeps sharp edges razor-sharp without adding blurry halos around your text. A screenshot saved as a PNG will often have a smaller file size and perfectly crisp text compared to the same screenshot forced into a JPEG. If you already have a blurry screenshot saved the wrong way, you might want to try a JPG to PNG converter to at least stop further degradation, though it is always best to capture it as a PNG from the start.

Translating the slider across different apps

Not all software uses the exact same 1 to 100 scale. If you use Adobe Photoshop, you might be used to their older "Save for Web" tool, which uses the standard 1 to 100 slider. But if you just use the basic "Save As" command, Photoshop gives you a scale from 1 to 12. In that system, a 10 is roughly equivalent to our 85.

Other basic photo apps on your phone or computer just give you a dropdown for Low, Medium, High, or Maximum. If you are forced to choose words instead of numbers, "High" is usually the equivalent of the 80 to 85 range. "Maximum" is that file-bloating 95 to 100 range that you generally want to avoid.

The double-size trick for retina screens

There is a clever workaround that web developers use for modern high-resolution screens. Screens on modern phones and laptops pack twice as many pixels into the same physical space. To make an image look perfectly sharp on these screens, developers often serve an image that is twice as large as the space it occupies. A 400-pixel wide box on the screen gets an 800-pixel wide image loaded into it.

If you are using this double-size trick, you can actually turn the JPEG quality way down. An 800-pixel image saved at 40 quality will look terrible if you view it at its full 800-pixel size. But when the web browser squeezes it down into a 400-pixel box, all those ugly compression artifacts get squeezed down too. The final result looks perfectly sharp to the user, and the file size is often smaller than a standard-resolution image saved at 90 quality.

What to look for when testing your images

Since every image is a little different, you will occasionally need to tweak your settings. It helps to know exactly what visual failure looks like so you know when you have compressed an image too far.

Start by looking at the darkest areas of your photo. Shadows are usually the first place compression breaks down. Instead of a smooth, dark gradient, you will see chunky, blocky squares of gray and black.

Next, look at faces. The human eye is incredibly sensitive to skin tones. We notice immediately when skin looks plastic, patchy, or wrong. If you compress a portrait too much, the subtle color shifts in a person's cheek or forehead will clump together into harsh, flat shapes.

Finally, check high-contrast edges in your photos. Look closely at where a dark building meets a bright white sky, or where dark tree branches overlap against the clouds. If the quality setting is too low, you will see a faint glowing outline or fuzzy noise hugging that edge.

Setting your default workflow

You don't need to overthink every single image you process. Setting your default export to 85 will handle almost everything you need to do online. The files will be light enough to keep your website loading quickly, but detailed enough that your photography still looks professional.

When you run into a strict file size limit for an email or a restrictive web platform, you know you can safely drop down to 75 before things get visibly messy. And when you are dealing with text, charts, or software screenshots, you know to abandon the 85 rule entirely and reach for a PNG instead.

The goal of web images isn't to preserve perfectly uncompressed studio data. The goal is communication. You want the image to load instantly and look exactly like the subject. Hitting that 85 mark is the most reliable way to make both of those things happen at the exact same time.