Esoft Metro Campus - Diploma in Web Engineering - (Module II) Multimedia Technologies
(Template - Virtusa Corporate)
Contents:
What are Graphics ?
Digital Image Concepts
Pixel
Resolution of Images
Resolution of Devices
Color Depth
Color Palette
Dithering
Bitmap and Vector Graphics
Bitmap Graphics
Vector Graphics
Comparison
Graphics File Formats
Bit Map
Tagged Image File Format
Graphical Interchange Format
Join Picture Expert Group
Portable Network Graphics
Multi-image Network Graphics
Multimedia on Web
Animations
Rollovers
Animated GIF
Flash Files
Audio
Audio on Web Sites
Audio File Formats
MIDI
WAVE
MP3
AU
AIFF
Video
Video File Formats
AVI
ASF
MPEG
QuickTime
RealVideo
Copyrights of Web Content
5. Pixel
In digital imaging a pixel is a single point in a
raster image or the smallest addressable
element in a display device.
6. 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.
7. 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.
8. 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.
9. Color Depth
1 bit (2 colors) 2 bits (4 colors)
4 bits (16 colors) 8 bits (256 colors)
12. 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.
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.
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 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.
17. Comparison Between Bitmap and 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 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.
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 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.
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
Multimedia is the integration of multiple form of
media such as text, graphics, audio, video, etc.
26. Animations
An animation is a simulation of movement
created by displaying a series of static images.
• Rollovers
• Animated GIF
• Flash Files
27. Rollovers
A Rollover is a section of a web page that is
raised when the user moves the pointer over a
particular area.
28. 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.
29. 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.
30. 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.
31. Audio on Web Sites
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.
33. 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.
34. 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.
35. 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.
36. 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.
37. 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.
38. 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.
40. 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.
41. 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.
42. 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.
43. 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.
44. 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
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.*
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.
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.
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.
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.
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.
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
Waveform Audio File Format
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.
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,
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