One of the key features of the web is its ability to display graphics and text, and the use of images in your documents can turn you into an independent publisher. There are many ways to incorporate images into your web pages, but because of the typically large file sizes associated with graphics, you have to use discretion when displaying them. Image file formats contain a lot of information and consume large chunks of memory on your computer drives and can therefore take some time to load on a computer screen. Most good pages offer graphics for the visual enhancement, not domination, of the page. If used correctly, images should be somewhat spare on the page and sized in proportion to the computer screen and the information you present with the image. Also, images that serve no purpose on the page--for instance, an image that is not associated with text or a hyperlink-- should be eliminated. If you remember that your graphics, like any in a textbook or color brochure, should be chosen carefully and sized to fit the layout and purpose of your page, you'll have a good standard of judgment when it comes to using images. In this section, we'll look at using images, the choice of file formats available to you, and how you acquire the images you'll be using on your page.

Image is Everything

On the web, that is. Images add most of the flavor and color to the web, but if you've been doing some surfing, you'll discover that some of the people and places in cyberspace, like so many of their image-conscious counterparts here in our daily reality, are all flash and no substance. Relying on graphics to convey your information is not the way to build a web page. The first problem is that non-graphical web browsers are still accessing your page, and even though they may go the way of the dinosaur, they remain a factor to consider when constructing your page. Secondly, images do make the web come alive, but long download time is deadly to the success of your page. As I mentioned earier, images are big files and can take several minutes to reach a user's computer screen. If you rely too heavily on graphics, your page is likely to take so long to load completely that people will be off to another site before they see those pictures you thought would look great on your page.

Remember to keep the images simple and functional. It's fine to have a snazzy opening graphic at the head of your page, but any other graphics should be used for functionality. For example, the bold opening graphic could be followed with small graphical icons representing the other pages on your site, and these small graphics could double as clickable links to these other pages. Using full-sized images as navigation buttons, however, would not be wise because the size and load time of the images far outweighs the purpose of the buttons. Likewise, when you insert images into the text of a document, be certain that each image serves a valuable and useful function for the reader. For instance, if you are discussing the iconography of a painting or discussing geographic proximities on a map, the incorporation of an image is clearly useful. In fact, as we'll learn shortly, examples such as these would justify the use of a rather large and readable image which could be accessed from a smaller version which would be inserted in the text.

The following links demonstrate good use of images. To return to this page, just click the back button on your browser screen.

American Studies at the University of Virginia
PoliticsUSA
The Discovery Channel
The History Channel
Epicurious, from BonApetit
The X-Files Home Page

Acquiring an Image

So where do you get an image? Anywhere on the web, for starters. Any of the images you see on the web are technically up for grabs. When you see something you like--the red bars on this page, or the red balls, which make great replacements for the bullets in an unordered list--you can take it to use on your own page. If you're feeling a little more daring, or you just don't find what you like on the web, you can scan your own images using a digital scanner and programs like Adobe, Image Assistant, or other scanning software on the machine of your choice. For the adventurous, there's always the option of creating your own images through the magic of applications like Adobe Photoshop, Corel Draw/Corel Paint, or Quark Xposure. But let's start with the easy one first:

The Heist

Start with one of the red bars on these pages, whether you like them or not. You'll need a mouse and a formatted disk to insert into the disk drive on your computer. Move the cursor to the image, then click on the right mouse button, if you are working on a PC (Mac Users need only click the mouse button). If you are using Netscape 1.0 or later, you'll see that one of the options you are given is "Save this image." Drag the cursor to that choice and then a dialog box with Save options will appear (For Mac users, the computer will save the image for you). You can save it to your hard drive or to a disk. (If you are at a public lab, save it to your disk.) The computer will save it under the name the writer of whichever page you're on has given it, but you can change the name to something else if you prefer. Now you've got the image on your disk and can transfer it to your public_html directory. More on that in a moment.

Importing to Cyberspace: Scanning

