Coding Horror

programming and human factors

Screenshots: JPEG vs. GIF (and PNG)

It constantly amazes me how many times I encounter pages where screenshots are inappropriately stored as JPEGs. Not to single Mike Gunderloy out, but there's yet another example in his recent article on configuring an ASP.NET 2.0 website:

jpeg-compression-artifacts.png

That is just nasty. As in, Miss Jackson if you're nasty.

Haven't the two most common image encoding formats on the web – GIF and JPEG – been around long enough for editors to figure out which one is appropriate for a screenshot?

Evidently not. For those hapless editors, here's the handy Cliff's Notes version of which encoding algorithm to choose for your screenshots:

Mona Lisa as JPEG Mona Lisa as GIF
Use JPEG Use GIF (or PNG)

Most GUI screenshots lean more towards the picture on the right than the picture on the left. When all else fails, try all three commonly supported image formats (GIF, PNG, and JPEG) and use your common sense to manage the quality and size tradeoffs. I know bandwidth can be expensive. Just don't make our eyeballs bleed.

Unfortunately, capturing decent looking screenshots in a reasonable file size gets more difficult with each successive OS release. Windows XP's default "Luna" theme was just colorful enough to make it difficult to capture using lossless algorithms like PNG and GIF. That's one reason I prefer the older "classic" Windows 2000 style GUI skin in XP. But later versions of Windows use color blending and color transitions even more extensively. This means you're effectively stuck with lossy JPEG for screenshots in any modern OS.

Mac OS 1.1
Great for GIF and PNG!
Mac OS X
Not so much. Use JPG.

At least JPEG images have selectable quality levels. Here's an example of the various JPEG quality levels and the resulting image sizes using the reference 512x512 Lenna image:

Lena image, 5% JPEG compression
5% JPEG, 104 kb
Lena image, 10% JPEG compression
10% JPEG, 66 kb
Lena image, 20% JPEG compression
20% JPEG, 43 kb
Lena image, 30% JPEG compression
30% JPEG, 26 kb
Lena image, 40% JPEG compression
40% JPEG, 17 kb
Lena image, 50% JPEG compression
50% JPEG, 12 kb

For comparison, the lossless PNG version of this image is 541 kb – that's more than 5 times the size of the very high quality 5% JPEG!

Personally, I can't tell the Lenna reference image from the 10% JPEG without zooming in excessively. That's a nearly 10:1 file size savings for an image that will be identical to most casual viewers.

But the Lenna image doesn't have any black on white text embedded in it, like a desktop screenshot would. And these harsh color transitions are particularly difficult for JPEG to encode, as illustrated so painfully in the first screenshot. So let's try a 1024x768 screenshot of a typical Windows Vista desktop with an explorer window, icons, desktop background, etcetera:

Lossless PNG (noninterlaced) 476 kb
Lossless JPEG 821 kb
1% JPEG 289 kb

Unfortunately, the 1% JPEG still has quite a bit of noise around the black text to my eye. Check it out yourself and compare it with the lossless PNG. Is this acceptable?

Written by Jeff Atwood

Indoor enthusiast. Co-founder of Stack Exchange and Discourse. Disclaimer: I have no idea what I'm talking about. Find me here: http://twitter.com/codinghorror