Lecture 10 Image Format

SFDV2001 Lecture 10: Images and Colour Graphic Formats

Colour Perception of radiation – called light. There are many wavelengths/energy levels of photons (wave-particle that is light).

Our eyes Two types of cells respond to light. Rods for intensity level and Cones for colour.

Artificial Colours Every colour we see can be composed of these three colours. TV's have Red Green and Blue Phosphors Sound is made up of combinations of Frequencies so we can make those

Subtractive Colour At school the primary colours were Red Yellow and Blue. These are subtractive colour, as paint absorbs light. Printers use Cyan Magenta and Yellow as subtractive colours. Opponent colour model. Additive Colour Adding red green and blue together gives the impression of white light

Binary In binary the number of positions you have tells you how many quantities you can represent Binary represents everything with just two symbols and position People “sitting or standing” can be in various configurations, how many can 3 people make? Largest number with 2 digits 99 10 = 99 10 = 9*10 + 9*1 FF 16 = 255 10 = F(15)*16 + F(15)*1 11 2 = 3 10 = 1*2 + 1*1

Important numbers 8 bi nary digits ( bits )= 256 possible values 8 bits are one Byte. Very important to computers. Other numbers KB = KiloByte = 1,024 Bytes MB = MegaByte = 1, 048, 567 Bytes 1 Byte describes 256 values.

Hexadecimal Hexadecimal - base 16 Ran out of numbers so they used the first letters of the alphabet. A-F. A= 10, B=11, C=12, D=13, E=14, F=15 A7 16 = A*16 + 7*1 = 167 10 Hexadecimal to binary easy 1 hex digits = 4 bits 2 hex digits = 8 bits = 1 byte

Hex and Colour We represent colours with a number of bits. Bit Depth Bit depth is many bits per pixel. Common now is 8 bits per colour = 256 levels for each colour. 3 colours per pixel = 256*256*256 = 16,777,216 RGB = red green blue 2 Hex digits per colour Red = FF 00 00 Green = 00 FF 00 Blue = 00 00 FF .

Raw images Huge Digital cameras with 5 Megapixel resolution 2739 x 1825 pixels = 10 x screen (800x600) ‏ Raw = 15MB file Stupid to send files this size Compress the files Pixels – 450x300 is large enough for the screen Representation

Image Descriptions Two types Raster images (bit mapped) ‏ Vector images (descriptions) ‏ Raster Photographs are raster images. Painting programs usually make raster graphics. Vector Drawing programs make shapes and edit them. True type fonts are defined by vectors and curves. Flash on the web is done with vectors 11/09/07 Images & Colour

Compression Lossless: a->b, b  c, a = c Lossy: a->b, b  c, a ≠ c Concepts: Throw away unnecessary information Remove redundancy Resolution and size

Lossless Makes the file smaller without losing data. Information Science How to represent information. What compression is possible without loss of signal. Maximum information from minimum data. What about noise? Zip compression for windows. Works well for text, but badly for JPEGs etc

Index One fish Two fish Red fish Blue fish. Black fish Blue fish Old fish New fish. This one has a little star. This one has a little car. Say! What a lot of fish there are. Reduce redundancy Create a dictionary and use indices instead of words Transmit dictionary with document LZW - Auto-generates the dictionary Could almost see CSS as index to styles Dictionary 1=One, 2=fish, 3=Two, 4=Red, 5=Blue, 6=Black, 7=Old, 8=New, 9=This, ....... 1.2.3.2.4.2.5.2.6.2.5.2.7.2.8.2.9.1.10......

Run Length encoding If any number is repeated a lot write down the number and then the repeats Does not work if there is noise in the image, like photographs 1,1,1,1,1,1,1,1,1,2,2,2,2,2,4,4,2,2,1,1,1,1,1,1 1,9,2,5,4,2,2,2,1,6 1x9, 2x5, 4x2, 2x2, 1x6

Raster Scaling the image is ugly Describes each pixel Most web graphics are still raster graphics. jpeg, gif, png, bmp Scale is important Each pixel often 24 bit colour 000000011111110000000 000001100000001100000000010000000000010000001100000000000001100001000000000000000100010001110000011100010100001010000010100001 .... A one bit colour image

