Download as PPSX, PPTX
Uploaded byRasan Samarasinghe
DIWE - Multimedia Technologies
The document provides a comprehensive overview of multimedia technologies, including graphics, audio, and video formats. It explains key concepts like pixel, color depth, and file formats such as BMP, JPEG, and MP3. The document also discusses how multimedia is integrated on the web and highlights copyright considerations related to online content.
More Related Content
Similar to DIWE - Multimedia Technologies
More from Rasan Samarasinghe
![ANPARA THERMAL POWER STATION[1] sangam.pdf](https://cdn.slidesharecdn.com/ss_thumbnails/anparathermalpowerstation1sangam-251121115219-9261cde4-thumbnail.jpg?width=640&height=640&fit=bounds)
DIWE - Multimedia Technologies
- 1. Diploma in WebEngineering Module II: Multimedia Technologies Rasan Samarasinghe ESOFT Computer Studies (pvt) Ltd. No 68/1, Main Street, Pallegama, Embilipitiya.
- 2. Contents 1. What areGraphics ? 2. Digital Image Concepts 3. Pixel 4. Resolution of Images 5. Resolution of Devices 6. Color Depth 7. Color Palette 8. Dithering 9. Bitmap and Vector Graphics 10. Bitmap Graphics 11. Vector Graphics 12. Comparison 13. Graphics File Formats 14. 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. Animations 22. Rollovers 23. Animated GIF 24. Flash Files 25. Audio 26. Audio on Web Sites 27. Audio File Formats 28. MIDI 29. WAVE 30. MP3 31. AU 32. AIFF 33. Video 34. Video File Formats 35. AVI 36. ASF 37. MPEG 38. QuickTime 39. RealVideo 40. Copyrights of Web Content
- 3. What are Graphics? Graphics are basically pictures and drawings either created by computer or entered into computers by scanning or photographing.
- 4. Digital Image Concepts •Pixel • Resolution • Color Depth • Color Palette • Dithering
- 5. Pixel In digital imaginga pixel is a single point in a raster image or the smallest addressable element in a display device.
- 6. Resolution of Images Resolutionis 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.
- 7. Resolution of Devices TheResolution 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.
- 8. Color Depth Color depthalso 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.
- 9. Color Depth 1 bit(2 colors) 2 bits (4 colors) 4 bits (16 colors) 8 bits (256 colors)
- 10. Color Palette In computergraphics, a palette is the finite set of available colors.
- 11. Color Palette Web SafeColors Palette
- 12. Dithering Dithering is creatingthe 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.
- 13. 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.
- 14. Bitmap and VectorGraphics
- 15. 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.
- 16. Vector Graphics Vector graphicsare 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.
- 17. Comparison Between Bitmapand Vector Bitmap Graphics Vector Graphics Become 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 Programs Take up more memory than vectors Take up less memory than bitmaps
- 18. 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)
- 19. 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.
- 20. Tagged Image FileFormat (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.
- 21. 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.
- 22. Join Picture ExpertGroup (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.
- 23. 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.
- 24. 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.
- 25. Multimedia on Web Multimediais the integration of multiple form of media such as text, graphics, audio, video, etc.
- 26. Animations An animation isa simulation of movement created by displaying a series of static images. • Rollovers • Animated GIF • Flash Files
- 27. Rollovers A Rollover isa section of a web page that is raised when the user moves the pointer over a particular area.
- 28. Animated GIF (GIF89a) Atype of GIF image that can be animated by combining several images into a single GIF file that are displayed in succession.
- 29. Flash Files Flash isa vector based animation technology created by software Adobe Flash. Flash animations are browser independent and often distributed in .swf file format.
- 30. Audio • A termused 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.
- 31. Audio on WebSites Audio on web pages can be delivered in two distinct ways. 1. Downloadable Audio An audio file embedded in the webpage. Once the audio file was downloaded by user it can be played. 2. Streaming Audio The 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.
- 32. Audio File Formats •MIDI • WAVE • MP3 • AU • AIFF
- 33. MIDI (Musical InstrumentDigital 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.
- 34. WAVE (Waveform AudioFormat) • 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.
- 35. MP3 (MPEG audiolayer 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.
- 36. Au • The Aufile 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.
- 37. AIFF (Audio InterchangeFile 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.
- 38. Video Video is anelectronic 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.
- 39. Video File Formats •AVI • ASF • MPEG • QuickTime • RealVideo
- 40. AVI (Audio VideoInterleave) • 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.
- 41. ASF (Advanced SystemFormat) • 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.
- 42. MPEG (Moving PictureExperts 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.
- 43. QuickTime • A videoformat 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.
- 44. RealVideo • RealVideo isa 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
- 45. Copyrights of WebContent • 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)
- 46.
Editor's Notes
- #6 In digital imaging, a pixel, pel,[1] or picture element[2] is a physical point in a raster image, or the smallest addressable element in an all points addressable display device; so it is the smallest controllable element of a picture represented on the screen. Short for Picture Element, a pixel is a single point in a graphic image. Graphics monitors display pictures by dividing the display screen into thousands (or millions) of pixels, arranged in rows and columns. The pixels are so close together that they appear connected. The number of bits used to represent each pixel determines how many colors or shades of gray can be displayed. For example, in 8-bit color mode, the color monitor uses 8 bits for each pixel, making it possible to display 2 to the 8th power (256) different colors or shades of gray.
- #7 Refers to the sharpness and clarity of an image. The term is most often used to describe monitors, printers, and bit-mapped graphic images. Image resolution can be measured in various ways. Basically, resolution quantifies how close lines can be to each other and still be visibly resolved. Resolution units can be tied to physical sizes (e.g. lines per mm, lines per inch), to the overall size of a picture (lines per picture height, also known simply as lines, TV lines, or TVL), or to angular subtenant. For graphics monitors, the screen resolution signifies the number of dots (pixels) on the entire screen. For example, a 640-by-480 pixel screen is capable of displaying 640 distinct dots on each of 480 lines, or about 300,000 pixels. This translates into different dpi measurements depending on the size of the screen. For example, a 15-inch VGA monitor (640x480) displays about 50 dots per inch. Resolution is the term used to describe the number of dots, or pixels, used to display an image. Higher resolutions mean that more pixels are used to create the image, resulting in a crisper, cleaner image. The display, or resolution on a monitor, is composed of thousands of pixels or dots. This display is indicated by a number combination, such as 800 x 600. This indicates that there are 800 dots horizontally across the monitor, by 600 lines of dots vertically, equaling 480,000 dots that make up the image you see on the screen.
- #8 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. For example, a 640 x 480 pixel screen is capable of displaying 640 distinct dots on each of 480 lines, or about 300,000 pixels
- #9 The number of distinct colors that can be represented by a piece of hardware or software. Color depth is sometimes referred to as bit depth because it is directly related to the number of bits used for each pixel. Color depth or colour depth (see spelling differences), also known as bit depth, is either the number of bits used to indicate the color of a single pixel, in a bitmapped image or video frame buffer, or the number of bits used for each color component of a single pixel.
- #11 In computer graphics, a palette is either a given, finite set of colors for the management of digital images (that is, a color palette), or a small on-screen graphical element for choosing from a limited set of choices, not necessarily colors (such as a tools palette). In computer graphics, a palette is the set of available colors. For a given application, the palette may be only a subset of all the colors that can be physically displayed. For example, a SVGA system can display 16 million unique colors, but a given program would use only 256 of them at a time if the display is in 256-color mode.
- #13 If you look closely, you can see that different shades of gray are produced by varying the patterns of black and white dots. There are no gray dots at all.
- #16 In computing, a bitmap is a mapping from some domain (for example, a range of integers) to bits, that is, values which are zero or one. It is also called a bit array or bitmap index. Bitmap image downsampled from an Inkscape vectorial image In computer graphics, when the domain is a rectangle (indexed by two coordinates), a bitmap gives a way to store a binary image, that is, an image in which each pixel is either black or white (or any two colors). The more general term pixmap refers to a map of pixels, where each one may store more than two colors, thus using more than one bit per pixel. Often bitmap is used for this as well. In some contexts, the term bitmap implies one bit per pixel, while pixmap is used for images with multiple bits per pixel.[1][2] A bitmap is a type of memory organization or image file format used to store digital images. The term bitmap comes from the computer programming terminology, meaning just a map of bits, a spatially mapped array of bits. Now, along with pixmap, it commonly refers to the similar concept of a spatially mapped array of pixels. Raster images in general may be referred to as bitmaps or pixmaps, whether synthetic or photographic, in files or memory.
- #17 Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygon(s), which are all based on mathematical expressions, to represent images in computer graphics. Vector graphics are based on vectors (also called paths, or strokes) which lead through locations called control points. Each of these points has a definite position on the x and y axes of the work plan. Each point, as well, is a variety of database, including the location of the point in the work space and the direction of the vector (which is what defines the direction of the track). Each track can be assigned a color, a shape, a thickness and also a fill.
- #20 The BMP file format (Windows bitmap) handles graphics files within the Microsoft Windows OS. Typically, BMP files are uncompressed, hence they are large; the advantage is their simplicity and wide acceptance in Windows programs. The BMP file format, also known as bitmap image file or device independent bitmap (DIB) file format or simply a bitmap, is a faster graphics image file format used to store bitmap digital images, independently of the display device (such as a graphics adapter), especially on Microsoft Windows and OS/2 operating systems. The BMP file format is capable of storing 2D digital images of arbitrary width, height, and resolution, both monochrome and color, in various color depths, and optionally with data compression, alpha channels, and color profiles.
- #21 The TIFF (Tagged Image File Format) format is a flexible format that normally saves 8 bits or 16 bits per color (red, green, blue) for 24-bit and 48-bit totals, respectively, usually using either the TIFF or TIF filename extension. TIFF's flexibility can be both an advantage and disadvantage, since a reader that reads every type of TIFF file does not exist[citation needed]. TIFFs can be lossy and lossless; some offer relatively good lossless compression for bi-level (black&white) images. Some digital cameras can save in TIFF format, using the LZW compression algorithm for lossless storage. TIFF image format is not widely supported by web browsers. TIFF remains widely accepted as a photograph file standard in the printing business. TIFF can handle device-specific color spaces, such as the CMYK defined by a particular set of printing press inks. OCR (Optical Character Recognition) software packages commonly generate some (often monochromatic) form of TIFF image for scanned text pages.
- #22 GIF (Graphics Interchange Format) is limited to an 8-bit palette, or 256 colors. This makes the GIF format suitable for storing graphics with relatively few colors such as simple diagrams, shapes, logos and cartoon style images. The GIF format supports animation and is still widely used to provide image animation effects. It also uses a lossless compression that is more effective when large areas have a single color, and ineffective for detailed images or dithered images. Short for Graphics Interchange Format, another of the graphics formats supported by the Web. Unlike JPG, the GIF format is a lossless compression technique and it supports only 256 colors. GIF is better than JPG for images with only a few distinct colors, such as line drawings, black and white images and small text that is only a few pixels high. With an animation editor, GIF images can be put together for animated images. GIF also supports transparency, where the background color can be set to transparent in order to let the color on the underlying Web page to show through. The compression algorithm used in the GIF format is owned by Unisys, and companies that use the algorithm are supposed to license the use from Unisys.*
- #23 JPEG (Joint Photographic Experts Group) is a lossy compression method; JPEG-compressed images are usually stored in the JFIF (JPEG File Interchange Format) file format. The JPEG/JFIF filename extension is JPG or JPEG. Nearly every digital camera can save images in the JPEG/JFIF format, which supports 8-bit grayscale images and 24-bit color images (8 bits each for red, green, and blue). JPEG applies lossy compression to images, which can result in a significant reduction of the file size. The amount of compression can be specified, and the amount of compression affects the visual quality of the result. When not too great, the compression does not noticeably or detract from the image's quality, but JPEG files suffer generational degradation when repeatedly edited and saved. (JPEG also provides lossless image storage, but the lossless version is not widely supported.) Short for Joint Photographic Experts Group, the original name of the committee that wrote the standard. JPG is one of the image file formats supported on the Web. JPG is a lossy compression technique that is designed to compress color and grayscale continuous-tone images. The information that is discarded in the compression is information that the human eye cannot detect. JPG images support 16 million colors and are best suited for photographs and complex graphics. The user typically has to compromise on either the quality of the image or the size of the file. JPG does not work well on line drawings, lettering or simple graphics because there is not a lot of the image that can be thrown out in the lossy process, so the image loses clarity and sharpness.
- #24 The PNG (Portable Network Graphics) file format was created as the free, open-source successor to GIF. The PNG file format supports 8 bit paletted images (with optional transparency for all palette colors) and 24 bit truecolor (16 million colors) or 48 bit truecolor with and without alpha channel - while GIF supports only 256 colors and a single transparent color. Compared to JPEG, PNG excels when the image has large, uniformly colored areas. Thus lossless PNG format is best suited for pictures still under edition - and the lossy formats, like JPEG, are best for the final distribution of photographic images, because in this case JPG files are usually smaller than PNG files. The Adam7-interlacing allows an early preview, even when only a small percentage of the image data has been transmitted. designed as a replacement for the GIF format in order to avoid infringement of Unisys' patent on the LZW compression technique. Short for Portable Network Graphics, the third graphics standard supported by the Web (though not supported by all browsers). PNG was developed as a patent-free answer to the GIF format but is also an improvement on the GIF technique. An image in a lossless PNG file can be 5%-25% more compressed than a GIF file of the same image. PNG builds on the idea of transparency in GIF images and allows the control of the degree of transparency, known as opacity. Saving, restoring and re-saving a PNG image will not degrade its quality. PNG does not support animation like GIF does. *Unisys announced in 1995 that it would require people to pay licensing fees in order to use GIF. This does not mean that anyone who creates or uses a GIF image has to pay for it. Authors writing programs that output GIF images are subject to licensing fees.
- #25 http://libmng.com Multiple-image Network Graphics is a graphics file format, published in 2001, for animated images. Its specification is publicly documented and there are free software reference implementations available.
- #27 A simulation of movement created by displaying a series of pictures, or frames. Cartoons on television is one example of animation. Animation on computers is one of the chief ingredients of multimedia presentations. There are many software applications that enable you to create animations that you can display on a computer monitor. Note the difference between animation and video. Whereas video takes continuous motion and breaks it up into discrete frames, animation starts with independent pictures and puts them together to form the illusion of continuous motion.
- #29 A type of GIF image that can be animated by combining several images into a single GIF file. Applications that support the animated GIF standard, GIF89A, cycle through each image. GIF animation doesn't give the same level of control and flexibility as other animation formats but it has become extremely popular because it is supported by nearly all Web browsers. In addition, animated GIF files tend to be quite a bit smaller that other animation files, such as Java applets.
- #34 Musical Instrument Digital Interface Imagine a guy playing your favorite song on a keyboard. By pressing the keys, he's "telling" the keyboard what notes to play and how long to play them. Now imagine the guy being replaced by a computer. The computer sends signals to the keyboard that tell it what notes to play and how long to play them. These are MIDI signals. Now imagine the keyboard being replaced by your computer's sound card. When playing MIDI, a sound card is acting like a little keyboard in your computer. The MIDI file is "telling" it what to play. Now imagine someone taking the guy's keyboard away and replacing it with a different model. This new one might have a better or worse sound than the first one. Likewise, a MIDI file will sound a little bit different when played on another person's sound card. It just depends on what kind of card he or she has. MIDI isn't music MIDI doesn't contain any actual sounds MIDI isn't a digital music file format like MP3 or WAV that provides details about the electrical signals that control which musical note is to be played, when, what instrument and all the details so a music synthesizer or software instrument can decode the messages and make the right sounds. MIDI files are tiny, often 10K or less. They download from a web page in no time A MIDI file is a representation of a sound includes values for the note's pitch, length, and volume. Because they sound a little different when played on different sound cards, there is no guarantee that those lush horns won't sound like blaring trumpets o
- #35 Waveform Audio File Format
- #38 Short for Audio Interchange File Format, a common format for storing and transmitting sampled sound. The format was developed by Apple Computer and is the standard audio format for Macintosh computers. It is also used by Silicon Graphics Incorporated (SGI). AIFF files generally end with a .AIF or .IEF extension. The AIFF format does not support data compression so AIFF files tend to be large. However, there is another format called AIFF-Compressed (AIFF-C or AIFC) that supports compression ratios as high as 6:1.
- #41 A format developed by Microsoft Corporation for storing video and audio information. AVI files are limited to 320 x 240 resolution, and 30 frames per second, neither of which is adequate for full-screen, full-motion video. However, Video for Windows does not require any special hardware,
- #43 MPEG algorithms compress data to form small bits that can be easily transmitted and then decompressed. MPEG-1: The most common implementations of the MPEG-1 standard provide a video resolution of 352-by-240 at 30 frames per second (fps). This produces video quality slightly below the quality of conventional VCR videos. MPEG-2: Offers resolutions of 720x480 and 1280x720 at 60 fps, with full CD-quality audio. This is sufficient for all the major TV standards, including NTSC, and even HDTV. MPEG-2 is used by DVD-ROMs. MPEG-2 can compress a 2 hour video into a few gigabytes. While decompressing an MPEG-2 data stream requires only modest computing power, encoding video in MPEG-2 format requires significantly more processing power. MPEG-3: Was designed for HDTV but was abandoned in place of using MPEG-2 for HDTV. MPEG-4: A graphics and video compression algorithm standard that is based on MPEG-1 and MPEG-2 and Apple QuickTime technology. Wavelet-based MPEG-4 files are smaller than JPEG or QuickTime files, so they are designed to transmit video and images over a narrower bandwidth and can mix video with text, graphics and 2-D and 3-D animation layers. MPEG-4 was standardized in October 1998 in the ISO/IEC document 14496