Preparing Images and Photos for the Web

Here are some guidelines for making your images download quickly and display correctly.

Preparing Images

To prepare images for presentation on the Web, follow these steps:

1. Begin a new file. If it’s a photo or original artwork, use 300 dpi as the resolution. If you are creating something simple, set the resolution to 72 dpi.
2. Use the drawing, text, shape and other tools provided in the graphics program to create your image.
3. Save your file in the native file format (a file type meant for editing that is specific to the image editing program) of the program you are using. For example, a Photoshop document creates files with a ".psd" extension. If you need to make a change or edit later, do it in this file rather than on the Web.
4. If necessary, lower the resolution of the image to 72 dpi.
5. If necessary, resize the image to the height and width in pixels specifications desired.
6. Save the file in a Web-ready file format, usually a GIF (most programs give you several choices for file types), finding a balance between the way the file looks and an appropriate file size. Some image programs will let you preview the final file output, whie in others, you have to save it and load it in the browser to see the final effect.

Measure in pixels

The unit of measurement for Web design is pixels, which are relative, not absolute, units. The size of a pixel can change from one Web user to another. It all depends on the screen resolution setting. So a 400-pixel wide image will be considerably larger on a monitor set to 800x600 than one that is set at 1440x900.

Preparing Photographs

To prepare photographs for presentation on the web, follow these steps:

1. Download the photo from your digital camera or scan in the photograph. The process for this varies depending on the software bundled with your scanner or camera. The image will probably end up in "Your Photos" on Windows, or the "Photos" folder on a Mac, unless you chose some other folder as the default destination.
2. Use the color correction, drawing, text, shape, and other tools provided in the graphics program to alter and improve your image.
3. Save a copy of your file in the native file format of the program you are using. Make later changes or edits in this file rather than on the web. With photographs, save an untouched version of the photo in case you want to use it again for another purpose.
4. If necessary, lower the resolution of the image to 72dpi.
5. If necessary, resize the image to the height and width in pixels specifications desired.
6. Save the file in a web-ready format, usually a JPEG, finding a balance between the way the file looks and an appropriate file size.

Making images web-ready is all about compromise. In general, the better your image looks, the larger the file size will be. The larger the file size, the longer it will take to download. Your job is to find a compromise between quality and file size. Some things to consider are:

• Is this image conveying crucial information? If so, go for higher quality.
• Is the image on a page with a lot of other images? If so, make the file size smaller.
• Will your web visitor be able to detect that the quality of a photo or image isn’t very good?
• Make images of people fairly high quality because visual acuity is strongest with people’s faces. 

> READ NEXT ARTICLE: Checking and Changing Resolution

• I use an SLR and shoot with 10 mega pixels which is of course way too big for online viewing.  To prepare to online use, I run the photos through a batch that shrinks them to either 500, 800 or 1200 pixels wide depending on the webpage.  This is my quick and dirty way to upload an image gallery without hand picking photos.

  Posted by .(JavaScript must be enabled to view this email address)  on  09/19  at  08:50 PM

You must be registered (free) in order to post a comment.