Diploma in Web Engineering

Module II: Multimedia Technologies

Rasan SamarasingheESOFT Computer Studies (pvt) Ltd.No 68/1, Main Street, Pallegama, Embilipitiya.

Contents1. What are Graphics ?2. Digital Image Concepts3. Pixel4. Resolution of Images5. Resolution of Devices6. Color Depth7. Color Palette8. Dithering9. Bitmap and Vector Graphics10. Bitmap Graphics11. Vector Graphics12. Comparison13. Graphics File Formats14. Bit Map 15. Tagged Image File Format 16. Graphical Interchange Format 17. Join Picture Expert Group 18. Portable Network Graphics 19. Multi-image Network Graphics 20. Multimedia on Web

21. Animations22. Rollovers23. Animated GIF 24. Flash Files25. Audio26. Audio on Web Sites27. Audio File Formats28. MIDI29. WAVE30. MP331. AU32. AIFF33. Video34. Video File Formats35. AVI36. ASF37. MPEG38. QuickTime39. RealVideo40. Copyrights of Web Content

What are Graphics ?

Graphics are basically pictures and drawings either created by computer or entered into computers by scanning or photographing.

Digital Image Concepts

• Pixel• Resolution• Color Depth• Color Palette• Dithering

Pixel

In digital imaging a pixel is a single point in a raster image or the smallest addressable

element in a display device.

Resolution of Images

Resolution is a term used to describe the number of pixels, used to display an image.

More pixels are used to create the image, resulting in a sharp and cleaner image.

Resolution of Devices

The Resolution term is most often used to describe monitors and printers as well.

For monitors, the screen resolution signifies the number of pixels on the entire screen.

Color Depth

Color depth also known as bit depth, is the number of bits used to indicate the color of a

single pixel.

Ex: in 8-bit color mode, uses 8 bits for each pixel, making it possible to display 256 different colors or shades of gray.

Color Depth

1 bit (2 colors) 2 bits (4 colors)

4 bits (16 colors) 8 bits (256 colors)

Color Palette

In computer graphics, a palette is the finite set of available colors.

Color PaletteWeb Safe Colors Palette

Dithering

Dithering is creating the illusion of new colors and shades by varying the pattern of dots.

Different shades of gray are produced by varying the patterns of black and white dots.

There are no gray dots at all.

Creating purple color with using red and blue pixels.

Dithering Illustrated

Original photo. note the smoothness in the detail. Depth is reduced to a 16-color palette, with no dithering.

Uses the 16-color palette, with use of dithering.

Bitmap and Vector Graphics

Bitmap Graphics

Bitmap images (raster images) are made up of pixels in a grid.

The value of each pixel is stored in bits of data.

Vector Graphics

Vector graphics are described using mathematical definitions that define all the shapes in the image.

Vector graphics are based on lines and curves which lead through control points.

Comparison Between Bitmap and Vector

Bitmap Graphics Vector GraphicsBecome ragged when you shrink or enlarge them

Look the same even when you scale them to different sizes

Use less processing power than vectors

Use more processing power than bitmaps

Made up from pixels Made up from points, lines and curves based on mathematical expressions

Individual elements cannot be grouped

Individual elements can be grouped

Created by using Paint Programs Created by using Drawing ProgramsTake up more memory than vectors Take up less memory than bitmaps

Graphics File Formats

• Bit Map (BMP)• Tagged Image File Format (TIFF)• Graphical Interchange Format (GIF)• Join Picture Expert Group (JPEG)• Portable Network Graphics (PNG)• Multi-image Network Graphics (MNG)

Bit Map (BMP)

• The standard bit-mapped graphics format used in the Windows environment.

• Typically, BMP files are uncompressed.

• Simple and has a wide acceptance in Windows programs.

Tagged Image File Format (TIFF)

• A flexible format for storing bitmap images.

• Developed by Aldus Corporation (now part of Adobe Software).

• The TIFF format is widely supported by image-manipulation applications.

• Allows for a wide range of different compression schemes and color spaces.

• TIFF has not had a major update since 1992.

Graphical Interchange Format (GIF)

• Introduced by CompuServe in 1987.

• Limited to 256 colors scheme.

• Suitable for graphics with few colors such as simple diagrams, shapes, logos and cartoon style images.

• Uses a lossless compression.

• The GIF format supports animation (GIF89a).

• Supports with transparent backgrounds.

Join Picture Expert Group (JPEG)

• A commonly used method of lossy compression for digital images.

• Capable of much greater color depth (up to 24 bits), and best suited for photographs and complex graphics.

• The degree of compression can be adjusted, allowing to compromise between file size and image quality.

