Guidelines for Using Images
- Consider Image Load Time
- Be careful when using images on Web pages-it takes time for them to load.
A suggested maximum file size for both the Web page and all the media files used by it is 60KB.
If your banner graphic is 25KB, that does not leave much room for other images or even for your Web page XHTML.
Use images when they are neccessary to convey a message or complement a Web site's look and feel.
Table 4 lists the download time for files sizes of 30KB, 60KB, and 90KB at various connection speeds.
- Reuse Images
- Once an image from your site is requested for a Wev pafe, it s stored in he cache on your visitor's hard drive.
Subsequent requestsfor the image will use the file from the hard drive instead of another download.
This results in faster page loads for all pages that also use the image.
It is recommended that you reuse common graphics such as logos and navigation on multiple pages instead of
creating different versions of these common graphics.
- Consider the Size/Quality Issue
- When using a graphics application to creat an image, you can choose among varying levels of image quality.
There is a coorespondance between the quality of the image and the size of the image file-
the higher the quality, the larger the image size.
Choose the smallest file theat gives you the appropriate quality.
You may need to experiment until you get the right match.
Also be aware of the file size when using graphics created by others-
the image may look great but if it's 300KB, then you really shouldn't use it on a web page.
- Use Apprpriate Resolution
- Web browsers display images at relatively low resolution- 72ppi (pixels per inch) or 96 ppi.
Many digital cameras and scanners can create images with much higher resolution.
Of course, higher resolution means larger file size.
Even though the browser does not display depth of resolution, more bandwidth is still used for the larger file size.
Be careful when taking digital photographs or when scanning.
Use a resolution setting appropriate for Web pages.
A one inch image saved at 150ppi could apprear close to 2 inches wide on a 72ppi monitor.
- Specify Demensions
- Always use accurate height and width attributes on image tags.
This will allow the browser to allocate the appropriate space on the web page for the image and load the page faster.
Do not try to resize the appearance of an image by modifying the settings of the height and width attributes.
While this will work, your page will load slower and your image quality may suffer.
Instead, use a graphics application to create a smaller or larger version of the graphic when needed.
- Be Aware of Brightness and Contrast
- Gamma refers to the brightness and contrast of the monitor display.
Monitors used with Macintosh and Windows operating systems use a different default gamma setting (Macintosh 1.8, Windows 2.2).
Images that have good contrast on a computer running Windows may look slightly washed out on a Macintosh.
Images created on a Macintosh may look darker with less contrast when displayed on a computer with a Windows operating system.
Be aware that even monitors on the saem operating system may have slightly different gamma values than the default for the platform.
A Web developer cannot control gamma, but should be aware that the images will look different on various platforms because of this issue.