On Screen vs. Printed

Most people have had the problem of copying a graphic that looks nice on the screen and find, when they print it, the graphic seems to loose quality. The problem is: the screen uses light while printed images use ink. The human eye is more forgiving of image created with light. Printed matter requires a finer resolution. On screen, a pixel is a pixel. When printed, a pixel can be multiple dots. An edge that looks smooth on a screen will "pixelate" when printed.

Os

The graphic to the left shows two versions of an "O" with a blowup representing the printed resolution. The set on the left use aliasing [fuzzy edges] while the set on the right, a pixel is either solid or clear.

Note: The aliasing is possible because of alpha channel transparency available with the PNG format. The aliased edges look cleaner even in the blowup.

OsOs

On screen, the graphic "Q" on the left should look cleaner than the one on the right. If you print this page, the one on the right should look a bit cleaner. The difference is the one on the right is actual three times the size of the one on the left, but the html code makes it appear the same size. When printed, the one on the right is printed with a 300 dpi resolution. The one on the left may be sharper or fuzzier based on your printer's ability to smooth.

So, what's my point?

A graphic sized well for efficient, clean display on the screen—and in your graphics editor—will appear course when printed. A graphic sized well for printing will be too big for your screen. The fuzziness or clarity of the graphics on this page are highly dependent on the ability of your browser to deal with graphics.

Which emphasizes the Golden Rule:

Never let an application determine your graphics resolution!