• JPEG 2000 is a new enhanced compression standard without compromising quality.

Portable Network Graphics (PNG)

• A bitmap graphic file format brings together best features of GIF and JPEG.

• Supports lossless compression and transparency like GIF.

• Supports high bit depth like JPEG.

• Does not support animations.

Multi-image Network Graphics (MNG)

• MNG is an extension to PNG published in 2001 that does support animations.

• It supports image transparency and better file compression than GIF.

• MNG is still not widely supported by web browsers.

Multimedia on Web

Multimedia is the integration of multiple form of media such as text, graphics, audio, video, etc.

Animations

An animation is a simulation of movement created by displaying a series of static images.

• Rollovers• Animated GIF• Flash Files

Rollovers

A Rollover is a section of a web page that is raised when the user moves the pointer over a

particular area.

Animated GIF (GIF89a)

A type of GIF image that can be animated by combining several images into a single GIF file

that are displayed in succession.

Flash Files

Flash is a vector based animation technology created by software Adobe Flash. Flash

animations are browser independent and often distributed in .swf file format.

Audio

• A term used to describe sound within the range of hearing.

• The playback quality of any sound recording is depend on the process and formats used to create it and quality of the output on the users system.

Audio on Web Sites

Audio on web pages can be delivered in two distinct ways.

1. Downloadable AudioAn audio file embedded in the webpage. Once the audio file was downloaded by user it can be played.

2. Streaming AudioThe user does not need to wait download and hear the audio. As soon as the connection made, a small buffer created and audio file begins to play.

Audio File Formats

• MIDI• WAVE• MP3• AU• AIFF

MIDI (Musical Instrument Digital Interface)

• A MIDI file contain data that control notes, pitch, length, volume all the details so a music synthesizer or audio card can decode it and make the right sounds.

• MIDI files are tiny, often 10K or less.

• There is no guarantee of exact tones when playing on different devices.

WAVE (Waveform Audio Format)

• A Wave file is an audio file format, created by Microsoft.

• They are generally kept as the first digital copy of a file completely uncompressed.

• The WAV files are substantially larger in size.

MP3 (MPEG audio layer 3)

• MP3 uses lossy compression algorithm to remove all superfluous data (The stuff the human ear doesn't hear anyway) to represent audio.

• An MP3 file that is created using the setting of 128 kbit/s will result in a file that is about 1/11 the size of the original file.

• An MP3 file can also be constructed at higher or lower bit rates, with higher or lower resulting quality.

Au

• The Au file format is a simple audio file format introduced by Sun Microsystems.

• Common format for sound files on UNIX machines.

• It is also the standard audio file format for the Java programming language.

AIFF (Audio Interchange File Format)

• The format was developed by Apple Computer and is the standard audio format for Macintosh computers.

• The AIFF format does not support data compression so AIFF files tend to be large.

Video

Video is an electronic medium for the recording, copying and broadcasting of moving visual

images.

Videos can be delivered on web in two distinct ways as Downloading or Streaming.

Video File Formats

• AVI• ASF• MPEG• QuickTime• RealVideo

AVI (Audio Video Interleave)

• AVI is a multimedia container format introduced by Microsoft in 1992.

• AVI files can contain both audio and video data in a file container that allows synchronous audio with video playback.

• AVI files are limited to 320 x 240 resolution, and 30 frames per second.

ASF (Advanced System Format)

• ASF is a Microsoft's proprietary digital audio/digital video container format.

• Its main purpose is to serve as an universal format for storing and streaming media.

MPEG (Moving Picture Experts Group)

• Used for coding audiovisual information in a digital compressed format.

• MPEG uses a type of lossy compression, since some data is removed. But the diminishment of data is generally imperceptible to the human eye.

• MPEG files are much smaller for the same quality.

QuickTime

• A video format developed by Apple that is used on the internet and other desktop applications.

• QuickTime movie files comes with the extension .mov or .qt

• To run QuickTime movies on windows, QuickTime player is required.

RealVideo

• RealVideo is a video compression format developed by RealNetworks.

• This format allowing streaming of video with low bandwidths and quality is often reduced.

• Have the file extensions .rm or .ram

Copyrights of Web Content

• Online respect of copyrights is basically an honor system. Everyone should ask permission before using another’s content.

• Creation of work in tangible and fixed form automatically establishes copyright.

• Whether you add the © copyright symbol to your website or not, you own the copyrights to your content.

• In addition, add a link to a copyright policy that further spells out your terms of use.

• To learn more about the copyright system in Sri Lanka visit National Intellectual Property Office website (http://www.nipo.gov.lk)

The End

http://twitter.com/rasansmn