Thursday, February 18, 2010

Getting Web Images Right

I appreciate all the programming and troubleshooting tips posted by the many enthusiastic contributors from all over the world. Many of them include lots (and lots) of screenshots to illustrate what they are trying so hard to help us. One problem, however, is the clarity (and size) of those screenshot images.

I always love screenshot images that are in native resolution: one pixel in the bitmap corresponding to one pixel on the original screen and corresponding to one pixel on my screen.

No one should have any problems capturing the screenshot - the [Alt]-[prt sc] key does it all to the active window. I think the problem is in saving it. The original MS Paint was a disaster. You have to manually set the size your image. And it can't save to the png format.

I find that Paint Dot NET is the most convenient tool. Pasting from the clipboard automatically creates a new image of the dimensions of the image in the clipboard. So it's the perfect size, no chances of error. And saving to png gives the best, in terms of color and file size, for most dialog box type of screenshots.

One mistake most people make is to resize (I don't mean crop) the screenshot images. Never never do that. The moment the image is resized, even by one pixel smaller, a million floating point calculations are done to divide out the original number of pixels over the new number of pixels. Unless it happens to be nice round integers, there will be lots of fractions and arbitrary decisions have to be made whether to round up or truncate. Thus the image gets distorted and the colors get distorted. Textual characters that use the minimum number of pixels in the original image become illegible.

There are two places where images can be resized. First is in the image editing software as mentioned in the preceding paragraph. The second place is at the web page. Many people still add a WIDTH or HEIGHT attribute to their IMG tag. NEVER DO THIS! But then there are culprits, such as Blogger.com, who refuse to allow me to put up my original image. Look at the sample below:



My picture was 406x471 pixels, a crisp looking snapshot of Task Manager with one pixel in my file for every one pixel in the original image, and a file size of only 7.63kB.  The picture fits more than nicely on the page, but Google insists on greeking it into an ugly illegible smudge with a file size of 79kb!!!!. Grrrr!  Why why why?


No comments: