l2

Fast-loading images at a glance

Site Genre: Pattern Group l

magnify image
FigureL2.1 Geocaching.com uses small images that are optimized for downloading.

Background

Images are often the slowest-loading part of a Web page. Reducing the size of an image can have a significant impact on how visitors perceive your Web site. This pattern describes techniques for reducing the sizes of images, and it can be applied to images you already use or to images that you’e about to deploy. This pattern can be used by itself or in conjunction with other patterns for making fast-loading Web pages, such as LOW NUMBER OF FILES (L1), SEPARATE TABLES (L3), HTML POWER (L4), and FAST-LOADING CONTENT (L6).

Close

PROBLEM

Large images are slow to load.

buy the book to find out more

SOLUTION

magnify image FigureL2.10 Apply a variety of techniques, both on the image itself and in how the image is used in the Web page, to make images faster to load.

Use a combination of techniques to speed up the loading of images. To the image itself, consider applying the following techniques: changing the image file format, reducing colors, cropping and shrinking, using higher compression, and using progressive-scan or interlaced images. Use other techniques’ such as including the < height > and < width > attributes in the HTML, using the < alt > attribute for the < img > tag, and combining small images that are near each other into larger images’ to determine how the image is best used on a Web page and to help improve the perceived speed of loading the image.

Other Patterns to Consider

REUSABLE IMAGES (L5) appear to load very quickly, in the eyes of the customer. ACTION BUTTONS (K4) and NAVIGATION BARS (K2) often contain images that you can tune for download speeds.

Close

 

Pattern Resources

PATTERN COMMENTS

POST A COMMENT and/or EXAMPLE WEBSITE

You must be logged in to post a comment.