Lesson 825-3: Graphics and Sound in Web Page Design

Carol Southard's Week 3 Homework Assignment

CHALLENGE 1:

Discuss with your group what constitutes effective use of graphics on web pages. Log/record the discussion and make it available for the other members of the class so that they may benefit from your insights.

Designing a better web page with graphics:

Don't overload your web page with graphics. Web pages with a lot of graphics take a long time to load. Don't put too much stuff on one page. If a page is getting large, split it into sections or seperate pages. For example, your home page might have separate section or page for the links, the guestbook, and your personal information. Try to make your site accessible to as many people as possible, including those with text-based browsers and slow modem connections.

1. Use inline graphics. Instead of linking to graphics on other servers, link to graphics on your own server. This will make your web page load up faster.

2. Be considerate to people who have text-only browsers like Lynx, and those who have turned images loading off. Use the ALT tag for all your images. In addition, some search engines index the text within ALT tags.

3. Use thumbnail graphics in cases of large graphics so a person can decide if they want to download the larger image.

4. If you have many images that are unrelated to the content of your web page, you can place them in a separate Art Gallery or Graphics section.

5. Include height and width and ALT attributes within all images tags. This will speed up the load time for your page. It will also preserve your page layout if someone looks at it with image loading turned off.

6. If your web site is graphics intensive, create an alternate text version of your web site.

FURTHER READING:

BELOW TEXT FROM:

JZ WEB Ask Dr. Who
http://www.zeldman.com/faq2.html

Graphics comprise the total visual information imparted by a web page. That includes text, and the way it's arranged, not to mention its size, color, and how much of it you choose to lump together in blocks Before you add a single inline gif or jpeg to your page, you can create visual interest, enhance readability, and even forge a signature style using nothing more than the HTML tags for background color, text color, size, style, FONT, and layout.

Let's get this out of the way. The internet transmits text quickly and easily. Images take gymnastics and time. That being the case, the accepted wisdom is to use as few images as possible, and make them as small as you can (small in file size, though not necessarily in height or width). Follow the accepted wisdom, and your page will load quickly. Ignore it, and visitors with slow connections will tire of waiting and click their way to somebody else's page. Remember that, even though your visually-dense page loads quickly on your own machine, it is a lumbering narcotized sloth over the internet. And don't be fooled by the speed with which your homepage loads when viewed on your own internet account. When I'm already logged in to my own account, my page flashes onto the screen. If it flashes onto yours, you're sitting at a T1 or my desk. If you must load your page with graphics, as I do on my core page, make sure each image compresses well.

Do these three things:

1. When creating GIFs, reduce your graphics to the fewest colors possible. If possible, turn off dithering so that the image will be rendered in solid blocks of color, rather than Ben-Day-style (comic-book-like) combinations of pixels. In general, using fewer colors makes for greater compressibility and thus smaller files.

2. Make smaller images. Use them as links to larger images, viewable at the visitor's discretion.

3. Always include the HEIGHT and WIDTH extensions in your image tags. Navigator will then make room for them on the page and continue loading text, so your viewers have something to read while your images load. Leave these tags out, and your page stops dead until each image has fully rendered. (This is less true for Explorer, which tends to load text immediately and then rearrange it as images load; but most of your viewers use Netscape.)

BELOW TEXT FROM:

Guide to Web Style [Graphics]
http://www.sun.com/styleguide/tables/Graphics.html

Images can add a lot to the visual appeal and information content of a page. For some subjects and some readers, images may be the sole most effective means to communicate your message. Well-used graphics can crystallize a presentation for a reader, providing a critical catalyst for understanding. Used poorly, images can confuse your audience, distract from your message, and render mute a critical message.

Use graphics critical to the information content of your page. Provide images that help explain or demonstrate your subject. Each image you include in a page will increase the time it takes to load that page. When you include an image, be certain that it's essential to the presentation. Essential can go far beyond images that present information, such as maps, charts or documentary photographs.

An image may be an important navigational aid or locator, or may be the most effective means to organize page layout, or help set readers' expectations about a site. Review your images with a critical eye and delete the nonessential ones as quickly as you strike fluffy text paragraphs.

Limit large images used solely for visual appeal. Sites that use full-page graphics with image maps as the top-level welcome page for the site are fairly common. Some are well done, but many are using a top-level image map because it seems to be something that everyone does. Your readers will put up with this technique if it's used very sparingly. Once on the top level might be appealing, appearing on two levels will raise eyebrows and three or more levels will frustrate people. If the top-level image isn't an image map used for a navigational visualization of the site, or a critical content-related image, consider eliminating it, or making it much smaller.

Keep the total size of all images used on a page to less than 30K. If a single image is critical to the information being presented, it's alright to be larger, but consider using a thumbnail of the image and linking to the full-size copy. If the image won't survive being scaled down to thumbnail size, try using a small portion of the image for the thumbnail.

Use available technology tricks to minimize content access time. There are several available techniques to minimize download times for images: Supply interlaced GIF files in your pages to allow images to load in multiple passes (i.e., the window shade or multi-layer effect.)

Put HEIGHT and WIDTH pixel dimension tags in an image reference will allow some browsers to display all text on a page faster, by avoiding requests back to the server for each image to get dimensions. Specify both low- and high-resolution JPEG files to enable smart browsers to paint an entire page for your reader and then go back and fill in high-quality images after the page has loaded. This technique is worthwhile on large images, especially those over 100K.

Avoid message-critical JPEG images if you want the largest possible audience. Some browsers do not support JPEG images, and those that do may not present them in-line. This can change the impact of your presentation. Unless you know the browser usage patterns of your audience, opt for fewer JPEG images.

Warn the audience if a link leads to a large graphic. Adding text to a link citing the size and format of the linked-to file allows people to decide if they want to take the time to retrieve the file. This is especially kind in situations where you have created the expectation that graphics in a series are a certain size, and you betray that expectation with an image that is much larger. In all cases, you need to ask yourself if an image you're offering is worth the download time. If it is, and your audience agrees, they'll suffer the wait.

Minimize the number of colors being used in a single image. There are some creators of web pages who have displays, and maintain that their content just on more pedestrian 8-bit, 256-color hardware. This but the majority of your audience doesn't have fancy Design your pages so that they look good on 50 colors is reasonable limit. Try to use the same for all your images.

To Our Index of Demonstration Pages for Week 3

Background by Stormi.

This page hosted by Get your own Free Home Page