Lecture 9: Images
Overview:
Images on the Web
- Most images on websites are saved in the GIF (.gif) or JPEG (.jpg, .jpeg) file formats, as these are the formats most widely supported in browsers.
- Some websites have also begun to use the PNG (.png, pronounced as "ping") file format, although old browsers offer little or no support and even some modern browsers (such as PC Internet Explorer 5.x and 6) have limited support. This lack of support has limited the adoption of the format.
- All of these formats compress the image using different algorithms, in order to reduce file sizes.
- GIF (Graphics Interchange Format) is limited in the number of colors it can display (only up to 8-bit, which is 256 colors) and has limited animation and transparency options; it tends to work best (file sizes are most efficient) when images have few colors and large solid areas of color. As a result, they are frequently used for graphical buttons and logos.
- JPEG (Joint Photographic Experts Group) can display significantly more colors (up to 24-bit, which is 16,777,216 colors) than GIF and its compression works best with complex images, so this format is typically used for photographs and other images that have significant numbers of colors as well as gradations. The degree of compression can also be set, which impacts file size and image quality significantly. JPG format does not support transparency or animation.
- PNG (Portable Network Graphics) was introduced as an alternative to GIF, due to concerns about licensing fees for the compression algorithm used in GIF. PNG can support a lot more colors than GIF (up to 24-bit, like JPG) and also has more advanced transparency options, as well as support for cross-browser gamma (lightness / darkness) correction. File sizes are supposed to be smaller than GIF, but depending on how well your imaging program has implemented PNG support you could end up with larger file sizes compared to GIF. PNG has no built-in support for animation.
- Images on the computer are not going to look as good as images in print, due to the limited number of pixels. Computers will be at 72 or 96 ppi (pixels per inch), compared to a printed document that would be at 300 ppi.
- Be careful not to resize images saved in these formats to a larger size (either in an imaging program or in your code); the results will not be attractive because the program is having to guess at what colors to use. Also note that larger dimensions will result in larger file sizes, because these formats are not based on vectors.
- Some browsers may support other image formats (for example, Windows Internet Explorer supports bitmap images, which have .bmp extensions), but support is not broad enough for me to recommend using those formats. Browsers not recognizing the image format would probably give you a prompt to download the image, since the browser does not know what to do with the file.
The <img /> Tag
- Images render as inline elements and are coded with the <img /> tag, which has no closing tag and therefore needs to be self-terminated.
- The <img /> tag is simply a reference to the external graphic, telling it where to appear in the web page.
| Attribute | Usage and Effect | Values Accepted | Default | Deprecated? |
|---|---|---|---|---|
| align | Used to horizontally move the image (text then wraps around the edge of the image) or to vertically align text relative to the image | left | right | bottom | middle | top | bottom | Deprecated |
| alt | This is a required attribute and is essential for accessibility, as the alt attribute's value is read/output by adaptive technology such as screen readers and braille output devices.
The alt content will display when images are disabled in the browser or when images fail to load for some reason (e.g., a broken path to the image). If the image has no meaning to the user or is used for formatting (such as a block of color), indicate alt="" so that adaptive technology skips over it; if you omit the attribute the file name is read/output and that is usually confusing. Alt attributes display as tooltips in Windows Internet Explorer 5.x and up, as well as in some old browsers. |
Text | Not deprecated | |
| border | If an image is linked (surrounded by <a> </a> tags), a blue border will appear around the image. This attribute determines how thick that border is, ranging from 0 (no border) to a number greater than zero that represents the border width in pixels.
Unlinked borders tend to render as black. |
Number | Typically 1 or 2 if linked (zero if unlinked) | Deprecated |
| height | Always specify a height so that images render faster. If the height is omitted the browser takes a couple of passes before determining the correct dimensions.
In almost all cases you should use the actual height of the graphic for the value; while you could specify a larger or smaller height to scale the image this will usually cause distortion. |
Number | Not deprecated | |
| hspace | Horizontal space; this is the number of pixels to the left and right sides of the image; other content will not move into that space. | Number | Deprecated | |
| name | This can be used in JavaScript to locate the image and modify the graphic. We will not be using the attribute in this class. | Text | Not deprecated | |
| src | This required attribute provides the path to the image. Without this attribute, the <img /> tag could not work properly. | Path to image; relative paths always preferred to absolute | Not deprecated | |
| vspace | Vertical space; this is the number of pixels to the top and bottom sides of the image; other content will not move into that space. | Number | Deprecated | |
| width | Always specify a width so that images render faster. If the width is omitted the browser takes a couple of passes before determining the correct dimensions.
In almost all cases you should use the actual width of the graphic for the value; while you could specify a larger or smaller width to scale the image this will usually cause distortion. |
Number | Not deprecated |
Sample code:
<!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" xml:lang="en" lang="en">
<head>
<title>Images in (X)HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<p>Picture 1 of the Sydney Opera House:</p>
<p><img src="sydney1.jpg" alt="A picture showing part of the
Sydney Opera House" width="113" height="150" /></p>
<p>Picture 2 of the Sydney Opera House:</p>
<p><img src="sydney2.jpg" alt="A view of the Sydney Opera
House from a distance" width="113" height="150" /></p>
<p>The above images are public domain images from
<a href="http://www.burningwell.org/">BurningWell.org</a></p>
</body>
</html>
Images and Text
- The align attribute becomes useful when text wraps around the image, but keep in mind that you cannot combine top/middle/bottom with left/right, since that attribute only accepts one value. Specifying a left or right alignment will also cause the default vertical alignment to switch from bottom to top for content.
- The hspace and vspace attributes can also be helpful for putting some space between the text and the image. The limitation of hspace and vspace is that they affect both the top/bottom and left/right sides, respectively. There is no way to specify just space on the top or just space on the right side of the image using (X)HTML attributes. CSS gives us more control over this spacing.
- It also becomes very helpful to use <br clear="all" /> to prevent layout problems for content below the aligned image.
- You will probably find that it takes some trial and error to arrive at the desired layout. Plus there will always be variability in how the text wraps around the image, based on font used and font size, as well as browser window size and resolution.
Sample code:
<!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" xml:lang="en" lang="en">
<head>
<title>Images in (X)HTML, Part II</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<p><img align="right" src="sydney1.jpg" alt="A picture showing
part of the Sydney Opera House" width="113" height="150" />
Picture 1 of the Sydney Opera House</p>
<br clear="all" />
<p><img hspace="20" src="sydney2.jpg" alt="A view of the Sydney
Opera House from a distance" width="113" height="150" />
Picture 2 of the Sydney Opera House</p>
<p>The above images are public domain images from
<a href="http://www.burningwell.org/">BurningWell.org</a></p>
</body>
</html>
Sample code:
<!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" xml:lang="en" lang="en">
<head>
<title>Images in (X)HTML, Part III</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<p><img align="left" hspace="30" src="sydney1.jpg" alt="A picture
showing part of the Sydney Opera House" width="113" height="150" />
Picture 1 of the Sydney Opera House</p>
<p>Sample text</p>
<p>Sample text</p>
<p>Sample text</p>
<p>Sample text</p>
<p>Sample text to show wrapping around the image</p>
<p><img align="middle" vspace="50" src="sydney2.jpg"
alt="A view of the Sydney Opera House from a distance" width="113"
height="150" />
Picture 2 of the Sydney Opera House</p>
<p>The above images are public domain images from
<a href="http://www.burningwell.org/">BurningWell.org</a></p>
</body>
</html>
Sample code:
<!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" xml:lang="en" lang="en">
<head>
<title>Images in (X)HTML, Part IV</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<p>Picture 1 of the Sydney Opera House
<img align="right" border="15" hspace="5" vspace="5" src="sydney1.jpg"
alt="A picture showing part of the Sydney Opera House" width="113"
height="150" /></p>
<br clear="all" />
<p>Picture 2 of the Sydney Opera House
<a href="http://www.sydneyoperahouse.com/"><img align="right"
border="5" vspace="50" src="sydney2.jpg" alt="A view of the Sydney
Opera House from a distance" width="113" height="150" /></a></p>
<br clear="all" />
<p>The above images are public domain images from
<a href="http://www.burningwell.org/">BurningWell.org</a></p>
</body>
</html>
Recommendations and Considerations
You must always be careful of copyright when dealing with images. It is our professional, ethical, and legal responsibility to only use:
- Images where you own the copyright (for example, pictures or art you have created)
- Images in the public domain (these images can be freely used and will be what we use for this class; consult Wikipedia or a site such as BurningWell.org)
- Images under some sort of licensing system (where you are meeting the licensing obligations, which could be as simple as citing the author/creator of the image)
- Images you have purchased (such as from a photo disc or online at a website such as Getty Images)
- Quality images matter. Avoid clip art, ASCII art, and low-quality images. Your site's visual presentation reflects directly on your professionalism and credibility.
- At a minimum, always specify src, height, width, and an appropriate alt attribute value.
- Think carefully about the alt attribute value. In some cases alt="" is appropriate and should be used; in other cases you should provide meaningful text. Ask yourself what text would be helpful to hear aloud or have output in some other fashion to someone experiencing the site in a non-visual fashion.
- If an image cannot be found, some browsers will leave a placeholder for it (such as Windows Internet Explorer and Opera), while Gecko-based browsers render the layout as if the image was not there.
- Finding out image dimensions (height/width) has become easier over time. Windows XP will display the image dimensions in a tooltip and also at the bottom of the window if you select the image file. If you have an imaging program that can also give the dimensions. Mac users can drag images into their browser and look at the title bar to see the dimensions.
- Images must always be transferred as binary when you put them on the server.