The most difficult aspect of including graphics in your Web pages is resolving all the design issues that accompany the use of graphics. Creating effective graphics and placing them properly in relation to your text is not as easy as boiling water. Some additional concerns arise when you use graphics on the Web.
Speeding up slow pages
One of the Web's ongoing problems is download speed — the amount of time a Web page takes to appear on the user's screen. Download times are especially slow for graphics-rich pages, which, although more interesting to view, can be more frustrating because they appear more slowly. And the trade-off is not simple; lots of variables intervene. For example:
Avoiding three big mistakes
Don't make these three big mistakes relating to graphics on the Web:
Because the percentage of users with non-broadband access continues to drop, providing a complete set of text-only pages may be overkill. Consider providing a text-mostly version, with limited use of images, simpler layout, and alternative text for images. This option may be just the ticket for users with visual impairments.
Here are the most important rules for supporting text and graphical access:
Speeding up slow pages
One of the Web's ongoing problems is download speed — the amount of time a Web page takes to appear on the user's screen. Download times are especially slow for graphics-rich pages, which, although more interesting to view, can be more frustrating because they appear more slowly. And the trade-off is not simple; lots of variables intervene. For example:
- Access speeds: Different users access the Web through connections that run at different speeds. And the same server can serve up a Web page at different speeds, depending upon how busy the server is. When you test your brand-new, graphics-rich page on your local machine, everything may run fast. But when you upload that same page to a server and access the page over a 56 Kbps (kilobits per second) modem, the page loads much more slowly.
- Good and bad graphics: If you plan to spend your users' time on downloading big graphics, invest some of your own time and money upfront to make sure that the graphics are as high-quality as possible. People don't mind waiting for a good graphic nearly as much as they mind waiting for a bad one. A good graphic may be a product shot. A bad graphic may be a banner that says "HELLO!" in six fluorescent colors.
- Frustration levels: The same users who enjoy watching your page appear in the morning while drinking a cup of coffee may be tempted to scream at their browser when they try to quickly check out your page just before heading home from work.
- Limit the number of colors in your graphics to make the files smaller so that they download more quickly.
- Get expert advice — from someone you know or a book — or look at cool sites online to help you make the graphics you do use more interesting to look at.
- Lightly sprinkle your page with small graphics, rather than burdening it with several big ones.
Avoiding three big mistakes
Don't make these three big mistakes relating to graphics on the Web:
- No graphics: Having no graphics on your Web pages means having boring pages.
- Too many graphics: Using too many large, slow-to-download graphics may be the biggest newbie Web author mistake.
- No text alternative: Some users don't have graphical capability at all, and an increasing number of vision-impaired people use the Web. You need to accommodate these users by creating your page in a way that supports text-only access as well as graphical access.
Because the percentage of users with non-broadband access continues to drop, providing a complete set of text-only pages may be overkill. Consider providing a text-mostly version, with limited use of images, simpler layout, and alternative text for images. This option may be just the ticket for users with visual impairments.
Here are the most important rules for supporting text and graphical access:
- As you design and create your page, think about how your page will look with all graphic access turned off as well as on.
- Test your page with graphics turned off.
- Test your page in different browsers.
- Include ALT tags — actually, the ALT attribute within the IMG tag — in all images so that explanatory text appears whenever a graphic isn't displayed.
- Provide text-only menus in addition to icon-based selections and image maps.
- If you want to make everyone very happy, consider creating a separate, text-only version of your site.