ICT 514 Multimedia Systems Topic 2: Visuals: Static. Outline. What is the difference and why? Consider the following file formats. What do they mean?

Transcription

1 ICT 514 Multimedia Systems Topic 2: Visuals: Static Consider the following file formats. What do they mean? Lance Fung (Ref: Li & Drew, Fundamentals of Multimedia, Chapter 3) master of science in information technology ICT 514_Lect 1_06 2 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 ICT 514_Lect 1_06 3 ICT 514_Lect 1_06 4 1

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 ICT 514_Lect 1_06 5 Digital images Images convey information or communicate ideas. For example: dog 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. ICT 514_Lect 1_06 6 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. ICT 514_Lect 1_06 7 ICT 514_Lect 1_06 8 2

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." Light and colour Visible region of the electromagnetic spectrum is nanometers. Colour is the frequency of a light wave within that narrow band. ROY G. BIV red, orange, yellow, green, blue, indigo, violet (in ascending frequencies) ICT 514_Lect 1_06 9 ICT 514_Lect 1_06 10 Light and colour 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 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. ICT 514_Lect 1_06 11 ICT 514_Lect 1_

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. ICT 514_Lect 1_06 13 ICT 514_Lect 1_06 14 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 longwavelength light (red) cones that absorb middlewavelength light (green) cones that absorb shortwavelength light (blue) ICT 514_Lect 1_06 15 Colour When you look at this, how many colors do you see? ICT 514_Lect 1_

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! ICT 514_Lect 1_06 17 ICT 514_Lect 1_06 18 Colour Not everyone perceives all colours. What number do you see this circle? Normal colour vision = 5 Deuteranopia vision (red/green colour deficit) = 2 ICT 514_Lect 1_

6 Colour Consider the 12-20% of men and 0.4% of women with some form of colour blindness when choosing colours. Colour Also consider the world s favourite colour blue Survey of 14 countries people on the web. 216 web-safe colours ICT 514_Lect 1_06 21 Survey results of web users Colour China Denmark Finland France Germany Holland Iceland Italy Kenya Portugal Russia Turkey Ukraine United States ICT 514_Lect 1_ Preference (%) for blue by country Colour Most wanted painting - France Least wanted painting - France Most wanted painting - USA Least wanted painting - USA ICT 514_Lect 1_

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 into charts or graphs, e.g. pie charts, bar charts, line graphs, scattergrams Example software: Microsoft Excel, Microsoft Graph ICT 514_Lect 1_06 25 ICT 514_Lect 1_06 26 Taxonomy of computer graphics Clip art Ready made pictures Available with your Windows software On the Internet, e.g. 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. for driving directions from one point to another. ICT 514_Lect 1_06 27 ICT 514_Lect 1_

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. Taxonomy of computer graphics 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 ICT 514_Lect 1_06 29 ICT 514_Lect 1_06 30 Taxonomy of computer graphics 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. ICT 514_Lect 1_06 31 ICT 514_Lect 1_

9 Bits and bytes 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 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. ICT 514_Lect 1_06 33 ICT 514_Lect 1_06 34 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 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) Bits and hex We combine decimal digits (0-9) to make larger numbers e.g 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 6 more 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. ICT 514_Lect 1_06 35 ICT 514_Lect 1_

10 Binary Base-10 Base-16 (Hex) Bits and hex A B C D 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 E F ICT 514_Lect 1_06 38 Percentages Colour Number Hexadecimal CC FF To convert from Base 10 to Base 16 (Hex) ( (Or just use the Scientific Calculator that comes with Windows!) Web-safe hex (colours) Web-safe combinations are 00, 33, 66, 99, CC, FF in various combinations Although there are 256 web-safe colours, there are only 216 colours that are safe for ALL browsers. Colour Dark gray Orange Violet Olive Dusty Blue Spring Green Hex # #FF6600 #CC00CC # # #00FF33 10

11 Web-safe hex (colours) Download desktop popups for hex and decimal colours (also HTML web-safe tags) from: 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. ICT 514_Lect 1_06 41 ICT 514_Lect 1_06 42 Resolution: 72 dpi Monitors and pixels Resolution: 36 dpi 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 (2 2 ) colours or shades of grey. If 8 bits are used, then there can be 256 (2 8 ) colours or shades of grey. ICT 514_Lect 1_

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 ). ICT 514_Lect 1_06 45 ICT 514_Lect 1_06 46 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. Bitmapped image Enlarged bitmapped image Binary data describing the image ICT 514_Lect 1_06 47 ICT 514_Lect 1_

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 , 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. ICT 514_Lect 1_06 49 ICT 514_Lect 1_06 50 Colour depth 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. Three main colour depth standards: 256 colours - 8 bits per pixel High colour - 16 bits per pixel True colour - 24 bits per pixel ICT 514_Lect 1_06 51 ICT 514_Lect 1_

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. ICT 514_Lect 1_06 53 Magenta (M) Black Blue (B) Red (R) Grey gradation RGB model CMY model White Cyan (C) Yellow (Y) Green (G) 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. 14

15 Colour systems RGB combination Red only Green only Blue only Red and green (blue subtracted) Red and blue (green subtracted) Green and blue (red subtracted) Red, green and blue None The perceived colour when one primary colour is subtracted from the RGB mix. Perceived colour Red Green Blue Yellow Magenta Cyan White Black 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 = (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. ICT 514_Lect 1_06 57 ICT 514_Lect 1_06 58 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 lightne ss) is measured as a percentage from 0% (black) to 100% (white). 15

16 This sample colour using different colour schemes Paint Shop Pro Colour Picker Photo Shop Colour Picker Colour systems Colour.bmp file size = 400K 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. ICT 514_Lect 1_06 63 Greyscale.bmp file size = 134K 16

17 RGB.jpg file size = 49K Colour variations There are substantial differences in how an image is displayed according to your computer, e.g.: Greyscale.jpg file size = 36K Colour balanced on a Mac ICT 514_Lect 1_06 66 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. ICT 514_Lect 1_06 67 ICT 514_Lect 1_

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. ICT 514_Lect 1_06 69 ICT 514_Lect 1_06 70 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 71 ICT 514_Lect 1_06 72 Individual pixes of bitmap image 18

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. ICT 514_Lect 1_06 73 ICT 514_Lect 1_06 74 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) ICT 514_Lect 1_06 75 ICT 514_Lect 1_

20 Graphics formats : Vector 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. ICT 514_Lect 1_06 77 ICT 514_Lect 1_06 78 Graphics formats : Vector 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. Curves are represented using mathematical formulas. These curves are sometimes known as parametric curves. ICT 514_Lect 1_06 79 ICT 514_Lect 1_

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. ICT 514_Lect 1_06 81 ICT 514_Lect 1_06 82 Graphics formats : Vector Graphics formats : Vector 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. ICT 514_Lect 1_06 83 ICT 514_Lect 1_

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. ICT 514_Lect 1_06 85 ICT 514_Lect 1_06 86 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. ICT 514_Lect 1_06 87 ICT 514_Lect 1_

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 compression Two types of GIF file formats: GIF87a - supports interlacing GIF89a - extends the above with support for animation (amongst other things) ICT 514_Lect 1_06 89 ICT 514_Lect 1_06 90 Graphics file formats : Bitmap 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. ICT 514_Lect 1_06 91 ICT 514_Lect 1_

24 Graphics file formats : Bitmap Graphics file formats : Bitmap 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 ICT 514_Lect 1_06 93 ICT 514_Lect 1_06 94 JPG JPG Same image viewed with 256- colour set-up GIF 8-bit GIF 4-bit 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. But GIF handles flat colours better than JPG 24

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. ICT 514_Lect 1_06 97 ICT 514_Lect 1_06 98 Graphics file formats : Bitmap 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. ICT 514_Lect 1_06 99 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 25

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. ICT 514_Lect 1_

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. ICT 514_Lect 1_

28 JPEG ICT 514_Lect 1_

29 PNG TIFF ICT 514_Lect 1_ ICT 514_Lect 1_ EXIF PS and PDF ICT 514_Lect 1_ ICT 514_Lect 1_

30 Other Formats ICT 514_Lect 1_ ICT 514_Lect 1_ Summary ICT 514_Lect 1_ 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 ICT 514_Lect 1_

31 References Cybulski, K. and Valentine, D., Computer Animation, AAST, NJ, 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, Webopedia, Wide Area Communications, Colour problems on the web, Browser-safe colours, Image compression, HTML/Hex/Dec popup charts, Human Eye, /Vision.html Physiology of Human Vision, eory/vision.html ICT 514_Lect 1_ ICT 514_Lect 1_