How to use HTML 3.2
Chapter 8
Adding Graphics to HTML
- What Are GIF and JPEG Files?
- How to Convert a Bitmap to a GIF File
- How to Add an Image to Your HTML Document
- How to Format Images in HTML
In the early days of the World Wide Web, graphics were considered
to be little more than novelties-a
cheap trick to spice up a Web page. But today, graphical images
are an integral part of any HTML document. You'd be hard-pressed
to find a popular site on the Web that didn't use images extensively.
Knowing how to include graphics in HTML, and more important, knowing how to use graphics correctly, is a crucial part of putting together a Web page. Good HTML documents don't just show images, they integrate them and use them effectively.
In this chapter, we'll look at the types of images used on the Web, and show you how to use HTML to include them in your Web pages. You'll also discover secrets for formatting your images for maximum visibility and effectiveness.
What Are GIF and JPEG Files?
The two most common image file formats in use on the World Wide Web are GIF (.GIF) and JPEG (.JPG) files. The GIF format is directly supported by every graphical Web browser, while JPEG is still gaining acceptance as a standard image format on the World Wide Web. Although both GIF and JPEG files can be used in your HTML documents, there are a few important differences between the two formats.
Tip Sheet
- Remember that JPEG images are 24-bit color, and require the appropriate video hardware to view properly. If the user's system can only support 256 colors, the images will be automatically adjusted to 256 colors by the Web browser or external viewer through a process known as color dithering. This will always degrade the quality of the image, and may lead to results you did not anticipate. Therefore, it's best to use 24-bit JPEG images only when absolutely necessary.
- Images take a considerable amount of time to load in an HTML
document, especially when the reader has a slow modem connection
to the Internet. Try to keep your images as compact as possible.
Crop the images wherever possible to show only the relevant portions,
thereby reducing the image size. Color depth also plays a huge
role in overall image size. Consider decreasing the number of
colors to 16 or 256 if it won't adversely affect the image.
- The GIF format, developed by CompuServe, is a cross-platform format, which means it can be viewed on almost any type of computer system, making it ideal for use on the World Wide Web. The one significant limitation of the GIF format is that images are limited to 256 colors.
- There are two different formats for GIF images: the GIF87 format and the GIF89a format. The first format is the original format, and is no longer widely used. The GIF89a format takes advantage of new enhancements, including transparency and interlacing, which are used extensively by HTML authors.
- The JPEG format, developed by the Joint Photographic Experts Group, is also a cross-platform format, although it is not directly supported by all Web browsers. JPEG images can use the full spectrum of 16.7 million colors.
- JPEG images are compressed files. JPEG compression results
in some image quality loss; however, the difference is usually
not noticeable to the human eye.
- If you are including photographic images in your HTML document,
you should store them in JPEG format because of the smaller file
size and support for full color. Some Web browsers do not directly
support JPEG files, and require the reader to load them with an
external JPEG viewer. Many JPEG viewers are available for free
on the Internet. You can find a list of them at http://www.yahoo.com/computers_and_
Internet/Software/Graphics/.
- If you're placing line art, company logos, or icons in your
HTML document, you should save these images in the GIF89a format.
By doing so, you'll be able to take advantage of the interlacing
and transparency features, which are explained in detail in the
next chapter.
How to Convert a Bitmap to a GIF File
In order to create GIF and JPEG images, you need an image editing program that can read and write in those file formats. The Paint program that comes with Windows 95 does not support GIF or JPEG. Fortunately, there are many low-cost image editing programs that do, including some free ones. In this section, you will learn how to create a GIF file by using Paint Shop Pro, an inexpensive and widely used image editing utility.
If you've got a Windows bitmap file that you'd like to use, such as your Windows wallpaper, Paint Shop Pro will help you convert it to GIF or JPEG format.
Tip Sheet
- Be careful when choosing images to include with your HTML document. Be sure that the images you're using are either your own, are royalty-free, or have been cleared for your use by the copyright holder.
- Keep your images as small as possible. Use Paint Shop Pro's
cropping tools to cut your image down to size if necessary. Small
files load faster and help ensure compatibility with all systems.
As a rule of thumb, your image should never be larger than 450
pixels wide and 400 pixels high.
- Start Paint Shop Pro. If you don't already have a copy of Paint Shop Pro on your system, you'll need to download a copy. An evaluation version is available on the publisher's Web site at http://www.jasc.com.
- Open your .BMP bitmap file by choosing Open from the File
menu or by pressing Ctrl+O.
- In the Open Image dialog box, change the value in the List
Files of Type box to BMP - OS/2 or Windows Bitmap.
- Locate the bitmap file on your system that you want to convert, then press the OK button.
- Check to see how many colors your .BMP image uses. The number
of colors used is displayed in the lower-left corner of the status
bar. If it's 256 colors or less, you can save this image as a
GIF file. If it's more than 256 colors, you'll either need to
decrease the number of colors or save the image as a JPEG file.
- To decrease the number of colors used in the image, select
Decrease Color Depth from the Colors menu and choose 256 colors
(8-bit).
- In the Decrease Color Depth dialog box, make sure that the
standard palette is selected. In most cases, you'll want to choose
Error Diffusion as your reduction method, but feel free to experiment.
Press the OK button when you're ready to go.
- To save the 256-color image as a GIF file, choose Save As from the File menu or press F12. Make sure that the List Files of Type box is set to GIF - CompuServe and the File Sub-Format is set to Version 89a - Interlaced. To save this image as a JPEG file instead, set the file type to JPG - JPEG - JFIF compliant.
- Choose a file name and location for your image file.
How to Add an Image to Your HTML Document
Once you've got the image file prepared, the next step is to place it in your HTML document with markup tags. Images in HTML are included by using the <IMG> tag. This page will cover the basic elements and attributes used when including an <IMG> tag in your document.
Tip Sheet
- If you want to link to images that are not your own, be sure to get permission from the copyright holder first.
- You should always use ALT to specify alternate text for an
image, so that users without graphical capability will understand
what the image is showing.
- Locate the place in your document where you'd like to insert the image.
- You can place images in your HTML document by using the <IMG>
tag. To insert an image into your HTML document, type <IMG>.
There is no closing </IMG> tag.
- Now you need to specify the URL of the image to load by placing
the SRC (source) attribute within the <IMG> tag. If you
store your images in the same directory as your HTML files, the
URL can simply be the file name of the image. For example, to
insert a GIF file named logo.gif into your HTML document,
you would type <IMG SRC="logo.gif">.
- To link to images that are not in the same directory as the
HTML document, use relative URLs to locate them. For example,
if you stored the above logo.gif file in a subdirectory called
images in your HTML documents folder, you would type <IMG
SRC="images/logo.gif">.
- The ALT attribute allows you to create alternate text for
your image that will be shown to users who have browsers that
do not support graphics. Some browsers will also display the alternate
text while the image is loading. To specify the alternate text,
type ALT=, followed by the text in quotes. For example,
adding alternate text would change the above image tag to <IMG
SRC="images/logo.gif" ALT="The LawnBirds, Inc.
logo in stunning 3-D.">.
How to Format Images in HTML
As you've learned, it's very easy to include an image in your HTML document. However, simply including an image is only the first step. HTML provides you with several ways to format your image inside your document. You can align your image with the margins to allow text to flow around it. You can also specify the size you'd like the image to be, allowing the reader's Web browser to scale the image accordingly.
Tip Sheet
- You can determine the height and width of an image by opening the file in Paint Shop Pro. The number of pixels in the height and width of the image are displayed in the status bar.
- It's always a good idea to specify the height and width of
your image, even if you don't want to scale it to a different
size. When you indicate a size in the <IMG> tag, many browsers
will insert a rectangle as a placeholder while the image downloads.
This will allow users to read the text of your document immediately,
instead of having to wait for the images to download first.
- To specify the alignment of an image, use the ALIGN attribute inside the <IMG> tag.
- To align the image above the text that surrounds it, type
ALIGN=BOTTOM. This sets the bottom of the image equal to
the baseline of the text. Likewise, to align the image below the
surrounding text, type ALIGN=TOP. You can also align the
middle of the image to the text baseline by typing ALIGN=MIDDLE.
- To force text to wrap around an image, type ALIGN=LEFT
inside the <IMG> tag. This will align the image with
the left margin of the document, and text will flow around it,
beginning with the current paragraph.
- To place the image in the right margin of your document, type
ALIGN=RIGHT.
- You can specify the height and width of your image. If you
specify a different height and width than the actual image, the
browser will scale the image to fit your settings. To set the
height, place your cursor in the <IMG> tag and type HEIGHT=,
followed by the height of the image in pixels. To specify the
width of the image, type WIDTH=.
- There are a number of enhancements to the <IMG> tag. Netscape and Internet Explorer provide many extensions for greater layout control.
