Creating Images
Produce images
that will load quickly
Since users need web pages to load quickly, you
should make your image files small. In this site we try to limit the
size of individual images to 5k, and try to limit the total size of
all the images on any single page to 20k. Because GIFs are usually
smaller than JPEGs, try to use GIFs whenever possible. This trade-off
is discussed below.
Use colors that
succeed on a variety of platforms
To make your colors look good on a variety of
platforms and monitors, design your images using a cross-platform,
browser-safe color palette comprised of 216 colors (sometimes referred
to as a Web safe color palette). You can download our Web safe
216-color palette, which contains the hexadecimal color codes HTML
requires for specifying colors.
Produce images
in the most appropriate format
|
|
GIF
formats are better for some types of images, and JPEG formats are
better for other types of images. GIF formats are particularly
useful for images that contain flat areas of color (example #1).
If you save such an image in a JPEG format, the JPEG formatting
process may introduce unwanted artifacts into your image (example
#2).
GIF images are usually smaller
and load faster than JPEGs. They limit you, however, to using a
256 color palette, and they also require you to choose either a
dithered or non-dithered format. Example #3 shows a non-dithered
GIF, and example #4 shows a dithered GIF. Dithering is a process
the computer goes through when it encounters a color that is not
in its palette. In this process it combines two colors in its
palette to approximate the appearance of a third color.
JPEG formats are best for images
like photographs that contain numerous changes in color tonality.
JPEG images look best on monitors capable of displaying 16 million
colors (16-M). Monitors that display 256 or fewer colors cannot
produce this range of colors. JPEGs, moreover, usually take longer
to download than GIFs. (If you are viewing this site on a 16-M
color display, the difference between examples #4 and #5 will be
more apparent than if you are viewing it on a 256 color display.)
If you want an image containing
a range of color tonality to look good on a 256 color display, you
can save it as a dithered GIF. A dithered GIF retains some color
tonality (example #4) and is smaller than the same image saved as
a JPEG (example #5).
You can make simple web
animations made of a sequence of GIF images called animated GIFs.
An example of an animated GIF is the dancing feet illustration in
Create animations that enhance explanation. |
Reduce the size
of image files
Color-rich images tend to be large. Make images
smaller by reducing the size of the color palette. If you make the
color palette too small, the image will become too degraded. The goal
is to make the file as small as possible while still retaining
sufficient image quality. Start with a high-quality image and produce
versions using successively smaller color palettes until image
degradation becomes too apparent. The JPEG image on the right is a
little less rich in color and detail, but less than half the size of
the JPEG image on the left.
|
![[image before reducing colors]](images/castle2.jpg)
|
size: 8.4K
|
![[image after reducing colors]](images/castle.jpg)
|
size: 3.4K
|
Re-use images
You can decrease load time by re-using images. Once
they are loaded in the browser's cache, they will display on the
screen faster. Graphics for site identity and navigation are often the
easiest to re-use.
Use interlaced
GIFs
|
![[Non-interlaced GIF]](images/3nonint.gif)
![[Interlaced GIF]](images/3int.gif)
![[GIF fully rendered]](images/3fin.gif) |
Interlaced
GIFs render progressively, allowing the viewer to begin to
identify the contents of the image without waiting for the full
download. The top image shows the way a non-interlaced
GIF image appears as it begins to draw on the screen; users may
not be able to tell whether they want the image until it has fully
downloaded. The interlaced GIF (center) appears initially as a
full image which is not fully focused, but it often reveals enough
information for the user to quickly recognize the image's
contents. The bottom image shows the fully rendered picture.
|
Save images at a
resolution appropriate for your users' monitors
Because few monitors display images at resolutions
greater than 72 dpi, you may want to limit the resolution of your web
images to 72 dpi. A higher dpi ratio will not produce better image
quality on most monitors and will increase file size, causing each
page to load more slowly. If you know that many of your users have
higher resolution monitors, use images of corresponding resolution.
If you have decided to create a version of your
site specifically for printing, you may want that version to have
images with a higher dpi. Most low-end printers are 300 dpi. The
higher the dpi, however, the longer users must wait to download the
printable version.
Use Alt text for
all images
![[image of an alt text message]](images/alttext2.gif)
Use alt text to provide users a short description of images. Alt text:
 |
provides vision impaired users access to your
content (screen readers read the descriptions) |
|
helps sighted users determine whether they want
to wait for an image to load |
|
enables users to read a description of a linked
image and take the link before the image loads |
Use alt = "" for images that do not convey
important information or convey redundant information. The alt tag
without text informs users with screen readers that there is a picture
for which a description is unnecessary.