HTML and CSS Reference
In-Depth Information
Reuse Images.
Once an image from your site is requested for a Web page, it is stored
in the cache on your visitor's hard drive. Subsequent requests for 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 graph-
ics such as logos and navigation buttons on multiple pages instead of creating different
versions of these common graphics.
Consider the Size/Quality Issue.
When using a graphics application to create an
image, you can choose among varying levels of image quality. There is a correspondence
between the quality of the image and the size of the image file—the higher the quality,
the larger the file size. Choose the smallest file that gives you 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 is 300KB,
you really shouldn't use it on a Web page.
Use Appropriate Resolution.
Web browsers display images at relatively low
resolution
—72ppi (pixels per inch) or 96ppi. 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 the depth of resolution, more band-
width is still used for the large file size. Be careful when taking digital photographs or
scanning. Use a resolution setting appropriate for Web pages. A one-inch image saved at
150ppi could appear close to two inches wide on a 72ppi monitor.
Specify Dimensions.
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 appli-
cation 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 moni-
tors on the same 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 images will look different on various platforms because of this issue.
Focus on Accessibility
Even though images help to create a compelling, interesting Web site, remember that
not all your visitors will be able to view your images. The Web Accessibility Initiative
has a number of guidelines for Web developers in the use of color and images.
WWW
●
Don't rely on color alone. Some visitors may have color perception deficiencies.
Use high contrast between background and text color.
Search WWH ::
Custom Search