Making a Content Web Site

Site Map

Image
Why it is important

Click to Image - How do you do it?

Opening Statement Text Image Tables Hyperlinks Navigation Artistic Concerns Content Conclusion

 

Images are inherent to web design. After text, images deliver your message. A picture is worth a thousand words and all that. In a content-based web site, images need to be used for information not pizzazz. They naturally provide pizzazz just by being graphics with color. In a plain research paper, we just don't get that chance to use graphics to their potential. In web pages, we can and your students can. They just need to be used in the most appropriate and useful way. Remember: Images deliver content in web pages. When you go to web pages, do you read lines and lines of text, or do you find yourself more interested in those web pages that use pictures and graphics to illustrate the content? that question illustrates the importance of images on your web pages.

Unlike text, images have a good side and a bad side. On one hand, illustrations work well to enhance your ideas. On the other, images can take up a lot of file space depending on the image. This means your audience may have download time problems if they are not on a ATM or T5 line. For information regarding downloading web pages, see PC Pitstops "About Bandwidth" page.

There are various graphic formats. We need to concentrate on the big 3: bmp, gif, and jpg. These types are compatible with all browsers and all servers. The table below gives you a short and general idea what they are about.

Type Size in Comparison General Appearance Use it?
BMP - bitmap Bitmaps tend to be large files. Excellent color and depth. Try not to use these if you want your page to download quickly, but if detail and color are very important to your message, then choose this one.
JPG Smaller than BMP but larger than gifs generally. Great color and depth Good choice if the file is not too large and especially if detail is important to the meaning.
GIF Can be the smallest of the three types Good to great color, but not the best. Best choice for file size and maneuverability - creating your own animated gifs and transparent gifs.

OK, so that's information about file type, but what about obtaining those images? This can involve a few things beyond right click and Save copy as. This can involve getting the permissions for using that image. Copyright and trademarks are the foundation of our economy. Without those two things, artists, scientists, and other intellectual property owners would not distribute and sell their works to you the consumer or learner. For that discussion, go to the ubiquitous Copyright discussion on the Content page. Also, there are a couple of links to free graphics on that page as well to use for your projects. What we are concerned about on this page is the image itself.

After you've obtained images (remember: you and your students should have already attempted that step before they begin to plan a web design.), where do you put them and what size should they be on the screen?

This is an important step in designing. How big do you want your images and how do you know where to place them on a web page for best effect?

Let me illustrate a few points:

Images should enhance your text. Use images sparingly unless the image is the focal point of the content-based web site. Remember that Rule of Three - it applies nicely with images as well. See the Artistic Concerns for the Rule of Three discussion.

This is how an image enhances text.

Lonely looking egg It crawls and eats leaves. In the cocoon, it sits. Now, it can fly.

The images allow the audience to see rather than read about a butterfly's life cycle. Also, note what happens when images are placed differently on the page.


Lonely looking egg

It crawls and eats leaves.

In the cocoon, it sits.

Now, it can fly.

Which one is better? That's a matter for you to decide which one you believe gets the message across and is a better design. They both might be equally efficient to do the job. The important part is that the images actually replace too much text and enhance the message.

What happens when there are too many images? The same thing that happens when there's a full page of text. Your audience is overwhelmed in either instance. The best advice I can give is: try to balance your page both in content and between image and text.

When you look at these examples, what might appeal to you is the "symmetry" used in the design. Things appear to be places "equally" and in proportion. This is important with images. Unless they are the subject of the text, they need to enhance the text and not overpower the message in the web page. More on Symmetry can be found here.

Next on the agenda: Tables

Opening Statement Text Image Tables Hyperlinks Navigation Artistic Concerns Content Conclusion

Making a Content Web Site

Site Map

Image
Why it is important

Click to Image - How do you do it?