Post on 19-Feb-2017
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