Including Graphics
People include graphics on websites for two primary reasons—(1) they enhance the design and usability of the information provided on the site; (2) they enhance the design and usability of the site itself. In terms of the information provided on a site, graphics might be included to show products to consumers or as integral parts of web-based articles, reports, or other documents.
Graphics help establish identities for web sites and create excitement and interest. Graphics can also be used to help people find their way around a site by calling attention to links, sections of sites, special features, and different areas of pages.
For graphics to enhance the design and usability of websites, there are several useful rules of thumb that you can follow.
Balance the use of graphics on the page. Graphics should not overwhelm your content.
Coordinate graphics used to identify and navigate to part of a site. Too may different types of graphics confuse rather than help users.
Keep the size of image files as small as possible to reduce the load time. The size of image files (the K) depends on the type of image used (discuss below) and the procedures used to create and save the image.
Notify users when you must include a slow-loading graphic. A message, such as "Please wait for image to load," tells users that you are sensitive to users' needs and that the image may be worth waiting for.
Use larger images on lower level pages. If people are satisfied enough with the design and navigation of your home page, they will be more likely to tolerate some additional load times on lower level pages if the graphics are informational and useful.
Don't rely on images alone to convey information. People sometimes set browsers to display text only because of page load times. Some people use text only browsers, like Lynx, and people with visual disabilities may use screen readers that rely on text information only. These users rely on alternate text information to be included with graphics. Alternate information is handled by an attribute in the image tag and that is covered in the WWW Workshop that is part of this module.
Choosing Image Formats
Graphic files can be large, most of the time larger than the html file for the page. That doesn't necessarily mean big images, but rather large files sizes (indicated by the number of kilobytes (K), or computer space, they use). The larger the file, the longer it takes to load into the browser window. That's why sometimes when you access a page, it takes a few seconds for some images to appear. You can control the size of graphics files through your choice of image format.
There are three types of image formats created for the Web:
JPG image (pronounced "j-peg")—named for the Joint Photographic Experts Group that created the type—works well for photographic images, images with a high number of colors (above 265), and images with graduated color.
GIF image (pronounced "gif" or "jif")—short for Graphics Interchange Format developed by Compuserve—works well for images with "flat" color areas, transparent images (when you want to have the background of your site show through part of the image), and for small images such as icons. Gifs manage up to 256 colors.
PNG image(pronounced "ping")—for Portable Network Graphics—is a new graphics type that promises to offer qualities of both jpgs and gifs with smaller file sizes. However, these formats are not recognized by versions of browsers that many people are still using (for instance IE and Netscape releases prior to versions 4.x). Therefore, designers have not really begun to work with png files extensively.
The examples below illustrate some of the qualities of JPGs and GIFs, the two most used types of graphics.
 |
 |
 |
 |
 |
 |
 |
 |
|
The first set of images here, the photo of the piggy bank (10K) and the word "Piggy" (6K) are .jpg images. |
The second set of images of the piggy bank (6K) and the word "Piggy" (3K) are .gif images. |
The third set of images here, the big palette (20K) and the small palette (2K) are .jpg images. |
The fourth set, big palette (20K) and small palette (2K), are .gif images. |
|
As you can see, the .jpg files render photographic images more smoothly. However, the file sizes of the .jpg images are larger. You need to decide when it is appropriate to sacrifice load time for clarity in photographic images. Small pictures of people, for instance, might be worth the bit extra wait. |
Here again, the big palette .jpg image file size is quite large compared to .gif image file size—over three times larger. However, in the case of flat colors, the .gif is just as clear as the .jpg. The small images are the same file size but the .gif image here is much more clear. |
||
You should reduce the file size of graphics as much as possible, balancing the quality loss against the load time. Graphics files, particularly jpg files, can be "optimized" for the Web, which means reducing the files size and thus the quality. Generally, programs for creating and adjusting graphics, such as Adobe Photoshop, have tools for optimizing graphics.
Displaying Images
One important point you need to know about the relationship between images and web pages is that the actual images themselves are not part of an html page file. HTML documents and images are stored in separate files. When a webpage that includes images is displayed in a browser, the images are "called into" the page by the browser when it reads a special tag in the html file telling it to do so.
There is an "attribute" that can be added to the HTML of image tags to tell browsers to display "alternative text" with graphics. The text can be displayed and read by screen readers even if the images are suppressed or missing.
Finding and Using Images
You can obtain graphics by using software to create your own or to convert them from images you draw or photos you take. Software packages often include generic graphics, called "clip art," that you can use. There are also a number of sites on the Web that offer images that you can download and use for free. When you use graphics from software clip art files or from websites, read any rules of use or permissions that protect the images. For instance, some permissions allow you to use graphics if you credit the creators on your site. Others allow you to use graphics for nonprofit reasons but not to re-sell or to use on an e-commerce site. You need to check the rules any time you use graphics created by others.
You should not just take graphics from sites and use them on your own pages as the use may constitute a copyright infringement.
|
Click here to read "Creating Graphics for the Web." Discussion of graphics, good explanation of the difference between .jpg and .gif. |
|
Click here to read "Graphical Babylon." By Peter Bickford. On View Source Magazine. Cautionary musings on assumptions about graphics: "That which is 'raised up' can be pressed down...Boxed text can be changed...Gray things are disabled...If you color an interface element, you're indicating that . . . well, it's special." |