Using Images

USING IMAGES

One of the compelling things about the World Wide Web is its ability to incorporate images and other media with text. Images can be powerful additions to web pages and can communicate things that would be very difficult to do with text, but though a picture may be worth a thousand words, it shouldn't take a thousand times longer to download and display. Keep in mind also that some of your users will be using small, portable devices, or may be using screen readers or other assistive technologies, so use graphics judiciously and provide text alternatives.

This discussion covers raster images, the kind of image produced by scanners, digital cameras, and applications like Photoshop. They are the most widely supported by web browsers. Rasters, or bitmaps, represent images with rows of dots (called pixels). Raster images can be contrasted with vector images, which use mathematical descriptions of shapes. Rasters are often the easiest to produce, but they can be large and they don't scale well. Vector images can be more time consuming to produce, but are usually smaller and scale easily to any size.

Images are included in a web page with the img tag and can be in any of a number of formats. Always include the alt attribute of the img tag. This allows users who are relying on text to still use your pages. Depending on the level of HTML you are using, the img tag also supports a longdesc attribute for a longer descriptive text or a title attribute. Use the alt and other attributes to convey the same information that the image would have provided, as far as that is possible.

Graphical web browsers like Firefox and Chrome support images in two basic ways. Inline images appear on your web page, intermingled with your text. External images are displayed in a separate window and may use a helper application as a viewer. There are advantages and disadvantages to each method. Inline graphics are limited to the formats supported by the browser and large images might cause problems, but no additional software is needed. GIF and JPEG formats are supported by virtually all graphical browsers and PNG is supported by newer browsers. Some browsers also support TIFF and other formats. External images may mean that the readers of your page must have software in addition to a web browser (which many might have) and their workstation may need additional memory, but an external viewing application may support more image formats, handle large images more gracefully, and may have other features. Whether or not to use an external application to view an image is often under the control of the individual browser configuration. A useful technique in some situations is to use a small inline image called a thumbnail as a link to a larger external image to be displayed in a separate page or window.

A key choice you must make to balance image quality and file size is the color depth of your image. For most photographic images 24-bit color will be appropriate. Limiting the color palette reduces the size of the image file and can often be used with non-photographic images. For some applications 16-bit color or 8-bit color or even 8-bit gray scale will be adequate. For color images be sure you are using a single RGB layer. Some applications can produce multilayer RGB or CMYK images that are used in press work. They generally aren't suitable for web applications and are a factor of 3 or 4 larger. Some image formats support gamma control, but it is of limited value for most web applications.

Except in unusual situations it is best to restrict yourself to GIF, JPEG, and PNG images. GIF is better for non-photographic elements and for situations that can work well with the 256-color palette limit of the format. GIF also supports interlaced images, improving the perceived speed of the rendering of your page, and transparent images. JPEG is better for photographic images and situations requiring more than 256 colors. JPEG is a lossy format -- it compresses the image by removing detail -- with a range of quality settings. All else being equal the higher the image quality, the lower the compression, and the larger the file. Newer browsers support progressive JPEG images, which are similar to interlaced GIF images. GIF is a lossless format, but can achieve good compression by restricting the number of colors that can appear in a single image. Newer browsers also support PNG images, which is a lossless format designed for web applications with several kinds of compression and other features, including several color depths, interlacing, gamma control, and an alpha channel. Some browsers also support TIFF images directly.

You should try to accommodate a wide range of client hardware – older, slower machines; monitors of various sizes and color capability; tablets; phones; etc. Also consider the range of network connectivity possibilities from fast ethernet and broadband connections to slower cell or dial-up modem connections. There can be a range of bandwidth of orders of magnitude and an image that might appear almost instantly for a user on a fast office or campus network might take many agonizing minutes for someone with a slower connection.

When designing your images you should use about 72 d.p.i. to approximate the resolution of most monitors, which commonly range from 60 to the 100 d.p.i. GIF images don't include resolution information, so in general are just displayed at the monitor's resolution. JPEG images can contain resolution information, but it may or may not be correctly interpreted by the browser and the underlying system.

The img tag also supports height and width attributes. These are most often used to specify the size of the image in pixels. Supplying this information allows the browser to render the page more quickly by reserving the space required for the image before it is downloaded. You should always use the actual height and width of the image file. If you provide values that don't match the image most browsers will use the space you describe and scale the image to fit, but may not do a very good job. Scaling an image to a larger size will create a blocky image and scaling an image to a smaller size will lose detail with no saving in download time.

All three of these images were specified as 72 x 72 on their img tags. The image on the left is actually smaller and must be scaled up by the browser. The center image is the correct size. The image file on the right is six times larger, but although it takes longer to download, no additional detail is visible (unless the browser displays it at its actual size, thus losing any benefit of specifying its size).

Some very old workstations will be limited to 256 (8-bit) color and some systems with better color capabilities may still limit a displayed page to a single color palette. If a color you have specified isn't available a similar color may be substituted or dithering may be used to approximate it. Some image editing software can convert an image to use a 216 color palette, sometimes called the "web-safe palette," that is likely to be available on a variety of platforms and browsers. If the system displaying your page supports only a limited palette, then using the same palette for all of your images well provide the best results, but can reduce the quality of the images when seen on more capable systems.

USING IMAGES

RELATED TOPICS