REM State

As part of my work with In Series, I decided that I needed to take a few screenshots for the sake of reference. I thought it would be a really simple — but a problem cropped up that I wasn’t expecting.

Naturally, I didn’t want to cram a whole bunch of full-size images onto a page and hope for the best. However, at the same time, I did want to make sure that people visiting the screenshot page saw screenshots right off the bat. Text links are nice and light, but they don’t even whet the visual curiosity that screenshot-seekers are trying to sate. This left me with thumbnails — the reduced size would keep the performance of the page up, and provide the reader with a nice teaser.

There were two issues with thumbnailing the screenshots, however: the image dimensions of the screenshots, and the storage size of the image files. I wanted to reduce the latter as much as possible, which meant that the former would have to be reduced as well. However, simply taking the screenshots and scaling them down until they were an acceptable size would produce nearly worthless thumbnails: there’s no way you could see what was actually going on. The answer for this was to crop out the most interesting regions, and then scale that down if needed.

This is all well and good, so far — it’s a textbook case of image reduction for the web. However, I was in for a bit of a surprise: when working with my cropped images (PNGs), shrinking the images dimensions and saving resulted in a larger file than the cropped-only version. Of course, I did a double-take and repeated the process with my other cropped images, with the same outcome every time.

After a little bit of pondering, I wondered if maybe — just maybe — the re-sizing action was taking the nice, large, highly-compressible regions of solid colors, and messing them up. Using the Gimp, I set my first cropped image’s “mode” to “palette”, selecting 4 colors (which was the number of colors that I saw). I then did the reduction, as before — but the output looked like crap. The lines of the text were all chopped off, and the result was unreadable. However, I was definitely on to something: the image reduction was causing extra color shades to be used to give the illusion of detail, not unlike anti-aliasing. So, I repeated the same process, this time with a 15 color palette, but the output still looked like crap.

Then I realized: the palette conversion was throwing away color options for the size reduction to choose from. The reason the output looked like crap was because there were no extra shades of blue or gray to do the smoothing with. So, I tried the other ordering: size-reduce, then palette reduce. This combination worked marvelously: the resulting thumbnails have reasonable dimensions, are readable, and are 1–2KiB in size.

The Final Process

So, for those of you who want to put this into practice (with Gimp-specific notes in parenthesis):

1. Pick the smallest part of the image with all the information you need
2. Crop the image to that region (shift+C)
3. Scale the image down (Image -> Scale Image…)
4. Reduce the palette (Image -> Mode -> Indexed…)