BMP Bit Mapped Picture. Uncompressed. Colour Various colour depth. 3 bytes per pixel is millions of colours Huge file size. You should not use BMP!!!!!!

GIF CompuServe Good: Crisp block images, fixed colours. Cartoons, Logos, CG images. Bad: Smooth shaded objects with smooth edges. Photos. Palletise 16.8 million possible colours in the image 256 most common colours and make an index. Each pixel is now 1 byte (an 8 bit number that refers to the index) instead of 3.

GIF (cont.) ‏ LZW compression as well Total savings usually about a factor of 4. One index spot reserved for "transparency." Animation Have more than one image in the file Replace the whole or part of the image Run in a sequence PNG better, but not as well supported.

PNG Portable Network Graphics or Picture Not GIF Good and Bad are the same as GIF. Response to GIF patent issues. Colour table can include all of the colours up to 24-bit colour. Completely Lossless – Compression without loss of data Similar to LZW compression Graduated transparency, up to 256 levels Firefox and IE support PNG now Transparency still an issue

JPEG Joint Photographic Experts Group. Good: Smooth shaded objects with blurry edges. Photos. Bad: Crisp block images fixed colours. Cartoons. How it works Uses knowledge about how the eye sees to compress the image. Uses the Discrete Cosine Transformation (DCT) to convert to frequency information and throw away sharp frequencies. 8x8 blocks in the image

JPEG Lossy compression – choose how much to throw away. JPG not designed for this sort of image Notice the blocky patches 20% PNG 2% 100% SVG JPEG 0.72 3.52 9.67 3.52 0.76

Why not just JPEG No transparency. The compression is "lossy"; i.e. you can't get back what you throw away. Colours "bleed" esp. on straight edges. Compression not very effective on blocky computer generated images. Other alternatives gif and png, and possibly vector graphics.

Vector Images Describes the image Very good for scaling. Easily controlled and animated. Easy to generate from programs. <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG- 20010904/DTD/svg10.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 100 100"> <title>Demonstration of SVG with a smile</title> <circle cx="30" cy="30" r="28" fill="none" stroke="blue" stroke-width="1" /> <circle cx="20" cy="22" r="3" fill=" skyblue " stroke="black" stroke-width="1" /> <circle cx="40" cy="22" r="3" fill=" skyblue " stroke="black" stroke-width="1" /> <path d="M 15,38 a20,20 0 0,0 30,0" style="fill:none; stroke:red; stroke-width:1" /> </svg>

SVG Scalable Vector Graphics XML format. Supported in Firefox – Not IE6. Can be animated and/or made to respond to user input using Javascript. Lots of primitive shapes 'rect', 'circle', 'ellipse', 'polygon' 'line', 'polyline' Path – arbitrary stuff Attributes and style information

Flash Initially entirely vector graphics. Including bitmaps as objects. In version 8 per-pixel operations. Requires a plug-in to run. Very pretty sites Usability issues slowly being overcome Massive amount to learn Flash has a lot of structure and internal information Scripting and interaction takes time to learn Not covered in this course

Adding Images Work out the size of your page + images Work out how long that will take to load across a 56K modem If it's longer than 30 seconds, that's too long Mobile phones Vodafone 1c per K Telecom 5c per K (authorised 1c per K) ‏ <img> tag src – the location of the picture alt – the alternative name if the image is missing CSS Image position and display controlled with CSS

Downloading Size of image: 200 pixels x 200 pixels, 40,000 pixels with 3 bytes per pixel = 120,000 Bytes = 120KB Modem maximum = 56Kbits / second = 7KBytes / second 120KB / 7KB/s = 17 seconds to download basically uncompressed files are big.

Summary Use the right format for an image Photo = JPEG Cartoon = GIF or PNG Think about file size. Think about image size Reducing width and height to 1/x original size reduces number of pixels to 1/x 2 . Think about resolution. Think about ownership Ethics lecture. 11/09/07 (SFDV2001:14)Graphic Formats

Lecture 10 Image Format

More Related Content

What's hot

Viewers also liked

Similar to Lecture 10 Image Format

More from Sur College of Applied Sciences

Recently uploaded

Lecture 10 Image Format