UK Home Academics Athletics UK's Chandler Medical Center Research Site Index Search UK

* WEB MULTIMEDIA

   

One of the compelling things about the World-Wide Web is its multimedia nature - it easily includes graphics, sounds, and even video. While the details of working with these formats is beyond the scope of this brief note, there are several important points to keep in mind. Contact a consultant at the Help Desk, a campus computer lab, or the FACTS Center for assistance.

GRAPHICS  

Graphics can be very valuable and make it possible to communicate things that would be very difficult to do with text, but though a picture may be worth a thousand words, it may take ten times longer to download and display. Keep in mind also that some of your readers will be using text-only browsers or will have automatic image loading disabled or may be using screen readers or braille output devices, so use graphics judiciously and provide a text alternative where possible.

When including graphical content be sure to use the alt attribute of the img tag when appropriate. This allows users with text-only browsers and users with automatic image loading disabled to still use your pages. Use the alt text to convey the same information that the image would have provided (as far as that is possible).

You should try to accommodate a wide range of client hardware - older, slower machines, monitors of various sizes and color capability, etc. Also consider the range of network connectivity possibilities from fast ethernets to slow dial-up SLIP and PPP connections.

GIF & JPEG


A highest-quality JPEG image. This image is about 30 kilobytes. A lower quality JPEG would be much smaller, but would appear blurred.


The same image as a 256 color adaptive-palette GIF. The image is about 19 kilobytes.


A PNG version of the image, about 43 kilobytes.

 

Graphical web browsers like Netscape Navigator support two kinds of graphics. Inline images appear on your web page, intermingled with your text. External images are displayed in a separate window and may use an external application as a viewer. There are advantages and disadvantages to each method. Inline graphics are limited to the formats supported by the browser (GIF is most common, JPEG nearly so, and PNG is supported by newer browsers) and large images might cause problems, but no additional software is needed. External images may mean that the readers of your page must have software in addition to a web browser (but that isn't unlikely) and their workstation may need additional memory, but an external viewing application may support more file formats (GIF, JPEG, TIFF, and PICT are very common), handle large images more gracefully, and may have other features. Whether to use an external application or not to view an external image is often under the control of the individual browser configuration.

Except for exceptional situations it is best to restrict yourself to GIF and JPEG images. GIF is better for non-photographic elements and for situations that can work well with the 256 color limit of the format. GIF also supports interleaved 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 - and that may or may not be acceptable depending on the application. GIF is a lossless format. Newer browsers support progressive JPEG images, which are similar to interleaved GIF images. Newer browsers also support PNG images, which is a lossless format designed for web applications.

RESOLUTION & COLOR PALETTES


The 216 common web colors. These will be available on most platforms and browsers.


The same image using the common 216 web colors. This image is about 14 kilobytes.

 

When designing your images you should use 72 dpi to match or at least approximate the resolution of most monitors, which commonly range from the 60s to the 90s. GIF and JPEG are simple, bitmap image formats that do not include size or resolution information.

Many older 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 that is likely to be available on a variety of platforms and browsers.

Another useful technique is to use a small inline image (called a thumbnail) as a link to a larger external image.

An inline image can be used as a link to another page and can be mapped to contain active areas that are links to multiple pages. See our image maps information for details.

SOUND  

Most modern workstations have the ability to play sounds from files you provide. The major consideration here is the trade-off between file size and sound quality. Most workstations have relatively small, low-fidelity speakers so it may not be worthwhile to include too much audio detail. Eight-bit sound sampled at from 8 to 12 khz will usually be sufficient.

Browser plug-in modules, such as the Quicktime plug-in available for Netscape Navigator can play sounds in several formats. Some browsers, and older versions of Netscape, may not have this capability and will require external applications to play sound files.

The most widely supported formats are u-law (mu-law or AU) and various Quicktime formats. Support for MPEG audio is also widely available. AIFF and WAV are platform-dependent and should be avoided.

Support via browser plug-ins is also becoming available for MIDI (Musical Instrument Digital Interface) files. When appropriate, MIDI can allow higher quality sound for music with relatively small files.

VIDEO  

It is also possible to include video clips in your pages, with support from browser plug-ins and external applications. MPEG is the most widely supported format, followed by Quicktime. As you might expect, video files are very large and the size/quality trade-off is even more problematic.

OTHER FORMATS  

There are many other sound, image, video, and animation formats supported by proprietary plug-ins. Macromedia's Shockwave is probably the most common. PDF, Portable Document Format, isn't an image format, but PDF documents can contain images in various formats.

This page was last updated on 2002-12-06. Please direct questions and comments regarding this page to webmaster@www.uky.edu.