Libraries HomeWeb Publishing Curriculum Resources Images on Web Pages University of Oregon Libraries
Web Publishing Curriculum Resources
Images on Web Pages
Images are an important part of the web experience. Because text is often difficult to read online, the phrase "an image is worth a thousand words" is never more true than on the web. The visual becomes all important, and web users rely on images to convey content as well as liven up a web page.
Some Typical Uses for Images
- separate image files
- photos or art embedded in a web page
- background images
- image maps
- icons for buttons (navigation, form submission), e.g.
- inline symbols, e.g.,
= 3.7, p 0.1 - icons for bullets, rules, and dingbats
- invisible graphical
spacers - horizontal rules
HTML for Images
An image element with all of its possible attributes, such as the HTML code for the image above, might look like the following:
<img src="dragon.gif" alt="Image: Dragon" align="right" width="136" height="125" border="0" />
| HTML Markup | Explanation |
|---|---|
| <img [+attributes] /> | The HTML element for inserting an image. Note the slash (/) at the end this is necessary because the image element has no closing tag |
| src="dragon.gif" | source URL (name of the image file) required |
| alt="Image: Dragon" | alternate text again, required. Textual description of the image, which is useful in a number of ways, chiefly that it aids accessibility, and it's available to the user if the image can't load or if the user has images turned off |
| align="right" | alignment of the image with text possible values are top, middle, bottom, left, and right. Note: this attribute is deprecated in HTML 4.01, but is included here because it is still sometimes necessary |
| width="136" height="125" | the size of the image, in pixels; not required, but it helps pages load faster because the browser knows how much space to set aside for an image. Using width and height to scale images is not recommended use graphics editing software and save the image at the size you want it to appear. |
| border="0" | width of the border (in pixels) around an image the default in most cases is "0"; the exception occurs when an image is enclosed within an anchor, in which case the default border thickness is "1." This attribute is deprecated in HTML 4.01, but is still sometimes convenient to use. |
Aligning Images and Text
Even though the align attribute is deprecated in HTML 4.01, there is sometimes no easy way to handle image alignment with cascading style sheets, especially if you have multiple images with different alignments.
The table below lists the allowable values for the align attribute, and provides examples of their behaviors.
Note that values should always be enclosed in quotation marks.
| align="..." | Example |
|---|---|
| top |
|
| middle |
|
| bottom |
|
| left |
|
| right |
|
orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. ...Image Formats
The two image formats that are universally supported by web browsers:
- GIF Graphics Interchange Format. A format used for displaying line art images, icons, and flat color images. Images are limited to 256 colors. In addition to offering a "transparent" background (the background color or image of the web page shows through the transparent areas of the GIF image see the dragon image above for an example), GIF files support simple animations.
- JPEG Joint Photographic Experts Group. A format for storing high-quality color and grayscale photographs. Supports up to 16.7 million colors.
Both formats are resolution-specific; that is, you must save them for a specific resolution. Since most monitors can't display at a resolution higher than 150 dpi, you won't need to go any higher than that. This will also create smaller file sizes. Different web browsers use different color allocation algorithms, which can affect the intensity of images on the screen.
Optimizing Images for Download Speed
At modem speeds, expect pages to load at 1-3KB/sec, which means that you'll want to limit the entire page to 45KB or less. The following tips will help pages with images load faster:
- Don't use images you don't need. Consider alternatives such as lists, horizontal rules, and tables.
- For larger images, consider creating thumbnail images to use on your web page then link to the larger image, e.g.
<a href="photo.gif"><img src="photo-sm.gif" alt="View larger photo"></a> - Interlace your larger GIF files; this allows images to load progressively, rather than all at once.
- Include width and height on all images.
- Use a 216-color (or smaller) palette, if possible.
- Use JPEG (at the lowest feasible quality setting) for continuous-tone graphics.
- Use GIF for line art and solid colors.
- Consider purchasing special-purpose optimization software such as DeBabelizer or Fireworks.
Recommended reading:
- Optimising Images (by Ross Shannon)
- Optimizing Web Graphics (from WebReference.com)
