Image Prep for the Web 101

Wednesday, Apr 02, 2003

Or: How I learned to keep my web developers a lot happier by doing a little formatting.

Trey Andrews <trey@dogwoodproductions.com>

One of the joys of the Internet is its ever-changing nature. Almost every time you click on a site, it's changed somehow - new headlines, new stories... and new pictures.

Our clients need their content to stay up-to-date. In order to achieve this, they either send us photos, which we quickly post to their site - quickly being the operative word - or they use one of our online applications to upload photos themselves.

For this process to work as quickly and easily as possible, there are a few simple steps that the client can take which will make things easy on all of us. Here's a quick rundown of things to consider and attend to when uploading images for use on the web.

1. GIF or JPEG?

There are two commonly used formats for images on the Internet. These two formats are GIF (pronounced "jiff") and JPEG ("jay-peg"). While each has various attributes that lend themselves to different situations, it's easy enough to differentiate between the two for practical purposes. JPEGs are good for photographs, and GIFs are good for logos or other simple artwork. (For a more detailed discussion of Internet image formats, click here)

Most of the time, clients are uploading photographs that they've taken with a digital camera or scanned in from a printed piece. If it's a shot you've taken with a digital camera, chances are it's already in JPEG format.

If you're scanning a photograph, you'll need to decide on resolution, image size and image format.

2. Resolution and Image Size

The Internet operates almost exclusively at 72 dpi (dots per inch), also referred to as "screen resolution." If you scan a 5" photograph at 100% scaling and 72dpi resolution, it will appear to be about 5 inches across on your monitor. If your photograph is smaller than five inches across, but you wish it to appear 5 inches across on your screen, scan it at 72dpi resolution, but increase the scaling.

It's always safe to scan an image slightly (slightly!) larger than you intend to use it, but never the other way around. Images can easily be reduced, but scaling an image up from a lower-resolution scan results in blocky, ugly images.

3. Image Format

When saving your file or scan, save the file in JPEG format. One of the reasons that JPEG is such a popular format online is its ability to compress the file, resulting in much faster downloads. JPEG compresses files by throwing away data, and so is referred to as a "lossy" compression system. When saving your scan, you will be prompted to select the quality level you would like to use. A lower level will result in images of reduced quality that download faster. A higher level will result in better looking pictures that take longer to download. This is a judgement call on your part, but I've found that using a quality setting of about 75% yields good results with reasonable file sizes.

4. Resizing Existing Images

It's very helpful for our clients to resize large images before sending them to us. Sending large images can be time consuming, and is often unnecessary. Resizing the images can make things much simpler. How do you know what size to make them? Remember that your image will be displayed at 100% scaling at 72dpi, so that if you make your image 5 inches across at 72dpi, it will display at roughly five inches across on your screen.

Methods for resizing images differ among image editing programs, but all operate in basically the same way. You're asked to specify the width, height and resolution of an image. When you are resizing your image, make sure that the resolution stays set to 72dpi, or screen resolution. If you make sure that the resolution stays set to 72dpi, the size in inches of your image will be more or less accurately represented, and you can determine how large you'd like to make the photograph. Again, saving the image a bit larger than is necessary is fine, but don't make it smaller.

5. Making Sure

Chances are that the image you want to use will need to be resized and possibly saved in another format before it can be used on the web. Making sure that your image is the right size, resolution and format before sending it to us or uploading it to your site will help us all save time and energy.

Remember to check:

Is your image the right size? It should only be as large as absolutely necessary.
Is your image the right resolution? It should be set to 72 dpi.
Is your image the right format? If it's a photograph, it should be a JPEG.

Related links:

WebMonkey Scanning 101

WebMonkey web graphics overview

MyDesignPrimer: GIFs vs JPEGs