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:
- 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.
- Use the drawing, text, shape and other tools provided in the graphics program to create your image.
- 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.
- If necessary, lower the resolution of the image to 72 dpi.
- If necessary, resize the image to the height and width in pixels specifications desired.
- 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 800×600 than one that is set at 1440×900.
Preparing Photographs
To prepare photographs for presentation on the web, follow these steps:
- 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.
- Use the color correction, drawing, text, shape, and other tools provided in the graphics program to alter and improve your image.
- 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.
- If necessary, lower the resolution of the image to 72dpi.
- If necessary, resize the image to the height and width in pixels specifications desired.
- 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.