Let's say that you've got a stash of the perfect images for your page. Perhaps you are completing a photo essay about Valley Forge and want to use your own photos or you've discovered the perfect graphic or image in a old magazine or textbook. You can use any of these by becoming familiar with scanning. A scanner is a special piece of equipment attached to a software package that will read your image digitally and then display it on the screen. From there, you can play with the color balance, brightness, focus, contrast, or image size to make the image just right. If you plan to keep up with web technology or are considering a permanent location on the web, get familiar with scanning. It's relatively easy to learn and is an invaluable skill to know. If you are here at UVa, your scanning resource center is the Electronic Text Center at Alderman Library. The Etext staff can give you a crash course in the art of scanning both images and text. Contact them at either etext@virginia.edu or 924-3230. Click here for the on-line scanning resources offered by the Etext Center.

(Remote users contact your local Computing Center for assistance)

Course Assignment Suggestion

Making Your Own Masterpiece

If you really want to individualize your page, try creating your own graphics, logos, and images. You'll need to learn the ins and outs of the many image packages available to you, and this can take time. If you are a student or faculty member at UVa, a valuable resource in these programs is the Multimedia Resource Center in Wilson Hall. (If you are accessing this workshop from another location, consult your school's multimedia center) The MRC offers occasional workshops in packages like Adobe Photoshop, and can be very helpful in answering your questions about image manipulation. You can contact them by email at multimedia@virginia.edu. The best way to learn about these programs is to spend an afternoon playing around with them. Reserve some time on a machine and see what you can do. Each program has step-by-step online help menus which can guide you through the endless capabilities and features of each one. It's not easy to master, but once you catch on to it, image manipulation and creation is an enjoyable way to personalize your web site. The four personal home pages below all use special image manipulation through Adobe Photoshop to convey their very personalized looks.

Scott Atkins
Julie Rose
Josh Johns
Eric Gislason

"Use" is an anagram for "Sue"

I said that any image on the web was up for grabs, technically. The technology will allow you to take anything you want for your own use, but the law does not always agree with it. Be aware that many of the images you find on the web or in books you'd like to scan are indeed copyrighted. If you use these items without permission from their owners, you are violating copyright laws, and legal action can be taken against you. Copyright and fair-use guidelines for the web are still very nebulous areas, but things change fast in cyberspace. Don't let yourself become an example for the "web police." Using graphics like buttons, arrows, and lines aren't going to get you in trouble with anyone, and any image you use and modify or change dramatically becomes your own, but be advised that if you are going to download a Mickey Mouse icon or a corporate logo, you will be asking for attention from the corporate lawyers. Use caution and keep the adage "when in doubt, don't" in mind.

Image Types

Images come in many different file types, but the two most common ones are .GIF and .JPG formats. Both are known as compressed formats, meaning that they take up less space on your disks and are therefore faster to load. It is a good idea to have all your images in one of these two formats when you insert it into your page. Both image formats give good quality, 256-color presentations and keep load time to a minimum.

Most images you find on the web will be in one of these two formats, but any image you scan or create in an image processing program will not be. In order to make your images conform to these formats, you will have to save them as either .gif or .jpg, which you can do through the "Save as..." option in any of these packages. If you present your image in formats called .RGB, .PSD, or .TIF, you will be saving huge amounts of image information that is not necessary for presentation on the web. Saving your image in one of these files also saves specific color and shading information for photo-quality image reproduction. While you will occasionally find these images somewhat sharper and more detailed than their .GIF or .JPG counterparts, the difference is often minute, if even noticeable. The chief difference between the two is in load time and file size, which becomes considerably greater in formats other than .GIF or .JPG.

Getting From Here to There: FTP and Image Tagging

OK, you've got your images on disk. You've "stolen" them using the mouse buttons, scanned in your own, and created a few in your favorite image software, and they're all in either .GIF or .JPG format. How do you get them on the net? The first thing you need to do is to move your disk copies into your public_html account using a File Transfer Protocol, or FTP, application. If you are not familiar with these programs, read up on the process of moving files when you're ready to do so by following the previous link. Once your files are in place, you'll be ready to use the image tags in your document.

Image Tags

