It’s a fact that will continue to exist for a long time, as long as people work with images and digital photography. Files need to be compressed, and the images themselves must be processed in a way that preserves decent quality and makes them easy to use in web design or send via email. In our case — web design — this is especially important, because the better you can compress a file while keeping the quality, the more visuals you can create, and the more images you can display.
Since JPEG is the dominant format for images, despite the existence of PNG and WebP, it’s been in use for over two decades, and compression happens already at the time of saving. But the quality often suffers, although not always noticeably — especially when viewing images on a computer screen. However, when you try to save, print, or resize such images, all the flaws of JPEG compression begin to show.
Thanks to Photoshop and one of its rarely used blending modes, you can see how JPEG compression affects your image — and how to avoid its horrors. In other words, we won’t just talk about how to compress JPEGs properly, we’ll also look at how Photoshop can help reduce distortion.
Considering how many different images and photos are used in web design, these capabilities will definitely come in handy for creatives. So let’s jump right in.
Blending Mode
To accurately see what happens to an image when you compress it, we use Photoshop’s blending mode — Difference. We mentioned it briefly earlier. It’s called “Difference” because it looks for differences between two layers. Any identical areas (e.g., black color) cancel each other out, while different areas display as strange or alien colors. This mode isn’t usually used for special effects, and if you remember our practical materials, you’ll notice we never really featured it.
However, Difference mode does an incredible job showing how much "garbage" we add to our images during compression. That doesn't mean you should stop compressing files or abandon JPEG altogether. That’s simply unrealistic. But it helps us understand what’s happening to an image and how to reduce damage — especially with high-resolution photos in web design. When opened on a screen above 1080p, artifacts and noise become obvious, creating a negative impression of both the site and the designer’s work.
We have two images — one compressed by 60%. But which is which? The artifacts can be deceptive, especially on a computer screen. The truth: these are completely different images. On the left — the original. On the right — compressed by 60%. It’s hard to believe, but zooming in will reveal added elements, blurriness, and missing pixels. If you’re not printing, you can still use it in web design — but any editing of the compressed version will expose its flaws more and more.
Let’s use the Difference mode , which compares two layers. We’ll test it in action. Open the original image and duplicate it with Ctrl+J. Don’t rename anything. Select Layer 1 and choose Difference from the blending mode list.
The entire image turns black — this means both layers are identical. The Difference mode found no changes.
But let’s double-check that the black is truly uniform. Add a Levels adjustment layer to Layer 1.
A histogram will appear. If every pixel is pure black (as expected with identical layers), you’ll see one vertical line at the left edge. That means no extra colors, no artifacts, no garbage. It’s perfect. That’s always the case when you duplicate the original — a 100% copy.
But let’s keep going…
Keep only the background layer and delete Layer 1 and the Levels. Let’s go back to the beginning. This time, compare the original with a slightly compressed version. Open both documents, select the Move Tool, and drag the compressed image into the original’s window — it becomes a new layer.
Important: when dragging, a white border will appear around the destination — that confirms a layer is being added.
Since we dragged in the compressed image, it may appear slightly off-position. Fix it by holding Shift or aligning with guides.
Now we have two layers again — but one contains a version compressed by 60%. Set Layer 1 to Difference mode. If the images are identical, we should see pure black again. You might see just black — or some artifacts — but up close, there are definitely color residues.
Add a Levels adjustment layer. Previously, the histogram showed a single vertical bar. Now it’s wider and shaped differently — clearly indicating something foreign in the image. So, while they may appear identical at first glance, they are not.
What’s wrong with the compressed one? Garbage. By compressing it, we added noise, junk, artifacts — call it what you want. We damaged the original. How much junk does JPEG add? Hard to see — even with blending modes and histograms. But shift all the Levels sliders to the left — this amplifies subtle noise, making it easier to spot.
Remember: weird colored areas (red, yellow, etc.) are exactly where compression artifacts appear. It’s not pretty — but it’s what “JPEG compression artifacts” really look like. This trick helps you identify where damage has occurred.
Web designers can hide these areas with text or blocks (if the image is used as a background). In other words — “cover them up.”
Okay, we now know that compressing an image by 60% introduces serious damage. So how do we choose optimal compression — one that doesn’t distort the image too much but also keeps file size small? Photoshop uses a compression scale from 0 to 12, where 12 is the best quality. Unlike the more intuitive 0 to 10 scale (where 10 means 100%), Adobe’s system is a bit quirky.
After many comparisons, you’ll notice that some scale values make little sense. Compare 80%, 77%, and 84% — they all map to levels 10 and 11 on Adobe’s scale. But there’s almost no visual difference. However, the gap between 11 and 9 is very noticeable. Likewise, there’s almost no visible difference between levels 12 and 11.
We saved our image using compression level 11 and analyzed the noise. As you can see, it’s… nonexistent, even in the Levels histogram.
Compression level 10, however, gives a thicker line on the Levels histogram, even if the black still looks uniform to the eye.
So, sometimes you can compress aggressively across multiple steps and only then start comparing to see if artifacts have appeared.
Save for Web
In the latest versions of Photoshop, the Save for Web feature is still around — although it’s marked as Legacy. You’ll find it under Export. Here, compression works via a different algorithm. Yes, it’s yet another method. This time you can set the compression percentage from 0 to 100, adjust additional settings, and drastically reduce file size with little to no quality loss.
Adobe intentionally created this algorithm to be ideal for the web — better than standard save methods. We saved our image at max settings (100%), got a drastically smaller file size, and still — no artifacts, neither in Difference mode nor in the Levels histogram.
And there’s one more example.
Conclusion
For many photos, even 77% (level 10) might still be too high — creating a large file but introducing minimal distortion. Choosing level 9 often gives just enough quality with a smaller file size, which is acceptable in most cases. Some images even compress well at 62% or 54% — good enough even for print.
In other words, the right compression level, method, and settings for JPEG depend on the specific image. Either way, all of this is extremely useful for web design, especially when dealing with lots of images — where you need to save space and improve load speed. To win the battle with curious users and picky clients, it never hurts to make sure you’ve not only compressed the image — but preserved its quality, avoided adding noise or blur, and maintained professional standards.
That, in turn, reflects positively not just on the website but on the designer's skill and reputation.