mastering digital images

June, 1999.
By Molly E. Holzschlag. (Link to original article.)

You have the start of a beautiful Homepage, but it's plain text only. You want to add snazzy photos and images to spice it up. The challenge is to create great graphics that load fast.

How can you do this simply, quickly, and with ease? We'll review three ways to get great digital images: scanning, digital cameras, and downloading from the Web.

Before digging in, however, you'll need to know what a few terms mean...

Image formats

Computers use many image file formats. To understand the exercises in this article, you'll need to know the following:

TIFF

While not supported on the Web, this file type is especially handy for saving your original scans. It was developed to be portable from program to program and is one of the most widely supported file formats for storing images on Macs and PCs.

GIF

This stands for Graphic Interchange Format. It is the most commonly used graphic file type on the Web. It limits the number of colors in an image so the file can download faster. It's particularly good for text, art, cartoons, and line drawings (things with a limited number of contiguous colors), but not so good for photos, which have subtle gradations of millions of colors (JPEG is best for these).

JPEG

Pronounced "Jay-Peg," this format compresses the information in an image file, making it smaller and easier to download. Most of the photographs you see on the Web are in JPEG format.

Image size

The term "image size" is generally used for two things:

The actual size on the screen.

Or, the dimensions in width and height of an image, measured in pixels. Web graphics typically should be no wider than 500 pixels, and no higher than about 300 pixels, maximum.

The size of the file.

This refers to the "weight" of an image—in other words, how much memory it takes up on your computer in kilobytes (k). The less an image weighs but the more clarity it retains is the ideal goal when creating images for the Web. For headers and footers, images should range from 1-10 k, with photos and specialty art weighing in around 20k or less. A total Web page including images and scripting should weigh (ideally) no more than 45k. Anything larger than 65k needs to be put on a diet because it will take too long to load!

Image resolution

Images are made up of dots (called pixels, see below) that combine to create the shapes and colors of an image. Resolution is the number of these dots, or pixels, appearing in the space of one inch. Images for the Web are set at 72 DPI (dots per inch), or 72 pixels per inch. Low resolution images look grainy, whereas high resolution images are sharp and beautiful. Higher resolution, however, means a larger file size.

Pixel

A small dot on your computer screen that contains a unit of color. The entire screen is comprised of a grid of pixels that display the images on your screen. A standard computer monitor displays 72 pixels per inch (ppi). That's 72 vertically and 72 horizontally, or 5184 pixels per square inch—much higher resolution than a TV.
As in: 'This graphic is 45 X 72 pixels.'

It starts at the source

Begin with excellent source material. Have you seen the computer acronym "GIGO?" It means "garbage in, garbage out." The point is, you have to start with great stuff! This means your digital scans, photos, and acquired art should be the best available.

Using a scanner: scan smart

Be sure your photo or artwork is clean. To do this, buy a canister of compressed air from your local office supply or art store. Hold the artwork by a far edge at arm's length, and spray the air across the work (don't point the canister directly at the work). This will help remove dust and debris.

The surface of your scanner should be clean as well! Follow your scanner manufacturer's directions for ensuring that your scan bed is free of fingerprints, dust, and smudges—these will show up on your image if you don't!

Scan at 72 DPI (dots per inch). This is the default for many of today's simple flatbed scanners. Look in your scanner documentation to learn how to do this.

Crop scans. Even though you'll be manipulating the image later, once you've scanned in your image, it's good to use your imaging tools to crop away unwanted areas of the scan.

Save this file. Use a maximum JPEG or TIFF setting. This is not your final image. Rather, it is your source image. You will use it to create the Web image. You can always go back to it if you make a mistake, saving you the time and frustration of scanning all over again.

Using a digital camera: shoot straight

When working with your digital camera, be sure your lens is clean. As with scanning, smudges and dirt will interfere with the quality of the final image.

Digital cameras are great—you can take as many pictures as you like and delete those that don't work. Use this to your advantage—choose only those pictures that are well-lit, well-balanced, and pleasing to the eye.

Use your imaging program to drop your image down to 72 DPI. This is typically found in an "Image > Size" or "Image > Information" dialogue within your program. Use your image editing tools to crop away any unwanted portions of the image.

Save this file (as you do with a scanned image). This is your source (not final) image.

Get images from the web: choose right

There are many images you can download right off the Web for use in your pages. Select images that are crisp and clean, without blurry portions or harsh edges.

Once you've downloaded the image, open it up in your image editor, and look at the DPI. Is it 72? If not, change it.

As with scanned or digital images, crop away any portions of the image you don't want.

Save the source file as a TIFF or JPEG. Note: if the image started as a GIF, you'll be limited in your ability to improve the look of the file if it wasn't originally saved smart. This is why you want to make sure the image looks great from the start!

Great places to get images for the Web

Barry's Clip Art Server

One of the most popular free clip art resources online.

Caboodles of Clip Art

Tons of fun, free clip art.

The Internet Baglady

Great source for tons of free or low-cost Web graphics.

ArtToday

Free and very low-cost archive of clip art, photos, and fonts for use on the Web.

Photodisc

This is the place for your high-end needs. You'll have to pay a fee to use individual images, but the quality and selection is unsurpassed online.

EyeWire

Another fantastic high-end resource for clip art, photos, and fonts.

Cut it down to size

Once you have a great source file, bring it down to size in both dimension and file size (also referred to as weight). Follow these steps to help your digital images look great on your page, and download fast, too.

1. Open your source file in your image editor.
2. Look at the image's size. Web pages are small! You'll need to make sure the image is less than 500 pixels in width, and 295 pixels in height for most Web image needs. For headers, a good size is about 350 x 50 pixels. Photos should run 300 pixels in width or less, and 200 pixels in height or less. Seem small? It is, but that's the Web. Any bigger and you can cause all kinds of unfortunate problems including images that run off a page and images that take forever to download.
3. In most imaging programs, you can set the image's size by pixels and keep the aspect ratio. This means if you change the width, the height is automatically adjusted. Be sure you have this option turned on. Many imaging programs let you size by percentage, which essentially does the same thing. Resize your image to an appropriate size.

Compression

After you've sized the image in terms of dimension, it's time to compress it for better load time.

If your image is a photograph or a graphic with a lot of colors and gradations of color and light within it, save it as a JPEG. Most imaging programs let you do this by going to "File > Save As," and choosing the JPEG (also termed JPG) option. You'll usually have a choice of "Maximum," "High," "Medium," and "Low" settings. Typically, "Medium" is your best bet, although you have to try different settings to see what gives you the best combination of file size and appearance.

For line art such as cartoons and simple drawings with a few, flat colors, GIF is your best bet. Use the "Save As" or "Export" option and save the file as a GIF. Be sure to save this file with a name different than the source file name. The idea here is to maintain that source file so you can go back later and make changes or improvements.

Are there more techniques to enhance and optimize your digital images with greater finesse? Absolutely. I'll be taking a look at how to do more precise image processing and design in future articles. In the meantime, if you follow these basic rules, your images will look better and load faster, making you and your Hompage visitors very happy!