ICT 514 Multimedia Systems - Murdoch Universityftp.it.murdoch.edu.au/units/ICT514/Lectures/ICT514_06_02_Images.… · 2 ICT 514_Lect 1_06 5 school of information technology Objectives

1

school of information technologymaster of science in information technology

ICT 514Multimedia SystemsTopic 2: Visuals: Static

Lance Fung

(Ref: Li & Drew, “Fundamentals of Multimedia”, Chapter 3)

ICT 514_Lect 1_06 2 school of information technology

Consider the following file formats. What do they mean?


What is the difference and why?


Outline• Objectives of this lecture• Digital images• Colour• Taxonomy of computer graphics• Bits - bytes and hex• Monitors - pixels, colours and resolution• Colour - depth and schemes• Graphics formats - bitmap and vector• Compression• Graphics file formats - bitmap and vector• References

2


Objectives• At the end of this lecture, you

will be able to:– understand binary and hexadecimal

number systems– describe how computer monitors

display graphics in monochrome, greyscale and colour

– describe the value of compression and different types of compression

– understand different graphic types and different graphics file formats


Digital images• Images convey information or

communicate ideas.– For example:

• Each of these means of communication has a different level of “information richness”.

• We are interested in images that can be stored in digital form on a computer.

dog


Digital images• Two classes of digital images: natural and artificial

– Natural• Captured scenes, e.g. photographs.• Computers are used to capture, store or process these images.

– Artificial• Created solely by computer processes and called “graphics”.• A paint program, e.g. Paint Shop Pro, is used to create these

images.

• Images are a function of the visible light reflecting from objects in a scene.

• Visible light is only a small fraction of the electromagnetic spectrum.


Light and colour• White light is made up of a number of different coloured

lights.• White, in scientific terms, means the combination of all the

light in the visible electromagnetic spectrum. When we see "white" we are actually seeing every colour combined, e.g. when you shine white light through a prism, everything looks like a rainbow. The prism bends the light so you can see all the colours that it's made of.

3


Light and colour

• Experiment:– Get a round piece of cardboard and make wedges

of colour on it. – Stick a pin through the centre of it and spin the

“wheel”. – When you spin it, you won’t see the individual

colours, but the combination of all those colours, i.e. "white."


• Visible region of the electromagnetic spectrum is 400-700 nanometers. Colour is the frequency of a light wave within that narrow band.

Light and colour

ROY G. BIVred, orange, yellow, green, blue, indigo, violet (in ascending frequencies)


• Images can be created using other bands of the electromagnetic spectrum, e.g. X-rays, radar and infrared.– Infrared is below the frequency of red light and not

perceived by the human eye.• Used for TV and VCR remote controls, night

goggles, etc.– Ultraviolet light is beyond the higher end of the

visible spectrum.• Damaging to humans.

Light and colour


Light and colour

• The cornea of the eye acts as a lens to focus light rays onto the retina.– Light rays stimulate thousands of nerves on the

retina surface called rods and cones.

4


Colour• Wavelengths of mixed lights do not physically

combine or change, the combination takes place in the eyes and brain. The cornea of the eye acts as a lens to focus light rays onto the retina.


Colour• The light rays stimulate many thousands

of specialised light-sensitive receptor nerves that cover the surface of the retina.


Colour• There are rods and 3

kinds of cones, each “tuned” to absorb light from a different portion of the visible light spectrum:– cones that absorb long-

wavelength light (red) – cones that absorb middle-

wavelength light (green) – cones that absorb short-

wavelength light (blue)ICT 514_Lect 1_06 16 school of information technology

ColourWhen you look at this, how many colors do you see?

http://members.aol.com/Ryanbut/illusion4.html

5


Colour

• There are not 3 or even 4 colours, but there are 2 - red and green!

• People usually think they see 2 shades of red, but there is only 1.

• Look closely and you will notice on one side that white boxes surround the red boxes, and on the other side, green boxes do!

• Due to the placement of these boxes you get the "illusion" of different colors.


• What about white? – Since white is not considered to be a colour (it is

the presence of all colours in scientific terms) we can safely say that there are 2 colours present here!


Colour

• Not everyone perceives all colours.• What number do you see this circle?

Normal colourvision = 5 Deuteranopia

vision (red/green colour deficit) = 2

http://www.toledo-bend.com/colorblind/Ishihara.html

6


Colour• Consider the 12-20% of men and 0.4% of

women with some form of colour blindness when choosing colours.

216 web-safe colours

Colour• Also consider the world’s favourite colour –

• blue• Survey of 14 countries + 3001 people on

the web.

http://www.diacenter.org/km/

Survey results of web users


Colour

44United States18Ukraine22Turkey24Russia48Portugal29Kenya27Italy31Iceland31Holland29Germany39France25Finland37Denmark19China

Preference (%) for blue by country


Colour

Most wanted painting - France

Most wanted painting - USA

Least wanted painting - France

Least wanted painting - USA

7


Taxonomy of computer graphics

• Computer graphics are any non-text pictorial information.

• Drawings– Draw software stores graphic files as vector

graphics• Example software: MacDraw, Corel Draw,

Word


• Pictures and photographs– Paint packages store graphic files as bitmap

graphics• Example software: PaintShop Pro, PhotoShop,

Corel Paint• Charts and graphs

– Chart packages translate numeric data intocharts or graphs, e.g. pie charts, bar charts, line graphs, scattergrams

• Example software:Microsoft Excel, Microsoft Graph


Taxonomy of computer graphics• Clip art

– “Ready made” pictures• Available with your Windows software• On the Internet, e.g. http://www.clipart.co.uk

• Icons– Small graphics designed to have commands

attached to them so that when clicked the command is carried out.

• Icon libraries can also be downloaded or bought from the Internet


Taxonomy of computer graphics• Maps

– Maps can be produced by the computer or be digitised from analogue format.

– Maps are particularly popular in multimedia presentations and on the web, e.g. www.mapquest.com for driving directions from one point to another.

8


Taxonomy of computer graphics• Screen prints

– You can take a “snapshot” of your computer screen as a graphic.

– Use the “PrtScrn” key (Alt+PrtScrn takes just the active window)

– The screen print is copied into the clipboard and then it can be pasted into Paint Shop Pro, PhotoShop or Photo Editor and saved as a compressed format.

– The screen print can also be pasted directly into PowerPoint but it will be a bitmapped format and a large file.



• Digital photographs– Graphics created

solely by computer processes, e.g. with webcam or digital camera.

– Format that can be stored immediately in a computer. Archive shot from Murdoch’s

webcam webcam.murdoch.edu.au



• Digitalised pictures or photographs– Graphics that don’t originate on the computer must be

digitalised.– Main method of digitalising is with a scanner.– Scanning converts pictures/photos from analogue to digital

format.– Scanned pictures can be imported into programs such as

PaintShop and PhotoShop, and saved in a variety of formats, such as:

• gif, eps, ps, jpg, pct, pic, png, tif, clp, bmp, etc.


Bits and bytes• The smallest, most fundamental unit part of the

computer is called the bit. • We're familiar with the 10 decimal digits, 0

through 9, that are used to express the numbers that we work with.

9


• Bits are similar, but while there are 10 distinct decimal digits, there are only 2 different bit values, 0 and 1.– Conceptually we need only remember 2 states -

either 0 or 1.– Information is represented as collections of 0s and

1s (bits).– A bit is a BInary digiT, i.e. a digit with only 2 values

(0 or 1).


Bits and bytes• Bits serve as building blocks from which we can construct

and work with larger and more meaningful amounts of information.

• Bits usually aren't of much interest unless we string bits together, into larger patterns.

• The most important and the most interesting collection of bits is the byte.

• A byte is 8 bits, taken together as a single unit. • Bytes are important to us because they are the main

practical unit of computer data.– A bit is like the smallest grain of sand of computer data, but the byte is the

brick, the real building block of data.


Bits and hex• If we write down computer data in its

binary, or bit, form, we get a rather long string of zeros and ones.

• A single byte in binary form, for example, is 01010101.

• We need a way to represent all the bits, but we also need a way that isn't as long and tedious as binary, which is where hexadecimal comes in.

• Hex is shorthand for binary notation, where: 1 hexadecimal digit = half a byte (4 bits).

00000000000000000011110000000000000000 00000000000000001100001100000000000000 00000000000000010000000010000000000000 00000000000000100000000001000000000000 00000000000000100010001001000000000000 00000000000001000111011100100000000000 00000000000001000010001000100000000000 00000000000001000000000000100000000000 0000000000000100000000000010000000000000000000000001001000000100100000000000 00000000000000100100001001000000000000


Bits and hex• We combine decimal digits (0-9) to make larger numbers

e.g. 100. • We can also use the two bit symbols, 0 and 1, and

combine them to make larger numbers. • This same idea applies to hex, which uses 16 distinct

hexadecimal digits to represent 16 distinct values. • The 16 hex digits are 0 through 9 (which have the same

numerical meaning as our decimal digits 0-9) PLUS 6more hex digits to indicate the six additional hex values, written as the letters A, B, C, D, E and F.

• These last six hex digits, A through F, represent the six values after the value 9: A is 10, B is 11, and so forth, to F, which has a value of 15.

10

11111110110111001011101010011000111110101100111010

Binary

F15E14D13C12B11A1099887766554433221100

Base-16 (Hex)Base-10


Bits and hex• Each of the 16 hex digits 0-9, A-F,

represents a value of 0 through 15.• Why hex?

– Hex is a compromise between what's closest to the machine, and what's practical for us. Since the most common unit of computer data is the byte, hex conveniently represents all the bits in a byte.

– 2 hex digits, each one representing 4 of the byte's 8 bits. – Hex numbers are commonly used to describe colour in

graphics.– Hex numbers are also used in HTML.

FF255100

CC20480

9915360

6610240

335120

0000

HexadecimalColourNumber

Percentages

To convert from Base 10 to Base 16 (Hex)(http://www.permadi.com/tutorial/numDecToHex/)

(Or just use the Scientific Calculator that comes with Windows!)

#00FF33Spring Green

#003366Dusty Blue

#999900Olive

#CC00CCViolet

#FF6600Orange

#333333Dark grayHexColour

Web-safe combinations are 00, 33, 66, 99, CC, FF in various combinations

Although there are 256 web-safe colours, there are only 216 coloursthat are safe for ALL browsers.

Web-safe hex (colours)

11


Web-safe hex (colours)

• Download desktop popups for hex and decimal colours (also HTML web-safe tags) from:

• http://www.visibone.com/popups/


Images and pixels

• Images on a monitor are composed of tiny dots called pixels.

• Pixel is a short for “picture element” and is a single point or dot in a graphic image.– Obviously, the more dots on an image and the

closer the dots are together, the better the representation.

Resolution: 36 dpi

Resolution: 72 dpi


Monitors and pixels• A monitor is made up of dots (pixels), in columns

and rows.• The number of bits used to represent each pixel

determines how many “colours” or shades of grey can be displayed.– If a pixel is represented by 1 bit, each pixel can either be on

or off. There are only 2 possible “colours” in the image -black or white (binary image).

– If 2 bits are used then there can be 4 (22) “colours” or shades of grey.

– If 8 bits are used, then there can be 256 (28) “colours” or shades of grey.

12


Monitors and pixels

• Pixels are displayed on the screen by shining light on the screen at the pixel spots.

• The light comes from electron guns which fire a beam of electrons at a phosphor dots behind the monitor screen.– The guns scan the phosphor dots on the grid line

by line, constantly painting the screen with pixels.• The speed at which the guns scan the whole screen and

then start again is called the “refresh rate” of the monitor.• The standard refresh rate for monitors of more than

640x480 is 75 Hertz. This means the monitor redraws its display 75 times per second.


Monitors and pixels

• Monochrome monitors were usually white or green text on black background, or black text on white background.

• The electron gun for monochrome monitors only had two choices:– Don’t fire the gun at the phosphor dot (pixel is

“off”).– Fire the gun to make the pixel display the default

colour (“on”).


• In black and white, a black pixel can be represented by 1 and a white pixel by 0. – When the computer opens a black and white

bitmapped image, it looks for numbers that describe image information.

– Every time it comes to a 0 it draws a white pixel. When it comes to a 1 it draws a black pixel.


0000000000000000001111000000000000000000000000000000001100001100000000000000000000000000000100000000100000000000000000000000000010000000000100000000000000000000000000100010001001000000000000000000000000010001110111001000000000000000000000000100001000100010000000000000000000000001000000000000100000000000000000000000010000000000001000000000000000000000000100100000010010000000000000000000000000100100001001000000000000000000000000001000111100010000000000000000000000000001000000001000000000000000000000000000001100001100000000000000000000000000000000111100000000000000000001111001000000000000000000000000000001100010010000000000000000000000000000110001001000000000000000000000000000000000010010000111000101100010110010010000111111110010010001101000110101100100000010010001001001110010111001010010000001001000010110101001010100101101101000010010000110110111111011111101101100000000000000000001000000100000000110000000000000000000110000011000000011000000000000000000001000000100000000100000

Bitmapped image

Enlarged bitmapped image

Binary data describing the image

13


Monitors and colours (stop)• In colour monitors, each pixel is fired at by three (not one)

electron guns.• One gun fires red, one fires green, and one fires blue. • These three colours overlap in one pixel and are

perceived as one colour.• Different colour pixels are produced by varying the

strength of each coloured electron beam.• For example, R=205 Green=153 Blue=153

gives a dusty pink.• If you take out some red, e.g. 153 153 153,

the colour is more grey.


Monitors and colours

• The resolution of a monitor means the total number of pixels that are displayed on the screen.– A resolution of 800 columns of dots by 600 rows of

dots is 800x600, which is 480,000.– A resolution of 1024x768 has 786,432 dots (or

pixels).• So if you design a web page for a 1024x768

screen, it may not display as you expect on a smaller screen.


Colour depth• For a monochrome monitor, one bit is in

one of two possible states.• For a colour monitor, information is

needed about the amount of red, green and blue that must be fired at the pixel.– This takes much more video memory.

• The space needed in the video memory for each pixel is called the “colour depth”.


Colour depth• Three main colour depth standards:

– 256 colours - 8 bits per pixel– High colour - 16 bits per pixel– True colour - 24 bits per pixel

14


Colour systems• RGB is a popular way of recording the colour of a pixel in

a graphics file.• In many packages, colours are expressed in the RGB

code by specifying a number for the amount of red, the amount of green and the amount of blue.

• RGB is used by applications such as Paint Shop Pro, Photo Shop, Microsoft Paint and Microsoft Word Draw.

• In most of these applications, you will also see numbers for other systems, such as HSL, HSB, CMY, and CMYK.

• Sometimes you’ll see Lab: This means Luminosity and two arbitrary colour axes (a and ß). This colour mode is based on the description of the actual colour itself. So this is the only colour mode that is independent of devices.

Red (R)

Blue (B)

Green (G)Black

White

Grey gradation

Yellow (Y)

Cyan (C)

Magenta (M)

RGB model

CMY model

RGB is an additive model with an origin, which coincides with the position of the "black" colour dot. The bits for each pixel indicate the amount of red, green and blue colour associated with the dot.CMY (Cyan, Magenta, Yellow) is a difference colour model, complementary to the RGB model. In this case, the bits for each pixel indicate the amount of cyan, magenta and yellow which, if subtracted from white, leave red, green and blue respectively.(This model is also called CMYK where K means black. K is used so that it is not confused with B for blue.)

The secondary colours of RGB, cyan, magenta, and yellow, are formed by the mixture of two of the primaries and the exclusion of the third. Red and green combine to make yellow, green and blue make cyan, and blue and red make magenta. The combination of red, green, and blue in full intensity makes white. White light is created when all colours of the spectrum converge in full intensity.

The primary colors of RGB are the secondary colours of CMY. But as the illustrations show, the colours created by the difference model of CMY don't look exactly like the colours created in the additive model of RGB.

15


Colour systems

BlackNoneWhiteRed, green and blueCyanGreen and blue (red subtracted)MagentaRed and blue (green subtracted)YellowRed and green (blue subtracted)BlueBlue onlyGreenGreen onlyRedRed onlyPerceived colourRGB combination

The perceived colour when one primary colour is subtracted from the RGB mix.


Colour systems• Recap on hex system for HTML …• In HTML, you need to express the RGB colours together

as a single hex number.• The hex number for HTML has 3 pairs of two hex digits -

one pair for each of the red, green and blue colours.• Maximum decimal value each of these colours can have is

255.• Decimal = 255, Hex = FF, Binary = 11111111 (8 bits)• So red, green and blue components each have 8 bits.• Together we need 24 bits for each colour.• That’s 24 bits for each pixel.

Hue is displayed as a location on the circle of the cone and is expressed as a degree between 0° and 360°. The central axis of the cone is the grey scale progression.

Saturation is the distance from the central axis of the cone, measuring the amount of grey in proportion to the hue in percentage.

Luminance (or lightness or brightness) is measured as a percentage from 0% (black) to 100% (white).

HSB/HSL SYSTEMS

Hue is displayed as a location on the circle of the cone and is expressed as a degree between 0° and 360°.

Saturation is the distance from the central axis of the cone, measuring the amount of grey in proportion to the hue in percentage.

Brightness (or lightness) is measured as a percentage from 0% (black) to 100% (white).

16

This sample colourusing differentcolour schemes

Paint Shop Pro ColourPicker

Photo Shop Colour Picker


Colour systems• As well as the monochrome and colour options, there is a

third one which is somewhere between the two.• The grey scale is a colour scheme which has white, black

and shades of grey in between.• There are a limited number of colours in this scheme

because the human eye can not distinguish more than 256 shades of grey.

• So we need only enough bits to represent 256 different colours and we can do that with 8 bits.

• Greyscale is best used when scanning a black and white photograph.

• Colour photographs can also be changed to greyscale.

Colour .bmp file size = 400K

Greyscale .bmp file size = 134K

17

RGB .jpg file size = 49K

Greyscale .jpg file size = 36K


Colour variations• There are substantial differences in how

an image is displayed according to your computer, e.g.:

Colour balancedon a Mac

Same image displayed on a PC


Graphics formats

• Two major classes of graphics formats:– bitmap graphics– vector graphics

• Bitmap files are larger than vector files.• Implications are:

– amount of HD space you need– amount of disk space a user who downloads graphics needs– time to download


Bitmap vs vector graphics

• Bitmap (raster) graphics– Primitive element is a pixel– Display can be visualised as a 2D array of pixels.– Bitmap graphics best suited for complicated

graphic images.

18


• Vector graphics– Primitive element is a line or a curve– Typically composed of lines, arcs and geometric

shapes.– Created on a computer.– Handles associated with each drawn item.

• Handles can be used to select, modify or move each item in the graphic.

– Vector graphics best suited for line drawings.


Graphics formats: Bitmap• Bitmap graphics (often called raster

graphics) are the most popular because they are stored in the format that the screen is going to display them in.– Bitmap - representation consisting of columns and rows of

dots.– The value of each dot (whether it is ‘on’ or ‘off’) is stored in

one or more bits of data.– The number of bits for each pixel depends on the colour

used.


• Pixel information for every pixel in the graphic is recorded, even if there are 200 pixels of white surrounding the image.

• This is redundant data.

ICT 514_Lect 1_06 72 school of information technologyIndividual pixes of bitmap image

19


Graphics formats : Bitmap• Bitmap graphics are set

at a specified number of pixels.

• When enlarged, extra pixels are not added but each existing pixel is enlarged.

• The more the graphic is enlarged, the more jagged the edges.


Graphics formats : Vector• Vector graphics are created from mathematical

models.– i.e. graphics by geometry

• Vectors are simple geometrical shapes like lines and arcs that ultimately become circles and boxes.

• The mathematical models create the image as a series of mathematical formulas that connect vectors.


• Vector graphics are also called object oriented graphics.– Every part of the graphic is a separate object.

• Using equations to represent curves and lines makes the representation concise and resolution independent.– Any scale can be used and the line or or curve can be

produced precisely.– Compare this to bitmap graphics that is dependent on the

scale and resolution in which the graphics was created.


Graphics formats : Vector

• Information about this rectangle:– Width: 200 pixels– Length: 300 pixels– X of origin: col 50– Y of origin: row 60– Line Width: 1– H: 25 R: 255– S: 255 G:153– L: 128 B: 0

X and Y of the origin (200x300 pixels)

20


• Therefore, vector graphics are smaller files than bitmap graphics because there is no redundant information.



• Modifying the properties of this rectangle (say changing to 100x150 pixels) causes the pixel version of the rectangle to be redrawn with its new properties.


– Moving an object in an image simply means changing its location property.

– Other objects are not affected.– If one object partially obscures another

object, the software calculates what is visible and what is not and displays accordingly.

– This process is called “clipping”.


Graphics formats : Vector• Curves are represented using

mathematical formulas.• These curves are sometimes known as

parametric curves.

21


• Two popular types of parametric curves are:– B-spline curves– Bezier (pronounced “bez-ee-ay”)

• Both types project a curve through a series of points through which the curve is approximated.

• The Bezier curve is the more popular.– Based on the work of a Renault engineer (Pierre Bezier)


Graphics formats : Vector• Vector graphics are much more flexible

than bitmap graphics.• Each object can be manipulated by adding

shadow, 3D effects, layering, etc.



• Notice what happens when a vector graphic is enlarged …

• No jagged edges.• Because the object is constructed

using a formula so the formula can be used to correctly enlarge the object.

• It’s a bit like saying you want to double the size therefore multiply by 2.



• Computer monitors, of course, can only show images using pixels.

• To display vector graphics on a screen, the computer must translate vector formulas into pixels.

• This translation affects the refresh rate of your screen.

• The computer must recalculate all the vectors each time the screen is redrawn.

• It is faster, then, for the video memory to redraw a screen from a file containing pixel descriptions.

22


Compression

• Uncompressed graphic files (BMP) are not supported by browsers.

• There is a solution to the problem of browser display and of very large files for bitmap graphics - compression.

• Two types of compression: lossless and lossy


• Lossless compression:– None of the data is lost, just redundant data is

eliminated.– Example: If 10 adjacent pixels are the same

colour, then it is possible to record the colour once and then record the number of pixels to repeat the colour.

– Obviously, images with large blocks of constant colour will compress much more than images with lots of different colours.


Compression• Lossy compression:

– Data is actually lost, but generally it is data which doesn’t matter too much.

– The human eye can’t see all of the fine colour detail in 16 million colours.

• Lossy compression reduces file sizes more than lossless compression, so is generally more popular for images to be displayed on the web.


23


Graphics file formats : Bitmap

• Compressed bitmap formats:• GIF (Graphics Interchange Format)

(usually pronounced “jiff”)– Supports only 256 colours– Uses a variation of the LZW (Lempel-Ziv

Welch) compression algorithm– Uses lossless compression, producing 4 to

10 times compressionICT 514_Lect 1_06 90 school of information technology

• Two types of GIF file formats:– GIF87a - supports interlacing– GIF89a - extends the above with support for

animation (amongst other things)



• Compressed bitmap formats:• JPG (Joint Photographic Experts Group)

or JFIF (JPG file interchange format)(pronounced jay-peg)


– Uses lossy compression, and the amount of compression can be specified• 10:1 - 20:1 for good quality• 30:1 - 50:1 for moderate quality• 60:1 - 100:1 for poor quality

– A tradeoff between quality and file size– Doesn’t work too well with line drawings or

flat colour images.

24



• PNG (Portable Network Graphic) (pronounced “ping”)– Similar to GIF but supports 16 million colours– Uses the Deflat compression algorithm (as in

pkzip).– It allows full colour to be stored and has a 10-30%

better compression than GIF.– Provides quicker interlaced display.– It is the copyright free alternative to GIF (which is

patented by Unisys) but some older browsers have problems displaying PNG.



• Which is better to use - GIF or JPG? The answer is, it depends.

• Photographs and graphics with lots of colour, and particularly colours that blend and fade into one another, are best served by JPG.

• If your image has flat colour fields, it will compress well in the GIF format.

JPG

GIF

JPG

GIF

The pixels in the GIF image are "dithering,” that is, it is trying to adjust the pixels within a graphic to simulate the display of colours not in the GIF's colour palette.

JPG

But GIF handles flat colours better than JPG

Same image viewed with 256-colour set-up

8-bit GIF 4-bit GIF

25


Graphics file formats : Bitmap• Advantages of GIF:• GIFs can be interlaced.

– Interlaced GIFs appear first with poor resolution and then improve in resolution until the entire image has arrived, allowing the viewer to get a quick idea of what the picture will look like while waiting for the rest. JPGs download linearly, from top row to bottom row.


• GIF backgrounds can be transparent.– The background colour of the browser

window can be seen.

• GIFs can be animated.– Poor old JPGs just have to be still.



• GIFs can also be “morphed” or “warped”.• Morphing is a very cool looking transition.• It is also one of the most complicated

ones.• A morph looks as if two images melt into

each other with a very fluid motion.• In technical terms, two images are

distorted and a fade occurs between them.

Graphics file formats : Bitmap• Advantages of JPG:• Better for displaying natural, complex

images. • Unlike GIF, JPG is always full 24-bit

colour, so on anything but a 24-bit monitor it will always be dithered by the browser. If you're fairly certain your target audience is 24-bit capable and quality is an issue, then go for a high quality JPG. The images will be smaller than a GIF too.

• If size is an issue then go for a lower quality JPG, as it will be substantially smaller than the equivalent GIF.

High quality JPG, 43K

Medium quality JPG, 13K

26


8-bit Color Images

• Many systems can make use of 8 bits of color information (the so-called \256 colors") in producing a screen image.

• Such image les use the concept of a lookup table to store color information.

• Basically, the image stores not color, but instead just a set of bytes, each of which is actually an index into a table with 3-byte values that specify the color for a pixel with that lookup table index.

27


Details about GIF87a

• GIF standard is simple yet contains many common elements.

• Limited to 8-bit (256) color images only, which, while producing acceptable color images, is best suited for images with few distinctive colors (e.g., graphics or drawing).

• GIF standard supports interlacing - successive display of pixels in widely-spaced rows by a 4-pass display process.

28


JPEG

29


PNG


TIFF


EXIF


PS and PDF

30

ICT 514_Lect 1_06 117 school of information technology ICT 514_Lect 1_06 118 school of information technology

Other Formats

ICT 514_Lect 1_06 119 school of information technology ICT 514_Lect 1_06 120 school of information technology

Summary• What is the visible region of the electromagnetic

spectrum?• How do we see colour?• What is deuteranopia?• What are some types of computer graphics?• How many bits in a byte?• How many bits in a hex?• Name 2 colour schemes?• What are the two main types of graphic formats?• What are the two main types of compression?• What are the advantages of jpg vs gif?• File Formats

31


References• Cybulski, K. and Valentine, D., Computer Animation,

AAST, NJ, http://www.bergen.org/AAST/ComputerAnimation/

• Maher, M.L., Simoff, S., and Cicognani, A. (1999). Understanding Virtual Design Studios, Springer-Verlag, London.

• Norton, P.: 1986, Inside the IBM PC.• Webmonkey, Web Developer’s Resource,

http://hotwired.lycos.com/webmonkey/multimedia/ • Webopedia, http://webopedia.internet.com• Wide Area Communications,

http://www.widearea.co.uk/designer/ ICT 514_Lect 1_06 122 school of information technology

• Colour problems on the web, http://www.w3.org/Graphics/PNG/platform.html

• Browser-safe colours, http://www.brobstsystems.com/colors.htm

• Image compression, http://www.ibiblio.org/otis/notes/otis-compression.html

• HTML/Hex/Dec popup charts, http://www.visibone.com/popups/

• Human Eye, http://users.rcn.com/jkimball.ma.ultranet/BiologyPages/V/Vision.html

• Physiology of Human Vision, http://www.adobe.com/support/techguides/color/colortheory/vision.html

Documents

ICT 514 Multimedia Systems - Murdoch Universityftp.it.murdoch.edu.au/units/ICT514/Lectures/ICT514_06_02_Images.… · 2 ICT 514_Lect 1_06 5 school of information technology Objectives