HTML Image Basics
| < Day Day Up > |
To insert an image into a Web page, use an <img> tag and set its src attribute equal to the URL of the image. As discussed in Chapter 4, the form of the URL can be either an absolute URL or a relative URL. Most likely, the image element will use a relative URL to an image found locally. To insert a GIF image called logo.gif residing in the same directory as the current document, use
<img src="logo.gif">
Because img is an empty element under XHTML, you would use
<img src="logo.gif" />
We'll use the XHTML syntax from here on. Of course, in the previous example, an absolute URL also could be used to reference an image on another server.
<img src="http://www.democompany.com/images/logo.gif" />
Using an external URL is not advised because images can move or cause the page to load at an uneven pace.
| Note | The src attribute must be included. Otherwise, browsers that support images might display a placeholder or broken image icon. |
To set up a simple example, first create a directory to hold your images. It usually is a good idea to store all your image media in a directory named "images." This helps you keep your site contents organized as you build the Web site. Now place a GIF format image named robot.gif in that directory. To retrieve an image from the Internet, you can simply right-click with your mouse on an image and save the file to your directory. Macintosh users must hold the mouse button down on an image to access the menu for saving the image. Once you have a GIF image, you should be able to use a short piece of HTML markup to experiment with the use of img , as shown in the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title> Image Example </title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> </head> <body> <h2 align="center"> Image Example </h2> <img src="images/robot.gif" alt="robot" width="156" height="251" border="0" /> </body> </html>
| Note | The name of the image, its path , its width, and height are made up for this example. Your particular attribute values might be different. |
A rendering of the image example is shown in Figure 5-10.
Figure 5-10: Rendering of a simple <img> example
The next few sections cover the basic attributes of img .
Alternative Text Using the alt Attribute
The alt attribute, which is required under HTML and XHTML specifications, provides alternative text for user agents that do not display images, or for graphical browsers where the user has turned off image rendering.
<img src="images/logo.gif" alt="Demo Company Logo" />
The alt attribute's value may display in place of the image or be used as a Tooltip or placeholder information in image-based browsers. Any HTML markup found in the alt element will be rendered as plain text. If the option to display images is turned off, the browser displays the alternative text, as shown here:
A browser may also show the alt text as images load, giving the user something to read as the page renders .
Many modern graphical browsers will also display the alt text as the Tooltip for the image once the pointer is positioned over the image for a period of time. However, the core attribute title should override this and be displayed instead of the alt text in a conformant browser, as shown in the previous illustration.
While theoretically there is no limit to the alternative text that can be used, anything more than a few hundred characters may become unwieldy. Some browsers do not handle long Tooltips and alt text properly, and may not wrap the descriptive text. However, be warned that if you insert entities such as , which indicates a carriage return, to format the alt or title text, you may wreak havoc in voice browsers that read screen content, though the visual presentation might be improved.
The alt attribute's importance becomes clear when you reflect on how many people access the Web from a text-only environment. Unfortunately, much of the alternative text set does not always provide a substantial benefit. Do the previous examples really help by backing up the Demo Company logo graphic with the actual words "Demo Company logo"? Would simply "Demo Company logo" be sufficient, or insufficient? Try to make alt text reflect the meaning of an image; if an image is merely decorative , like a graphic bullet for a list item, setting to no value ( alt="" ) is perfectly acceptable.
Although a lot of people might argue that the Web wasn't popular until graphics were integrated or that the Web inherently is a visual medium, the value of textual content on the Web is indisputable. Consequently, it should be made as accessible as possible. There is no arguing that a picture might be worth a thousand words; but if that is the case, why not provide a few words in exchange?
Image Alignment
Probably the first thing a user wants to do after he or she is able to put an image in a Web page is to figure out how to position it on the page. Under the original HTML 2 standard, there was very little that allowed the user to format image layout on a page. Initially, the align attribute could be set to a value of top , bottom , or middle . When an image was included within a block element, the next line of text would be aligned either to the top, middle, or bottom of the image depending on the value of the align attribute. If the attribute wasn't set, it would default to the bottom. The example that follows illustrates basic image alignment as first defined in HTML 2. The rendering of the image alignment example is shown in Figure 5-11.
Figure 5-11: Image alignment rendering
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title> Basic Image Alignment </title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> </head> <body> <p><img src="images/aligntest.gif" align="top" alt="" border="1" /> This text should be aligned to the top of the image .</p> <p><img src="images/aligntest.gif" align="middle" alt="" border="1" /> This text should be aligned to the middle of the image .</p> <p><img src="images/aligntest.gif" align="bottom" alt="" border="1" /> This text should be aligned to the bottom of the image .</p> </body> </html>
One of the problems with image alignment in early HTML was that the text really didn't flow around the image. In fact, only one line of text was aligned next to the image, which meant the inline images had to be very small or the layout looked somewhat strange .
Netscape eventually introduced the left and right values for align , which allowed text to flow around the image. These values were later incorporated into the HTML specification, but eventually, like other image presentation values, were deprecated under strict HTML and XHTML. When setting an image element such as < img src="logo.gif" align="left" /> , the image is aligned to the left and the text flows around to the right. Correspondingly, when you are using markup such as < img src="logo.gif" align="right" />, the image is aligned to the right and the text flows around to the left. It is even possible to flow the text between two objects if things are done carefully . The example presented here shows how the align attribute would work under transitional variants not using CSS. The rendering of this example is shown in Figure 5-12.
Figure 5-12: Image alignment rendering
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title> Improved Text Flow </title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> </head> <body> <p> <img src="images/redsquare.gif" alt="red square" align="left" /> The top image has its align attribute set to "left," so the text flows around it to the right. The top image has its align attribute set to "left," so the text flows around it to the right. The top image has its align attribute set to "left," so the text flows around it to the right. <br clear="left" /><br /><br /> <img src="images/redsquare.gif" alt="red square" align="right" /> The bottom image has its align attribute set to "right," so the text flows around it to the left. The bottom image has its align attribute set to "right," so the text flows around it to the left. The bottom image has its align attribute set to "right," so the text flows around it to the left. </p> </body> </html>
Notice in the previous example that there is a special attribute to the br element. This is necessary to force the text to flow properly and will be discussed shortly.
| Note | Netscape and Microsoft also support four other values for align : texttop , baseline , absmiddle , and absbottom . These attributes should be avoided in most cases because they are not standard, not supported consistently across browsers, and have been superseded by style sheets. In fact, formatting and positioning of images in general is handled more precisely by style sheets, which are discussed in Chapters 10 and 11. |
Buffer Space: hspace and vspace
Just floating an image and allowing text to wrap around it might not be adequate. You must also consider how to position the image more precisely with the text and make sure that text breaks where it ought to. Initially introduced by Netscape and made official in HTML 3.2, the hspace and vspace attributes can be used to introduce "runaround" or buffer space around an inline image. The hspace attribute is used to insert a buffer of horizontal space on the left and right of an image, whereas the vspace attribute is used to insert a buffer of vertical space between the top and bottom of the image and other objects. The value of both attributes should be a positive number of pixels. It is also possible to set the attribute values to percentage values, although this is inadvisable, as very high values can produce strange results. However, the most problematic aspect of the hspace and vspace attributes is the amount of buffer space that occurs on both sides of the image. Take a look at the XHTML transitional markup shown here to see how hspace and vspace work. Figure 5-13 displays a possible browser rendering of the example code.
Figure 5-13: Rendering of hspace and vspace example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title> HSPACE and VSPACE Example </title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> </head> <body> <p> The image below has its <tt><b>< hspace ></b></tt> and <tt><b>< vspace ></b></tt> attributes set to 50 pixels, so the text will flow around it at a distance of 50 pixels. The rest of this text is dummy text. If it said anything interesting you would certainly be the first to know. <img src="images/redsquare.gif" align="left" alt="red square" hspace="50" vspace="50" /> This is dummy text. If it said anything interesting you would certainly be the first to know. There's really no point in reading the rest of it. This is dummy text. If it said anything interesting you would certainly be the first to know. There's really no point in reading the rest of it. This is dummy text. If it said anything interesting you would certainly be the first to know. There's really no point in reading the rest of it. This is dummy text. If it said anything interesting you would certainly be the first to know. There's really no point in reading the rest of it. This is dummy text. If it said anything interesting you would certainly be the first to know. There's really no point in reading the rest of it. This is dummy text. If it said anything interesting you would certainly be the first to know. There's really no point in reading the rest of it. </p> </body> </html>
It turns out that in the future, by using style sheets (discussed in Chapter 10), it is possible to avoid these somewhat imprecise layout features altogether. The hspace and vspace attributes have been very useful, albeit occasionally abused by Web designers.
Extensions to <br>
In flowing text around an image, a designer may encounter a situation in which he or she wants to clear the text flow around the image. For example, it could be problematic to create an image with a caption like the one shown in Figure 5-14 because the text might reflow .
Figure 5-14: Image with misaligned caption
To deal with such problems, a new attribute called clear was added to the br element; this extension now is part of the HTML standard, though of course it is deprecated under strict HTML and XHTML by CSS, which provides a float property that does the same thing. Under older HTML versions and transitional XHTML, the clear attribute can be set to left , right , all , or none and will clear the gutter around an inline object such as an image. For example, imagine the fragment <img src="photo. gif" align="left" /> with text wrapping around it. If <br clear="left" /> is included in the text and the wrapped text is still wrapping around the image, the text will be cleared to pass the image. The clear="right" attribute to a < br /> tag works for text flowing around right-aligned images. Using a value of all ensures that the < br /> tag continues to break text until both left and right columns are clear. Setting the attribute to none makes the element act as it normally would and is implied when using the <br /> by itself. An example of the use of this attribute is shown here; a rendering appears in Figure 5-15.
Figure 5-15: Rendering of <br clear> example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title> BR Clear Example </title> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> </head> <body> <p> <img src="images/building.jpg" width="234" height="150" border="2" alt="Outside of the DemoCompany corporate headquarters" align="left" hspace="20" vspace="10" /> <b> Photo: </b> Demo Company, Inc Corporate Headquarters <br /><br /> <b> Description: </b> This building is a fine example of the <i> Miami Vice </i> influence on mid-80s southern California architecture. <br /><br /></p> <p> The next paragraph should appear under the photo, not next to it, thanks to <b>< br clear= " left ": / ></b>. <br clear="left" /> <i> Photo copyright © 2000 by Demo Company, Inc. </i> </p> </body> </html>
height and width
The height and width attributes to the img element, introduced in HTML 3.2, are used to set the dimensions of an image. The value for these attributes is either a positive pixel value or a percentage value from 1 “100 percent. Although an image can be stretched or shrunk with these attributes, the main purpose of height and width actually is to reserve space for images that are being downloaded. As pages are requested by a browser, each individual image is requested separately. However, the browser can't lay out parts of the page, including text, until the space that the image takes up is determined. This might mean waiting for the image to download completely. By telling the browser the height and width of the image, the browser can go ahead and reserve space with a bounding box into which the image will load. Setting the height and width thus allows a browser to download and lay out text quickly while the images are still loading. For an image called test.gif that has a height of 10 and a width of 150, use <img src="test.gif" height="10" width="150" /> . The usability improvement of using height and width attributes for images is significant, and they should always be included.
| Note | Many people wonder what the measurements of a particular image are. Using Netscape, it is possible to view the dimensions quite easily. First, load the image into the browser by itself without any accompanying HTML. Now look at the title bar of the browser, which should display the dimensions. Also, using the option to view document information for the image within the browser should reveal the dimensions. Most Web editors also can automatically show the dimensions of an image. |
In addition to the prelayout advantages, the height and width attributes can also be used to size images. This is rarely a good idea, as the image might end up distorted . One way to avoid distortion is to shrink images in a proportional manner. However, if the image is to be made smaller, it is a better idea to size the image appropriately in a graphics program. Shrinking the image with the height and width attributes does not affect the file size, whereas resizing the image beforehand will shrink the file, hence reducing the download time. Another use of height and width sizing might be to increase the size of a simple image. For example, imagine an image of a single green pixel, and set the height and width alike: <img src="greenpixel.gif" height="100" width="100" /> . The resulting image is a large green box with very little download penalty. A few sites even use the height and width attributes with percentage values such as 100 percent to create interesting effects such as full-screen images or vertical or horizontal color bars.
One other interesting use of the height and width attributes would be to help preload images. Preloading can be used to create the illusion of a quick download. Imagine that during the idle time on a page, the images on the next page are being downloaded so that they are precached when the user goes to the next page. A significant perceived performance improvement is achieved. One way to perform this prefetching is by putting an image that will appear later on the current page with height and width both set to 1 . In this case, the image won't really be visible but will be fully loaded into the browser's cache. Once the user visits the next page, the image can be fetched from the local disk and displayed quickly. The link element extension for prefetching content discussed in Chapter 4 should really be used over this <img> tag trick.
Low Source Images
Another potential speed improvement introduced by Netscape and supported by many browsers despite not being part of the HTML or XHTML standards is offered by the lowsrc attribute. The lowsrc attribute should be set to the URL of an image to load in first, before the so-called high source image indicated by the src attribute. In this sense, the attribute can be set to the address of a low-resolution or black-and-white file, which can be downloaded first and then followed by a high-resolution file. Consider the following:
<img src="hi-res-photo.gif" lowsrc="bw-photo.gif" height="100" width="100" alt="Outside of building photograph" />
The lowsrc attribute can provide significant usability improvement when large full- screen images must be used.
One interesting aspect of the lowsrc attribute is that the browser tends to use the image dimensions of the lowsrc file to reserve space within the Web page if the height and width attributes are not set. Because of this, some strange distortion could happen if the high- resolution image is not the same size as the low-resolution image.
These are only the most common attributes for the img element. A more complete listing of img element attributes can be found in the element reference in Appendix A.
| < Day Day Up > |
EAN: 2147483647
Pages: 252