Screenshots: JPEG vs. GIF (and PNG)

December 10, 2005

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:

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:

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.

Great for GIF and PNG!

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:

5% JPEG, 104 kb	10% JPEG, 66 kb
20% JPEG, 43 kb	30% JPEG, 26 kb
40% JPEG, 17 kb	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:

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?