Graphics & Multimedia


A picture is worth a thousand words and a second visit to a website. Some thought must go into the graphics used on your site. A poorly designed graphic distracts from the sites content but the lack of graphics can be worse.

When adding graphics to a web page keep in mind the size of the image file and how it will contribute to the speed that the page will display on the visitors' browser. Use a graphic program to "optimize" your images before adding them to the page. Try to get your clip art image down under 15 kilobytes if possible and keep photos around 45 kilobytes. You may want to provide a larger version as an option.

Generally use the .gif format for clip art with 256 colours or less, use .jpg for photos or images with a large range of colours and .png for either.

The GIF format allows you to define one colour as transparent which is usually used as the background colour. The GIF format can also be used to create animations.

The JPEG format allows you to set the level of compression. Though highly compressed images produce smaller file sizes the image quality also deteriorates. Software applications will assist you with optimizing your images but it still takes some trial and error to get that image perfect.

The PNG format allows you to optimize images and set transparency. PNG also supports alpha transparency or the ability to set a range of colours transparent and the percentage of transparency though not all browsers support this.

It is possible to control the text flow around images using styles. A simple hack is to put the text and image in separate cells in a table.

Always use the ‘alt' attribute to add a text definition for your images. These will be the words that text browsers display and the words that audio browsers read.


Sound & Animation

These two categories have been place together as they often come under the category of multimedia. They also involve more complex web designs, often involving some programming or plugins. MPEG is an attempt to create a common standard out of the dozens of sound and animation standards available. MPEG 3 has provided a common format for multimedia content as most multimedia players recognize it, it involves very little training to use and is simple to incorporate into a site.

There are many different formats for animation but Flash and GIF animations stand out as commonly used formats. Adobe produces Flash, a multimedia development program, which creates applets that can be placed on most web servers. The web page visitor must have a Shockwave plugin installed to view the animation.

A plugin is a helper program that is installed on your computer and is used by your web browser to display this multimedia content.New browsers install plugins automatically that will accept "streaming media" without any special requirements. As technology advances browsers can download newer plugins to display the newest multimedia content.

A simple solution to placing multimedia content on your website is to use a media hosting server such as Youtube, Flickr or Vimeo. Video files tend to be large and can place a strain on your hosting server. Most hosting services have bandwidth limits and videos tend to use a lot of bandwidth. Many websites will embed a video from a video hosting service in their own website to preserve their own bandwidth allowing the video to stream from the video host's server.

Another simple form of animation are gif animations. GIF animations are a series of images or frames setup to display one after the other. There are many graphics programs that allow you to assemble and create images then save them as .gif files.

There are many different formats for audio/video. Microsoft's MediaPlayer and Apple's QuickTime are two popular multimedia players, each with their own formats. Many servers support MediaPlayer and QuickTime formats but you may want to double check that it is possible to stream the multimedia presentation. Another common format is Audio Video Interleave or AVI. Most players can play AVI files but the AVI format doesn't provide a method to compress the data so files tend to be large. Streaming allows the player to begin playing the presentation once part of it has been downloaded and continue playing the presentation as the rest downloads.

To create a multimedia presentation a video program is required.

MPEG is another economical way to place multimedia on your site. You will probably have to purchase a development program but placing the content on a website can be as simple as creating a link and most multimedia players (including the one that comes with Windows) will play it.

A designer that wishes to serve multimedia content to their visitors will need to learn some basic programming techniques to set it up. Multimedia content can be added to a page with the <EMBED> tag and/or the <OBJECT> tag.

Correction form

Enter the error in this field
Enter the correction in this field
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.