To decrease page load times, use a
graphics optimization program, such as
Macromedia Fireworks, to ensure that your graphics are as small as
possible. Here are some sure-fire suggestions:
- Crop images
-
By reducing the dimensions of an image, you reduce its size and
therefore its download time.
- Use GIFs for graphic elements
-
GIF graphics are more efficient than JPEG files for graphical
elements using 256 colors or less, such as simple graphics and line
drawings.
- Use JPEGs for photographs
-
JPEG files are the most efficient format for photographic images.
Reduce the JPEG quality setting for greater compression.
- Reduce number of colors
-
Reduce the number of colors in each image to the smallest number
possible.
- Display low-resolution images while loading larger images
-
The total load time of the page increases, although the visitor sees
an image in less time.
- Interlace GIF images
-
Interlaced GIF images provide an idea of what the image looks like
before it has loaded fully.
- Specify height and width attributes for <img> elements
-
Specifying the height and width attributes of the
<img> element allow the remaining text to
load, correctly formatted, while the image is downloaded to the
browser. (Theoretically, it is also required by the HTML 4.0
specification.)
- Trim down animations
-
Crop all animations so they take up as little space as possible.
Avoid including static areas in the animation (separate animated
elements from the background).
- Use thumbnail images when possible
-
Use small, clear thumbnail images rather than full-size images so
visitors have the option (but are not obligated) to look at larger
images.
- Break images into reusable parts
-
Judiciously break an image into multiple parts that can be reused,
which saves the time it takes to download the full image again.
- Provide text alternatives
-
Provide text descriptions of your images in the
alt attributes of the
<img> element (required for HTML 4
compliance). You can also provide a text-only version of your site,
which users can access at their discretion.
- Use vector graphics
-
For various performance and compatibility reasons, most developers
use Flash for compact vector-based graphics. Internet Explorer 5 and
Netscape Navigator 6 also support XML-based Scalable Vector Graphics
(SVG), but SVG is not supported in earlier versions of these
browsers.
