Coding Horror: Screenshots: JPEG vs. GIF

December 10, 2005

Screenshots: JPEG vs. GIF

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 image encoding format 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)

It's pretty clear that 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 is 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 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 Windows Vista uses color blending and color transitions even more extensively. This means you're effectively stuck with JPEG for screenshots.

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:

Lossless PNG	541 kb
5% JPEG	104 kb
10% JPEG	66 kb
20% JPEG	43 kb
30% JPEG	26 kb
40% JPEG	17 kb
50% JPEG	12 kb

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 is identical to most casual viewers.

But the Lenna image doesn't have any black on white text embedded in it, like a Windows Vista 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. Once Vista hits, I guess we should brace ourselves for a wave of either extremely large-- or extremely crappy-- screenshots. And my money is on the latter.

Posted by Jeff Atwood View blog reactions

« Headphone Snobbery an Incomplete Guide to Building a Web Site that Works »

Comments

I'm guilty as charged :(

Scott on December 11, 2005 11:50 PM

And even better than Gif, use PNG-8 that you will optimize with PNGGauntlet (<a href="http://brh.numbera.com/software/pnggauntlet/).">http://brh.numbera.com/software/pnggauntlet/).</a>

You'll shave 15% of the file size, compared to the Gif one...

FlorentG on December 12, 2005 04:26 AM

Jeff, you should use appropriate tools to create them. Either use a good imaging software such as Photoshop CS or CS2 (Photoshop 7 had real troubles dealing with PNG files) and Export for Web, or use a recompresser such as PNG Optimizer (<a href="http://www.psydk.org/PngOptimizer.php),">http://www.psydk.org/PngOptimizer.php),</a> merely dropping your Vista PNG screenshot in PNGO yielded a 20% smaller file (491k for no quality loss).

And don't forget to play with the bitplanes (switch to 8bits PNG), that doesn't work with the Vista screenshot (too many tones), but it's extremely common to see extremely large PNG/24 images that could be 60% smaller with virtually no quality loss if they were to be switched to PNG/8.

Masklinn on December 12, 2005 06:28 AM

Masklinn > For the Vista screenshots, you may as well use dithering when converting it to Png-8. It improves the look a little bit.

FlorentG on December 12, 2005 08:38 AM

At large organizations there is also a tendency to send multi-meg status mails or due to exactly this type of bad choice on image format for embedded graphs and screen shots.

On the other hand unless the tools recognize you have the problem and then solve it are easier to use it will remain. I don't expect everyone to to hand pick their compression formats and play with each knob and dial.

Steve Steiner on December 12, 2005 11:27 AM

> merely dropping your Vista PNG screenshot in PNGO yielded a 20% smaller file (491k for no quality loss).

So what is the smallest we can get the 1024x768 vista screenshot without *visible* loss of detail in the black-on-white text? It doesn't have to be lossless PNG, either.

> On the other hand unless the tools recognize you have the problem and then solve it are easier to use it will remain.

Outlook 2003, for example, treats every image you drop in as a JPEG (looks like about 15% JPEG to me). This works, but it leads to some very ugly screenshots as demonstrated by the first picture in this post.

I wish it could "decide" to use GIF/PNG or JPEG based on an analysis of the image rather than blindly defaulting to 15% JPEG every time.

Jeff Atwood on December 12, 2005 12:40 PM

Another problem with screen shots is ClearType. It can look messed up on a compressed image. And of course you see the rainbow colours when you zoom in or print.

Chris Lundie on December 12, 2005 03:59 PM

You don't need a special tool to get the Vista PNG smaller - Irfanview gives 491k when you save with level 9 compression.

What happens if you try doing a similar Vista screenshot with a plain (single colour) desktop? I'm guessing the 'photographic' desktop background is the culprit here, not the widgets/controls/whatever you call them.

Rik Hemsley on December 13, 2005 09:08 AM

Does anyone care about the legal issues of using GIF anymore? Not that anyone ever really did but I knew enough people that were aware of the patent that they didn't want to chance using the format.

Personally, I use PNG for everything.

Shawn Oster on December 13, 2005 12:34 PM

> merely dropping your Vista PNG screenshot in PNGO yielded a 20% smaller file (491k for no quality loss).

I was curious about this, so I experimented. Starting with the orignal 617 kb image:

1. OptiPng
http://www.cs.toronto.edu/~cosmin/pngtech/optipng/

file size: 595 kb (3.6% decrease)

2. PngOptimizer
http://www.psydk.org/PngOptimizer.php

file size: 476 kb (20% decrease)

However, this is ENTIRELY due to the fact that interlacing (progressive rendering) was stripped out. If I run the test like so..

PngOptimizerCL.exe -file:"vista-sample-screenshot.png" -KeepInterlacing

The file size is identical to the OptiPng result-- no savings! Similarly, if I tell OptiPing not to interlace, like so..

optipng -o7 -i0 vista-sample-screenshot.png

I get a savings of 20% as well.

So the moral is, PNG interlacing isn't free..

Jeff Atwood on December 14, 2005 03:46 PM

I made your screenshot a bit more like you'd set a flat background and it's 331k:

http://rikkus.info/tmp/vista-flat-background.png

If you really do set a flat background, I bet PNG gets close to 1% JPEG at 289k, or perhaps even gives a smaller file size.

Rik Hemsley on December 14, 2005 06:00 PM

Screenshot schcreenshot (er, that worked better mentally -no, wait, it didn't work there either).

I enjoy the Win+S OneNote screen clipping capability, which helps you focus on just the part you're actually interested in!

Full-screen screenshots are for... people with nothing incriminating on their desktop (yet).

Tristank on December 14, 2005 07:56 PM

> which helps you focus on just the part you're actually interested in!

It's like ALT+PRINTSCREEN, then, but with.. er.. more cowbell?

Jeff Atwood on December 14, 2005 08:14 PM

> So what is the smallest we can get the 1024x768 vista screenshot without *visible* loss of detail in the black-on-white text?

I used imagemagick to convert the screenshot to a GIF. It does a very good job of dithering colors on screenshots.

I then compressed the image with PNGOUTWin.

The result is 214 K.

David Blake on May 23, 2006 07:05 AM

Well, if you want to convert it to a 256 color dithered image, I can get it to down to 134k. It looks TERRIBLE this way though, even with a fancy random dither. 256 is a woefully inadequate number of colors to capture a vista screenshot...

Jeff Atwood on May 23, 2006 09:08 AM

I'll send you the screenshot. It doesn't look that bad to me.

David Blake on May 31, 2006 06:12 AM