Topic 5 - Image, Animation & Interactivity


  • Images include such diverse things as scanned photographs, icons, illustrations, drawings, and simple animation.

Image Formats

  • GIF
    • Created by CompuServe.
    • Stands for Graphics Interchange Format.
    • Support 8-bit color and is the most common format.
  • JPEG
    • Stands for Joint Photographers Experts Group
    • Can support either 8-bit or 24-bit color.
    • Lossy compression - each time the image is compressed into JPEG format, some of the pixels are discarded.
  • PNG
    • Stands for Portable Network Graphics.
    • Supports both 8-bit and 24-bit color.
    • It uses lossless compression algorithm.
    • PNG is currently an open standard, which means that anyone is free to use it and no single body or organization has fixed all the parameters of the standard.
  • PDF
    • Stands for Portable Data Format.
    • These images are created with a special software package from Adobe called Acrobat.
    • Any current browser without additional software package that called Acrobat Reader cannot read PDF images.
  • TIFF
    • Stands for Tagged Image File Format
    • Commonly used to exchange documents between different computer platforms.
  • BMP
    • Is a standard Microsoft Windows image format.
    • It can support 1, 4, 8, and 24 bits per pixel.
  • PCX
    • Is an older image format that was developed by Zsoft for the PC Paintbrush program.


Image Sizes

  • If the image size is large, than the download time will increase.
  • 8-bit image is better than the 24-bit image.


Graphics Tips

  • Simplify your graphics: Keep the image simple.
  • Use the fewest color and save in GIF or JPEG format.
  • Avoid dithering (blending two colors among adjacent pixels to achieve a third color).
  • Divide up large pages:
  • Keep pages under a 50-kilobyte maximum size, including all the graphics.
  • Keep large graphics on their own page.
  • Reuse the images on your page.



Types of Sound Files:

  • µ-law (mu-law):
    • most widely support.
    • develop for UNIX operating system.
    • Use a 2:1 compression ratio.
    • Supports only monaural (single channel)
    • File extension - *.au
  • RIFF Wave:
    • Resource Interchange File Format Waveform Audio format or Wave
    • Most commonly used on Microsoft Windows products.
    • Can support monaural (single channel) and stereo (multichannel).
    • File extension - *.wav
  • AIFF and AIFC:
    • Audio Interchange File Format (AIFF).
    • Use to store high-end audio data.
    • Develop by Apple.
    • AIFF Compressed Format (AIFC)
    • This compression algorithm can compress sounds up to 6:1, but it is a lossy form of compression.
  • MPEG Audio:
    • Moving Picture Experts Group (MPEG).
    • This format has the best compression algorithms, which they can compress to ratio of 4:1 with almost no loss of signal quality.
    • MPEG files are usually designated with an extension of *.mp2
  • RealAudio (.rm)
    • RealAudio is the predominant streaming technology currently in use on the web.
    • It requires a proprietary player, but basic versions of the player are available free.
  • MIDI
    • Musical Instrument Digital Interface format is not a digitized audio format.
    • It represents notes and other information so that music can be synthesized.
    • MIDI is well supported and files are very small, but it is useful for only certain applications due to its sound quality when reproduced on PC hardware.
  • RMF
  • Rich Music Format as supported by Beatnik is a compact high-quality primarily download-and-play audio format growing in popularity.


Types of Video Files:

  • MPEG Video:
    • Most common format for digital video files.
    • MPEG files usually have the file extensions of *.mpg on Intel platforms and *.mpeg on systems that support longer file names.
  • QuickTime:
    • Developed by Apple Macintosh.
    • Usually QuickTime movies have an extension of *.qt or *.mov on all platforms.
  • Video for Windows:
    • Developed for the PC by Microsoft.
    • Usually have a file extension of *.avi, which stands for Audio/Video Interleave.
  • Streaming Audio/Video:
    • One of the newer forms of multimedia is the Shocked movie created with Macromedia's Director program.
    • These multimedia movie presentation s feature streaming audio and video, which means that the movie or audio clip starts as soon as the browser plug-in begins to receive the file.
  • ASF
    • Microsoft's Advanced Streaming Format is delivered using their NetShow, now called Windows Media server technology.
    • A rising competitor to RealVideo, ASF files are high quality and commonly supported by Internet Explorer browsers.
  • RM
    • RealVideo is the current leader in streaming video technology.
    • RealVideo files can be saved at a variety of quality levels, depending on end-user bandwidth availability.

Animation & Interactivity

  • Macromedia Flash
    • Macromedia Flash is an application that developers use to produce interactive, animated movies.
    • Flash can be used to create web-based banner advertisemnts, interactive web sites and web-based applications with stunning graphics and multimedia effects.
    • An advantage Falsh has over other multimedia development applications is that Flash has provides for drawing graphics, generating animation and adding sound and video.
    • Flash movies can be embedded in web pages, placed on CD-ROMs as independent applications or converted into standalone, executable programs.
    • Another advantage of using Flash to produce interactive content is that Falsh includes tols for writing its scripting language, ActionScript.
    • ActionScript is the enabling technology for Flash interactivity. - Macromedia Flash File Formats " .fla file extension is a Flash specific extension for editable movies.
    • Movies can be viewed in their published state with the Falsh Player. Published Flash movies have the file extension .swf, which stands for Shockwave file.
    • Shockwave files are read-only, meaning that they can be viewed but not edited.

Others Animation File Formats

  • Animated GIFs
    • Animated GIFs are the simplest form of animation and are supported natively by most browsers.
    • Looping and minimal timing information can be set in an animated GIF, but complex animation is beyond this format's capabilities.
    • DHTML (JavaScript) can be used to move objects around the screen.
    • However, DHTML-based animation tends to be choppy and is not suggested for anything beyond simple button rollover effects. And scrolling text effects.
    • Dreamweaver can add DHTML-based path animations easily to pages.
  • Shockwave
    • Shockwave files are compressed Macromedia director files.
    • Their main benefit over Flash is simply that they support complex scripting.
    • However, they can be significantly larger than Flash files.
  • Java
    • Java can be used for animation, but it is not suggested.
    • The only major benefit of Java-based animations is that they can be created on the fly based on a complex calculation.
    • The only major use for Java in this sense might be animations created client-side based on user inputs.
    • Java might be used for a simulation or animated graphing application.
    • Java is relatively complex, and is overkill for simple animations.

backWeb Structure | Web Developmentnext










Copyrights Reserved © Web Publishing 2003


  • Assignment 1
  • Assignment 2
  • Quiz 1
  • Quiz 2
  • Project



To all my students!

Please visit this web site regularly.