Why do my images look fuzzy?

A familiar question with a number of different answers...

One important aspect of images that you need to be aware of is the difference between Raster (or Bitmap) and Vector images.

Raster images use a grid of small squares to represent images. Each square, or pixel, has a specific location and color value. Raster images contain a fixed number of pixels and are therefore resolution-dependent. This is why bitmap images lose detail and become jagged (or aliased) in appearance when they are scaled in excess of their original size. Raster images are the best choice for representing subtle color gradation, such as you would find in photographs.

Vector images are made of lines and curves defined by vectors. These mathematical objects describe graphics according to their geometric characteristics. Due to the mathematical nature of vector images, they can be resized without losing image clarity. Vector graphics are the best choice for bold graphics, such as logos, that must retain crispness when variously sized.

What does this mean to you and your fuzzy images?
First, if you're putting your image online, it must be a raster image (e.g., GIF or JPG). Knowing that raster images scaled larger than the original artwork become fuzzy, choose your images wisely with an eye toward the size of image you ultimately need. If you have some control over the size, such as when you include a photo from your digital camera, start with a large image, then downsize it in a graphics application (such as Photoshop or PaintShop Pro) to the final size you want. Downsizing of raster images will not cause a decrease in perceived image quality on screen. In fact, it may improve the appearance of an unfocused image by lessening the overall amount of detail.

Should I use JPGs or GIFs for my web site?
JPG format is recommended for photographs and graphics with graduated color fills. JPGs support 16 million colors and you'll find that generally photographs compress smaller as JPGs than as GIFs. GIFs are best suited for black and white art, graphics with solid colors, transparent and animated graphics. GIFs support only 256 colors.

Second, printing is a whole other matter! Often you'll find that what looks fine on screen doesn't look nearly as good when you print it. If you are printing a raster image, such as a photograph you've scanned, the best output will come from an increased resolution. This may be achieved through selecting a high resolution at the time of scanning and/or by increasing the image's resolution through a graphics application prior to printing. If you're taking a picture with a digital camera with the ultimate goal being a printout, set your camera to its highest resolution before taking the photo. In print, a high resolution image has more detail than the same image at low resolution. Note that on screen, a raster image at high resolution will appear much larger than the desired, printed output (and larger than its low resolution counterpart). The enlarged display does not affect the printed dimensions, however. Your graphics application should be able to report the pixel dimensions versus the print size. Be sure to print the image at the highest resolution (quality) your printer supports, as well.

You'll generally want your logo developed as a vector image and delivered to you as an EPS (Encapsulated PostScript) file, among other format types. EPS graphics are supported by all graphic, illustration, and page-layout programs. This flexibility allows you to place your vector logo into checks in your accounting software, on your correspondences, invoices, advertising, and so on, at various sizes without sacrificing clarity. Remember that saving a raster image with an EPS extension will not suddenly make it scalable; the original image must be a vector graphic to support the scalability. EPS graphics can also be saved as GIFs via a graphics application for online usage; if a designer is creating your logo, ask for formats appropriate for print and online purposes. Note that if you have a non-PostScript printer, you should also ask for the image in EMF (Enhance Metafile) format. EMF files may look somewhat distorted on screen, but should print correctly to your non-PS printer.