Image Quality Experiments

At lower screen resolutions, the edges of the large text above look ragged. This text is generated by your browser, so nothing much can be done about it as long as it's text. Let's see what it looks like as a graphic about the same size. First the graphic, and then the text generated by your browser again ...

The difference you see is that the text in the graphic has been anti-aliased. (In this case shades of red have been used at the edges of the type to make it seem smoother to the eye. Of course this actually makes it blurry, but your brain integrates all those extra shades of red into a smoother edge.)

How you create this kind of anti-aliased type depends on your graphic program. We actually had trouble since we wanted to save this image as a GIF with a transparent background. In our first tries, when we converted to indexed color we only got two colors and no anti-aliasing.

There are two basic types of graphics you can put on web pages: GIF which work best for artwork without too many colors, and JPG which you want to use for photos. A big advantage of the GIF format is that it allows an image to have a transparent background which lets it float over another background. Another difference is that although compressed, GIFs never loose any detail. JPGs on the other hand allow you to specify how much compression to use when you save them. The compression algorithm is "lossy", which means information is lost. The high compression comes at the expense of image quality. Usually the eye doesn't notice the loss; if you want to look for it, look at the boundaries between colors. The difference is more noticeable when magnified, or the image is printed on a high quality printer.

Since the anti-aliased GIF is only 2K, it loads very quickly. We were going to convert our pages to use the graphic instead of the text until we saw them printed on a high quality laser printer. There because the printer is able to do it's own anti-aliasing (at 1200+ dpi) based on the font information, the quality of the text version is far superior.

Let's now look the same issue in smaller type. We use the Impact font for our name, which looks like this when displayed by your browser with SIZE="+1": and at standard size, or this if you add bold: and (for obvious reasons we stopped using bold). If instead we use a small image with anti-aliasing we get, which as you see doesn't sit well on the baseline of the type. The decender (the part of the "y" which goes below the baseline) is a problem, but with closer cropping we can get, which is a little better. The jury was still out ... do we use the text or the second graphic? (The answer was obvious when we printed the page.)

Here's another set of experiments we did with our logo which usually appears on one of the pages of a website we design. The original logo was a 16 color GIF 250x200 pixels in size and 6K bytes long. Our first attempt to anti-alias failed, but we here you see what happens when we use 500x400 version (15K bytes) and tell the browser to display it in the same 250x200 size. It actually doesn't look as good on the screen, but if you print this page you'll see it looks better. That's because the printer has a better quality image to work with. Original 250x200, 16 colors, 6K bytes 500x400, 16 color verson, 15K bytes

Now here are another pair with the text anti-aliased. 250x256, 256 colors, 15K bytes 500x256, 256 colors, 27K bytes

There are always trade-offs. The images rendered at 250x200 by the graphics program look better on the screen. The 500x400 images reduced to 250x200 look better when printed. Internet Explorer seem to do a better job than Opera of printing both the large image at the top and the 27K byte logo. When printed from Opera on a black and white printer, the large image has very ragged edges, and there is no shading applied to any of the states. When printed from IE, the large image has fuzzy edges, but doesn't look too bad, and the states in the 27K logo were shaded (until we made that background transparent and then the shading when away, even when printed form IE). Resources

Visits since October 4, 2003: