Top Banner
Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design
63

Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Dec 25, 2015

Download

Documents

Sylvia Hoover
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Chapter 05Multimedia Element II - Images

CGMB 234Multimedia Systems Design

Page 2: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Objectives

At the end of this section, learners should be able to understand brief history of imaging understand the theory and concept of conventional camera and digital cameraidentify some of the most common graphics and image file formats. describe the variations in image compression techniques understand how to apply images in multimedia systems

Page 3: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Brief History Of Imaging

The photosensitivity of certain silver compounds (halides), particularly silver nitrate and silver chloride, was recognized by scientists during the 18th century (1700s). A photographic film coated with these compounds are put in a camera and then exposed to light. An image, or picture, of the scene before the camera, is formed on the film because the silver halides become activated (light-altered) where light falls but not where light does not fall. The image is made visible by the process of developing, made permanent by fixing, and, finally, is usually printed on paper.

Page 4: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Brief History Of Imaging

Early 19th century, English scientists Thomas Wedgewood and Sir Humphry Davy used silver nitrate to transfer a painted image onto leather They succeeded in producing a negative image but it was not permanent; the entire surface blackened after long exposure to light. For the birth of photography to happen, two key discoveries were still needed: a way to combine light-sensitive

material with the camera obscura device

a way to make an image permanent.

Sir Humphry Davy

(1778-1829)

Page 5: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Brief History Of Imaging

Joseph Nicéphore Niépce (French inventor), made the first successful photograph in 1826.

He achieved this by placing a pewter plate coated with bitumen (another light-sensitive material), in the back of a camera obscura (dark room).

Niépce later switched from pewter to copper plates and from bitumen to silver chloride.

Alhazen (Ibn al-Haytham) gave the first clear description and early analysis and invented the camera obscura and pinhole camera.

Page 6: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Joseph Nicéphore Niépce.View from the Window at Le Gras.ca1826.Heliograph, in original frame.25.8 x 29.0 cm.

Helmut Gernsheim & Kodak Research Laboratory, Harrow, England.Gelatin silver print with applied watercolor reproduction of Joseph Nicéphore Niépce's View from the Window at Le Gras.March 20-21, 1952.Gelatin silver print and watercolor.20.3 x 25.4 cm.

The First Photograph

Page 7: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Brief History Of Imaging

French painter Louis Jacques Mandé Daguerre continued Niépce's pioneering work and in 1839, after Niépce's death, announced an improved version of the process, which he called the daguerreotype.The daguerreotype process produced a detailed, positive image on a shiny copper plate small enough to be held in the hand. The process remained popular through the 1850s, but were eventually replaced by a negative/positive process.

Louis Jacques Mandé Daguerre

(1787-1851)

Page 8: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Brief History Of Imaging

English inventor William Henry Fox Talbot devised this process and perfected it in the 1840s. His process produced a paper negative, from which he could produce any number of paper positives. He exposed silver-sensitized paper briefly to light and then treated it with other chemicals to produce a visible image The process is called Calotype

William Henry Fox Talbot

(1800-1877)

Page 9: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Brief History Of Imaging

In 1851 English photographer Frederick Scott Archer invented a wet-plate process called collodion. Paper was replaced by glass as a support for the negative, and the silver salts were suspended in collodion, a thick liquid. The smooth glass negatives could produce sharper images than paper ones, because the details were no longer lost in the texture of the paper. It was easier to produce many paper prints from one glass negative. This improvement became known as the wet collodion process.

Page 10: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Brief History Of Imaging the wet collodion (or wet plate) process required photographers to coat the glass support just before taking a picture so people sought a dry version of the same process. 1878 - Dry plates, pieces of glass coated in advance with an emulsion of gelatin and silver bromide 1880 - American inventor George Eastman devised a flexible version of this system, a long paper strip that could replace the glass plate. He improved on this in 1889 by using a type of plastic called celluloid instead of paper, producing the first photographic film. Eastman's invention paved the way for all modern films, which are made of acetate or polyester, plastics less flammable than celluloid.

George Eastman

(1854-1932)

Page 11: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Brief History Of Imaging The first commercially successful material for making color photographs, called Autochrome, became available in 1907 and was based on a process devised by French inventors Auguste and Louis Lumière. But the era of color photography really began with the advent of Kodachrome color film in 1935 and Agfacolor in 1936. These films produced positive color transparencies, or slides. The Kodak company introduced Kodacolor film for color negatives in 1942, which gave amateurs the same negative/positive process they had long used in black and white.

An Autochrome picture of three French ladies. Look how the colors are very light.

Page 12: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Conventional Cameras

The basic technology that makes cameras work is fairly simple.

A still film camera is made of three basic elements:

an optical element (the lens),

a chemical element (the film)

and a mechanical element (the camera body itself).

The only trick to photography is calibrating and combining these elements in such a way that they record a crisp, recognizable image.

Page 13: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

A Bit On Cameras

• The film is only exposed to light when the shutter is opened to take a photograph and then the aperture controls the amount of light entering the camera.

• The lens position is adjustable so that objects at varying distances can be brought into focus.

• The rays of light reflected from the object are brought together by the lens and form a sharp inverted image on the film.

Page 14: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Digital Camera – A filmless Camera

Instead of film, a digital camera has a sensor that converts light into electrical charges.

The image sensor employed by most digital cameras is a charge coupled device (CCD).

Some cameras use Complementary Metal Oxide Semiconductor (CMOS) or Foveon X3 Image Sensor technology instead.

All these CCD, CMOS and Foveon X3 image sensors convert light into electrons

A CMOS image sensor

A CCD image sensor

Page 15: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

What Goes On Inside a Digital Camera

http://www.kodak.com/US/en/corp/researchDevelopment/technologyFeatures/pixPic.shtml

Page 16: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

CCD vs. CMOS sensors

Differences between the two types of sensors lead to a number of pros and cons: CCD sensors create high-quality, low-noise images. CMOS

censors are generally more susceptible to noise.

Because each pixel on a CMOS sensor has several transistors located next to it, the light sensitivity of a CMOS chip is lower. Many of the photons hit the transistors instead of the photodiode.

CMOS sensors traditionally consume little power. CCDs, on the other hand, use a process that consumes lots of power. CCDs consume as much as 100 times more power than an equivalent CMOS sensor.

CCD sensors have been mass produced for a longer period of time, so they are more mature. They tend to have higher quality pixels, and more of them.

Page 17: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Foveon X3 sensors

Capture three times the color resolution than Bayer sensors (CCD & CMOS)

Produces sharper images and more accurate color reproduction than Bayer sensors

Page 18: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

http://www.sd9.org.uk/sensors.htm

Foveon X3 sensors

Page 19: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Digital Camera Resolution

256x256 - Found on very cheap cameras, this resolution is so low that the picture quality is almost always unacceptable. This is 65,000 total pixels.

640x480 - This is the low end on most "real" cameras. This resolution is ideal for e-mailing pictures or posting pictures on a Web site.

1216x912 - This is a "megapixel" image size -- 1,109,000 total pixels -- good for printing pictures.

1600x1200 - With almost 2 million total pixels, this is "high resolution." You can print a 4x5 inch print taken at this resolution with the same quality that you would get from a photo lab.

2240x1680 - Found on 4 megapixel cameras -- the current standard -- this allows even larger printed photos, with good quality for prints up to 16x20 inches.

4064x2704 - A top-of-the-line digital camera with 11.1 megapixels takes pictures at this resolution. At this setting, you can create 13.5x9 inch prints with no loss of picture quality.

Page 20: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

The size of an image taken at different resolutions

http://electronics.howstuffworks.com/digital-camera3.htm

Page 21: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Graphic / Image Data Structures

Pixels -- picture elements in digital images Image Resolution -- number of pixels in a digital

image Higher resolution always yields better quality 1024x768 pixels on a 15” monitor is better than

800x600 pixels

Bitmap -- a representation for the graphic / image data in the same manner as they are stored in video memory.

Page 22: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Pixel

Zoom-in

Page 23: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Why is a higher resolution better ?

When a 12x8 inch picture is formed by say, 600x400 pixels, it uses pixels of a certain size.If the resolution increases, to about (for example) 1200x800, more pixels have to be squeezed in the 12x8 inch space. So the pixels used are smaller.This allows more colors to be included in the image matrix, thereby creating a more realistic look.The drawback is that this requires more memory.

Page 24: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Monochrome Image

• Each pixel is stored as a single bit (0 or 1)

• A 640 x 480 monochrome image requires approximately 38.4 KB (38400 Bytes) of storage.

• Dithering is often used for displaying monochrome images

Dithering = Using groups of pixels (patterns of dots) to approximate shades of color. Dithering is the process of placing side by side pixels of two colors to create the illusion that a third color is present

Page 25: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Grey Scale Images

Each pixel is usually stored as a byte – or 8 bits - (value between 0 to 255); usually,

A 640 x 480 gray scale image requires over 300 KB of storage.

No need for halftoning since there are 256 levels of gray.

Halftoning = Using patterns or dots (for printing and display) to create an illusion of continuous shades of gray or color. The darker the color, the more dots. It is more or less a dithering technique. Halftoning is the process of rendering an image with multiple levels of grey or colour on a device with fewer tones; such as a printer or typesetter.

Page 26: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

8-bit Colour Images

One byte for each pixel Supports 256 out of the

millions of colours possible and has acceptable colour quality

Requires Colour Look-Up Tables (CLUTs)

Page 27: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

24-bit Colour Images

Each pixel is represented by three bytes (e.g., RGB)

Supports 256 (R) x 256 (G) x 256 (B) possible combined colours (16,777,216)

A 640 x 480 24-bit colour image would require about 921.6 KB

Many 24-bit colour images are stored as 32-bit images, the extra byte of data for each pixel is used to store an alpha value representing special effects information

Page 28: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Element II – ImagesImage File Formats

Page 29: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Objectives

At the end of this section, learners should be able to :

understand the concept and theory of image file formats

Identify the differences between raster and vector file format

identify the standard system dependent and independent file formats

Page 30: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Image Formats

Digital still images fall into two main categories:

Raster (or 'bit-mapped') images and Vector ('object-oriented') images.

Raster images take the form of a grid or matrix, with each picture element (pixel) having a unique location and independent colour value.

Vector images files are really just a set of mathematical instructions that are used by a drawing program to construct an image.

There is a third category of formats known as metafiles, which are able to contain both raster and vector images.

Page 31: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

i). Raster Images

the most common category of image created and used within digitization projects.

All scanners and digital cameras produce raster images and most output devices (print and screen) also use them. common examples of raster file formats TIFFs, JPEG/JFIFs,

and GIFs

Raster images take the form of a grid or matrix.

This pattern becomes easily visible as the image is magnified (i.e. viewed at more than 100%.

Each square (pixel) within the matrix occupies a unique position and can be edited separately.

Page 32: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

• The raster image has been magnified by 800% and 1600% to reveal its grid structure.

• Each square of colour is a pixel.

The Raster Grid

Orchid.jpg - 800% Zoom Orchid.jpg - 1600% Zoom

Orchid.jpg - 100% Zoom

Page 33: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

i). Raster Images

internally very simple. If you examine their coding, you will typically find

some brief header information describing the structure of the file followed by a series of values, each describing the colour of the individual pixels.

Since a raster image records information for each pixel, its file size can be quite large.

For an uncompressed raster image, the file size will be directly related to its pixel dimensions (spatial resolution) and the extent of the colour information recorded for each pixel (its colour resolution or 'bit-depth')

Page 34: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

ii). Vector Images

While most raster images result from a digital capture process, vector images are typically created and displayed within drawing programs.

Common vector images include 2- and 3-D architectural drawings, flow charts, logos and fonts.

They consist of lines, curves and shapes with editable attributes such as colour or fill.

Because they are defined by mathematical equations, they are more easily transformed than raster images.

Unlike raster images, vectors are 'resolution independent': they can be reshaped or rescaled without losing quality.

Page 35: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Common uses for vector images Vector images are commonplace.

cutting-edge magazine covers, interactive Web graphics they are very much the format of choice in contemporary design.

In certain specialist areas, computer-aided design for example, the vector format is the only choice.

There are many less specialized everyday uses of the vector format, where users may not even be aware they are creating vector images: Drawing tools in Word, Excel, PowerPoint, etc (e.g. lines,

arrows, shapes)

Fonts - most fonts are vector fonts, where each character is scalable

Charts and graphs created in Excel, PowerPoint, etc

Page 36: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Example of Vector Image

<rect width="120" height="80" fill="rgb(255,51,0)" stroke="rgb(0,0,204)" stroke-width="4" />

Using fairly straightforward 'human readable' terms, this instructs the program displaying the image to draw a rectangle with a width of 120 pixels and a height of 80 pixels. It is filled with a shade of orange (as defined by the RGB colour value of Red 255, Green 51, Blue 0), and is outlined with a blue stroke (R 0, G 0, B 204) that is 4 pixels wide

Page 37: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Example of Vector Image

If a vector image is resized, there will be no loss of quality.

This is because when resizing a vector what happens behind the scenes is a change to the mathematical instructions.

So if we resize our 120 by 80 pixel original by ten times to 1200 by 800, the sharpness of the original is retained because it is the maths in the code that has been adjusted rather than the physical image itself.

1x = 120 x 80

10x = 1200 x 800

Page 38: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Raster formats (bitmaps) Vector formats (object-oriented)

Used for representation of continuous tones - suited to 'natural' photo-realistic imagery

Used for drawings and diagrams that can be described by mathematically defined shapes and attributes

Grid/matrix structure Mathematical or textual description

Resolution dependant: scaling-up will diminish quality

Resolution independent: scaling-up is easy with no loss in quality

Most common capture type Not normally used for capture, apart from some specialised mapping applications

Most common Web type Less common Web type

Layering of images less common Layering of images easy and common

Usually larger in file size Usually smaller in file size

Usually quicker to display Usually slower to display

Difficult to convert to a vector format Easily and often converted to a raster format

Raster and vector images compared

Page 39: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

iii). Encapsulating Formats(Metafiles and PDLs)

The third category of file formats that can contain or encapsulate raster and vector images.

includes metafiles and Page Description Languages (PDLs).

In addition to holding different types of images and text within the same file, these formats enable, to varying degrees, their contents to be consistently displayed and used across different computer programs and operating systems.

Metafiles contain lists of commands that will draw or display an image when they are run.

Page 40: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

iii). Encapsulating Formats(Metafiles and PDLs)

Vector drawing commands are most common, but metafiles can also include raster information or text.

Sometimes they are little more than a kind of envelope, containing an instruction to open up another image file.

Common metafile formats include the Computer Graphics Metafile (CGM), Windows Metafile (WMF), and Enhanced Metafile (EMF).

Page 41: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Advantages of encapsulating formats These formats do some or all of the following:

Enable the exchange of files across different platforms and applications

Include raster, vector, text and layout information on different layers within the same file

provide added functionality, including hotspots and linking

Allow easier resource discovery by using internal metadata and unique digital object identifiers

Support multi-page images

Enable 'locking' to provide security and assist in rights management

Page 42: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Element II – ImagesStandard System Independent Formats

Page 43: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Standard System Independent Formats

The following brief format descriptions are the most commonly used formats.

GIF (gif87a, gif89a) JPEG TIFF PNG

Page 44: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

GIF

Graphics Interchange Format (GIF) devised by the UNISYS Corp. and Compuserve, initially for transmitting graphical images over phone lines via modems

Uses the Lempel-Ziv Welch algorithm (a form of Huffman Coding), modified slightly for image scan line packets (line grouping of pixels)

Limited to only 8-bit (256) color images, suitable for images with few distinctive colors (e.g., charts)

Supports interlacing mode (appears to load quickly but pixellates itself over time until it finally becomes clear) e.g. http://www.davent.demon.co.uk/iterlace.html

Page 45: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Non-Interlaced (smooth from top to bottom)

Interlaced (loads quicker, but fades in) aka The Venetian

Blind effect

Page 46: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

GIF 89a

GIF89a supports simple animation (Graphics Control Extension has control over delay time, transparent index, etc.

Software such as Coral Draw and Photoshop will allow access and editing of GIF images.

Page 47: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Original Image – Jetty.jpg300 x 225 pixels, 60.3 KB24-bit color

Jetty1.gif 35KB, 100% Dither216 Web-palette, 7 second @ 56.6kbps

Jetty2.gif 19KB, 0% Dither216 Web-palette, 4 second @ 56.6kbps

• The 2 images (Jetty1.gif and Jetty2. gif) show the 256 color limitation of GIF.

• Only the use of flat colors, like in a cartoon or in charts/diagrams, can benefit from GIF.

Page 48: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

JPEG

A standard for photographic image compression created by the Joint Photographic Experts Group (JPEG)

Takes advantage of limitations in the human vision system to achieve high rates of compression

Use Lossy compression that allows user to set the desired level of quality/compression

Page 49: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

JPEG 2000

• A new image coding system that uses state of the art compression techniques based on wavelet technology.

• Its architecture allows a wide range of uses from portable digital cameras to advanced pre-press, medical imaging and other applications which require high quality images

• It has the file extension *.jp2, *.j2k

• JPEG2000 compression technology retains image quality better than the old JPEG. It is also faster and uses small amounts of data.

Page 50: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Compression Ratio 116:1

JPEG 2000

JPEG Compressed6KB

JPEG 2000 Compressed6KB

Original Image700KB

Page 51: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Common JPEG’s Compression

Common JPEG's compression (known as DCT - Discrete Cosine Transform) cuts the pixels into blocks of 64 (8x8) and processes each block independently, shifting and simplifying the colors so there is less information to encode.

Pixels are changed only in relation to the other pixels within their block, so two identical pixels that are next to each other, but in different blocks, could be transformed in different ways.

Consequently, when high compression (maximum simplification) is used, the block boundaries become obvious, causing the 'blockiness' or 'blocking artefact' frequently observed in the common JPEG.

Page 52: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

JPEG 2000 Compression

the JPEG 2000's wavelet compression processes much larger areas of the image at once - sometimes the whole image.

This avoids any blocking. The wavelet compression is also able to make a distinction

between significant detail in the image, like edges, and less significant areas, for example, where there are slight variations in the colour.

At very high compression JPEG 2000 will still introduce artefacts (visible distortion in the image), but by concentrating its compression on the less significant parts it gives much better overall quality than a JPEG of the same file size.

Page 53: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

A Bit On Wavelet Compression• The advantage of wavelet compression is that, unlike the (old) JPEG, the

wavelet algorithm does not divide image into blocks, but analyzes the whole image. It allows us to get best compression ratio, while maintaining the quality.

Wavelet (left) compression provides

higher quality at a ratio of 105.6:1 while JPEG

(right) delivers a ratio of about 103.8 with visible blockiness in the image.

http://www.cs.sfu.ca/CourseCentral/365/li/material/cgi-bin/wavelet.cgihttp://www.owlnet.rice.edu/~elec301/Projects00/wavelet_image_comp/img-compression-theory.html

JPEG compression file size: 1895 bytes

compression ratio - 103.8

Wavelet compressionfile size: 1861 bytes

compression ratio - 105.6

Page 54: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Tagged Image File Format (TIFF)

Tagged Image File Format (TIFF), stores many different types of images (e.g., monochrome, greyscale, 8-bit & 24-bit RGB, etc.) -> tagged

Developed by the Aldus Corp. in the 1980's and later supported by Microsoft.

TIFF is a lossless format (when not utilizing the new JPEG tag which allows for compression).

Leaves room for implementors to pick and choose what features they'll support.

It does not provide any major advantages over JPEG and is not as user-controllable. It appears to be declining in popularity.

Page 55: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

PNG (Portable Network Graphics)

Designed to replace the older and simpler GIF format and, to some extent, the much more complex TIFF format

For image editing, it provides a useful format for the storage of intermediate stages of editing.

Since it is lossless and supports up to 48-bit true color or 16-bit grayscale; saving, restoring and re-saving an image will not degrade its quality, unlike JPEG

PNG's compression (approximately 50% in general) is among the best that can be had without losing image information and without paying patent fees

Page 56: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

• The bitmap on the left (200 KB) and the PNG on the right (120 KB) are, in theory, identical.

• As long as the image editor supports PNG, you can use it like a BMP.

• PNG is also an alternative when the image has to be left uncompressed.

• At least, it will be only about 50-70% the size of the bitmap.

PNG (Portable Network Graphics)

Dancer.bmp Dancer.png

Page 57: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Element II – ImagesSystem Dependent Formats

Page 58: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

System Dependent Formats

Many graphical / imaging applications create their own file format particular to the systems they are executed upon.

Disadvantage: Very proprietary and not compatible with others.

Example : MacDraw (PICT) , Windows Bitmap (BMP)

Page 59: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Macintosh: PAINT and PICT

PAINT was originally used in the MacPaint program, initially only for 1-bit monochrome images.

The PICT format is used in MacDraw (a vector based drawing program) for storing structured graphics

PICT format is widely used among Mac OS graphics and page-layout applications as an intermediary file format for transferring images between applications.

Page 60: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Microsoft Windows Bitmap- BMP Format

Windows bitmap standard graphics file format for Microsoft Windows stored in a device-independent bitmap (DIB) format allows Windows to display the bitmap on any type of

display device. Used in PC Paintbrush and other programs It is capable of storing 24-bit bitmap images

The term "device independent" means that the bitmap specifies pixel colour in a form independent of the method used by a display to represent colour.

Page 61: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Microsoft Windows Bitmap- BMP Format

The default filename extension *.bmp Each bitmap file contains a bitmap-file header, a

bitmap-information header, a colour table (used to select colours when the image is displayed), and an array of bytes that defines the bitmap bits.

Bitmap supports compression using RLE (Run-Length Encoding) method

Page 62: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

Application Dependent Formats

• We also have image formats which are dependent upon the specific programs used.

• For example, Adobe Photoshop has its own *.psd format, while Paint Shop Pro has its *.psp format.

• It is often better to save in a program’s native format if you use it frequently.

• This is because the native format is likely to retain all the special effects you use and remain as an uncompressed image, thereby retaining full quality.

• However, if the images need to be transferred amongst various users and previewed, it is better to save it as a (Windows) bitmap.

Page 63: Chapter 05 Multimedia Element II - Images CGMB 234 Multimedia Systems Design.

References

http://www.fontmenu.com/site/decorative.html http://www.tasi.ac.uk/advice/creating/fformat.html