• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Part V: Appendixes > Graphics and Performance

C.4. Graphics and Performance

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.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint