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. |