| In Lesson 7, "Adding Images, Color, and Backgrounds," you learned all about creating and using images in web pages. This section will summarize many of those hints. Don't Overuse Images Be careful about including a large number of images on your web page. Besides the fact that each image adds to the amount of time it takes to load the page, having too many images on the same page makes it look cluttered and distracts from the point you're trying to get across. Sometimes, though, people think that the more images they include on a page, the better it is. Figure 16.22 shows such an example. Figure 16.22. DON'T: Images that are too large.
Remember the hints I gave you in Lesson 7. Consider how important each image really is before you put it on the page. If an image doesn't directly contribute to the content, consider leaving it out. Use Alternatives to Images Of course, as soon as I mention images, I also have to mention that a small minority of web users either use a web browser that doesn't support graphics or turn off image loading in their browser. Furthermore, visually impaired users need accommodation as well. To make your pages accessible to the widest possible audience, you need to take the text-only browsers into account. The following two solutions can help: Use the alt attribute of the <img> tag to automatically substitute appropriate text strings for the graphics in text-only browsers (a requirement in XHTML 1.0). Use a descriptive label to substitute for the default [image] that appears in the place of each inline image. If providing a single-source page for both graphical and text-only browsers becomes too much work and the result isn't acceptable, consider creating separate pages for each one: a page designed for the full-color, full-graphical browsers, and a page designed for the text-only browsers. Then allow visitors to choose one or the other from your home page.
Keep Images Small Keep in mind that each image you use is a separate network connection and takes time to load over a network. This means that each image adds to the total time it takes to view the page. Try to reduce the number of images on the page, and keep them small both in file size and in actual dimensions. In particular, keep the following hints in mind: Your page should load at an average of 3KB to 4KB per second with a 56Kbps modem connection. The entire page (text and images) shouldn't take more than 20 seconds to load; otherwise, your visitors may get annoyed and move on without reading your page. This rule of thumb limits you to 60KB80KB total for everything on your page. Strive to achieve that size by keeping your images small. For larger images, consider using thumbnails on your main page and then linking to the images rather than putting them inline. Interlace your larger GIF files or save your JPEGs as progressive JPEGs. Save your image in both the JPEG and GIF formats to see which creates a smaller file for the type of image you're using. You might also want to increase the level of compression for your JPEG images or reduce the number of colors in the palette of the GIF images to see whether you can save a significant amount of space without adversely affecting image quality. The fewer colors you use in a GIF file, the smaller the image will be. You should try to use as few colors as possible to avoid problems with system-specific color allocation. You can reduce the physical size of your images by cropping them (using a smaller portion of the overall image) or scaling (shrinking) them. When you scale an image, you might lose some of the detail. Caution Remember that reducing the size of your images using the height attributes of the <img> tag only makes them take up less space on the page; it doesn't affect the size of the image file or the download speed. It also has a tendency of making your images just look bad. You can use the width and height attributes to scale the image to a larger size than it actually is. These attributes originally were Netscape-only extensions, but were added to the HTML standard with version 3.2. Note that the scaled result might not be what you expect. Test this procedure before trying it.
With the preceding suggestions in mind, take a second look at the images on your page. You really have your heart set on using all these different images. How can you put the page shown in Figure 6.22 on a diet and improve its appearance? The graphic at the top of the page, which displays a logo for the site, could stand some size reduction. It's basically just a banner and doesn't have any links on it, so you can make it half as high. That will cut the download time for the graphic roughly in half. Another problem that needs to be addressed is that the title of the page (in this case, the name of the site) doesn't appear anywhere as text. Anyone who visits the site with graphics turned off won't know the name of the site! You need to add that to your improved version. Those horizontal rules are a big problem. First, there are too many of them. Second, they overpower the banner image because they're so much wider. Third, they distract from the list of items because they create separation between them. So, reduce the quantity and the size of those images for more download time savings. The bullets that appear before each list item are way too large. They could stand to be cut down to half their size. As a rule, most bullets are kept to 30 30 pixels or less. All the improvements I've suggested here are shown in Figure 16.23. Figure 16.23. DO: Better use of images.
Watch Out for Assumptions About Your Visitors' Hardware Many web designers create problems for their visitors by making a couple of careless assumptions about their hardware. When you're developing web pages, be kind and remember that not everyone has the same screen and browser dimensions as you do. Just because that huge GIF you created is narrow enough to fit in your browser doesn't mean that it'll fit in someone else's. An image that's too wide is annoying because the visitors need to resize their windows or scroll sideways. To fit within a majority of browsers, try to keep the width of your images to fewer than 600 pixels or, even better, don't set the page width to a specific amount. Be Careful with Backgrounds and Link Colors Using HTML extensions, you can use background colors and patterns on your pages and change the color of the text. This can be very tempting, but be very careful. Changing the page and font colors and providing fancy backdrops can quickly and easily make your pages entirely unreadable. The following are some hints for avoiding these problems: Make sure you have enough contrast between the background and foreground (text) colors Low contrast can be hard to read. Also, light-colored text on a dark background is harder to read than dark text on a light background. Increasing the font size of all the text on your page can sometimes make it more readable on a low-contrast background You can use the <basefont> tag or Cascading Style Sheets to increase the default font size for your page. If you're using a background image, make sure that it doesn't interfere with the text Some images may look interesting on their own but can make text difficult to read when you put it on top of them. Keep in mind that backgrounds are supposed to be in the background. Subtle patterns are always better than wild patterns. Your visitors are visiting your pages for their content, not to marvel at your ability to create faux marble in your favorite image editor.
When in doubt, try asking a friend to look at your pages. Because you're already familiar with the content, you may not realize how hard your pages are to read. Someone who hasn't read them before will be able to tell you that your text colors are too close to your background color, or that the background image is interfering with the text. Of course, you'll have to find a friend who will be honest with you.
|