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:


This is a companion discussion topic for the original blog entry at: http://www.codinghorror.com/blog/2005/12/screenshots-jpeg-vs-gif.html

I’m guilty as charged :frowning:

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.

And even better than Gif, use PNG-8 that you will optimize with PNGGauntlet.

You’ll shave 15% of the file size, compared to the Gif one…

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 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 For the Vista screenshots, you may as well use dithering when converting it to Png-8. It improves the look a little bit.

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.

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.

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.

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.

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…

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.

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).

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

It’s like ALT+PRINTSCREEN, then, but with… er… more cowbell?

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.

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…

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

The images are no longer available.