Once you have moved the file from your disk to your UNIX account, and once it is in your public_html directory, it is ready to be inserted into your document using the HTML image tags. You tag image filenames just as you would any other HTML text. When you construct the document, make room for the images. Use <p> tags or <pre> tags to block off space to separate your images and your text. It can take some trial and error before the image appears on the page the way you like it.

The main image tag is the Image Source tag, which tells the browser the filename of the image to display. The command is enclosed in brackets and does not require a closing tag.

<IMG SRC="filename.gif(or .jpg)">

The image tag has two primary attributes, which give the browser further instructions for presenting your image. These are the ALIGN= and the ALT= commands. The ALIGN command tells the browser where the text should be displayed in reference to the image, indicated by the following instructions:

Another useful image tag is the <br clear> tag, which instructs the browser to keep spacing down the page until it "clears" the image before displaying text or the next item you're tagging. This is a particularly valuable tag to know when it comes to formatting a page which incorporates images and blocks of text because it allows you display images beside individual blocks of text and keep the page organized and neatly arranged. Without the br clear tag, you only have the option of inserting paragraph tags, which will only grant you a double-spaced return. The br clear tag allows you format like a publisher and will give your page a very clean and professional appearance.

If no attributes are specified, the defaults are BOTTOM and LEFT. Note that there is no CENTER attribute. Centering is a Netscape extension, and in order to center an image on the Netscape screen, the image source tag must be enclosed between center and /center tags.

View These Examples

The ALT tag is an oft forgotten but sometimes useful attribute which consists of text to display in case the browser does not read images or the user stops the download before the images are there. This way, you can at least indicate that there are images on the page, allowing the user to decide if they may or may not be useful to see.

The ALIGN and ALT commands would be written like this:

<IMG SRC="filename.gif" ALIGN="left" ALT="Brief description or name of image">

Note that all the attributes are followed by an = sign and the quality of the attributes is put in quotation marks, and all information is contained within the IMG SRC tag.

Images as Links

Images can work as links much the same way as text. They require the same set of Anchor tags and work just as a text link would. Having images as links is a good way to use graphics wisely on a web page. You could use a few small graphical icons to represent other pages on your site, and then make these images the actual link to your other pages. You can also incorporate images in your text and then make them link to full-sized versions which would be too large to place directly in your document. This is called making a thumbnail image. The thumbnail could be a small part of the image you have cropped in Image Assistant or in Adobe Photoshop, or it can simply be a reduced version of the full image. In either case, the tagging is identical and appears like this:

<A HREF="name of targeted page or image"><IMG SRC="name of image that will act as link"></A>

where the HREF indicates the name of the page or image to see when clicking on the image specified in the IMG SRC tag. If you are using thumbnails, the thumbnail will be the image in the IMG SRC tag, and the full-sized version will be in the HREF tag.

Wrapping it Up

There's a lot to remember when it comes to graphics, but if you keep the following list of guidelines in mind, you'll be able convey the proper image--so to speak:

Sketch your page layout with graphics to determine the right place and size
Focus on overall page look and content: don't sacrifice either for the sake of images
Keep all images small and simple
Use compressed GIF's or JPG's
Use graphics as links when possible; Use thumbnails instead of putting the large version directly in the page
Use graphics sparingly for maximum effect
Images and graphics should enhance the text information

MISSION 2

Incorporate some graphics into your pages. As a starting suggestion, you might want to take the red bar you took from this page and transfer it into your public_html directory using one of the available FTP applications. Once in place, insert IMG SRC commands into your links page and replace the horizontal rules with the red bar image.

Once you've gained a little confidence with this process, start enhancing your page with some other appropriate graphics you find, scan, or create. Mastering the possiblities of image work will take some time; have patience.

Course Assignment Suggestion

By this point in the workshop, you should have enough tools to build a high-impact home page. Believe it or not, that's all there is to it--a couple of tags and some image tricks. There are other factors which will enhance your knowledge, and I outline them in the advanced tagging section, but you've got most of the skills you need now. Read the next section on page design tips to get a few elements of web style that will allow you to bring all these pieces together into a sharp looking home page.



Sponsored by the American Studies Group at UVA ©1996
Maintained by Joshua Johns