Lecture 10 Image Format


Published on

1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Lecture 10 Image Format

  1. 1. SFDV2001 Lecture 10: Images and Colour Graphic Formats
  2. 2. Colour <ul><li>Perception of radiation – called light. </li></ul><ul><li>There are many wavelengths/energy levels of photons (wave-particle that is light). </li></ul>
  3. 3. Our eyes <ul><li>Two types of cells respond to light. Rods for intensity level and Cones for colour. </li></ul>
  4. 4. Artificial Colours <ul><li>Every colour we see can be composed of these three colours. </li></ul><ul><li>TV's have Red Green and Blue Phosphors </li></ul><ul><li>Sound is made up of combinations of Frequencies so we can make those </li></ul>
  5. 5. Subtractive Colour <ul><li>At school the primary colours were Red Yellow and Blue. </li></ul><ul><ul><li>These are subtractive colour, as paint absorbs light. </li></ul></ul><ul><li>Printers use Cyan Magenta and Yellow as subtractive colours. </li></ul><ul><li>Opponent colour model. </li></ul>Additive Colour Adding red green and blue together gives the impression of white light
  6. 6. Binary <ul><li>In binary the number of positions you have tells you how many quantities you can represent </li></ul><ul><li>Binary represents everything with just two symbols and position </li></ul><ul><li>People “sitting or standing” can be in various configurations, how many can 3 people make? </li></ul><ul><li>Largest number with 2 digits </li></ul><ul><ul><li>99 10 = 99 10 = 9*10 + 9*1 </li></ul></ul><ul><ul><li>FF 16 = 255 10 = F(15)*16 + F(15)*1 </li></ul></ul><ul><ul><li>11 2 = 3 10 = 1*2 + 1*1 </li></ul></ul>
  7. 7. Important numbers <ul><li>8 bi nary digits ( bits )= 256 possible values </li></ul><ul><ul><ul><li>8 bits are one Byte. </li></ul></ul></ul><ul><li>Very important to computers. </li></ul><ul><li>Other numbers </li></ul><ul><ul><li>KB = KiloByte = 1,024 Bytes </li></ul></ul><ul><ul><li>MB = MegaByte = 1, 048, 567 Bytes </li></ul></ul><ul><li>1 Byte describes 256 values. </li></ul>
  8. 8. Hexadecimal <ul><li>Hexadecimal - base 16 </li></ul><ul><li>Ran out of numbers so they used the first letters of the alphabet. A-F. </li></ul><ul><ul><li>A= 10, B=11, C=12, D=13, E=14, F=15 </li></ul></ul><ul><ul><li>A7 16 = A*16 + 7*1 = 167 10 </li></ul></ul><ul><li>Hexadecimal to binary easy </li></ul><ul><li>1 hex digits = 4 bits </li></ul><ul><li>2 hex digits = 8 bits = 1 byte </li></ul>
  9. 9. Hex and Colour <ul><li>We represent colours with a number of bits. </li></ul><ul><li>Bit Depth </li></ul><ul><ul><li>Bit depth is many bits per pixel. </li></ul></ul><ul><ul><li>Common now is 8 bits per colour = 256 levels for each colour. </li></ul></ul><ul><ul><li>3 colours per pixel = 256*256*256 = 16,777,216 </li></ul></ul><ul><li>RGB = red green blue </li></ul><ul><li>2 Hex digits per colour </li></ul><ul><ul><li>Red = FF 00 00 </li></ul></ul><ul><ul><li>Green = 00 FF 00 </li></ul></ul><ul><ul><li>Blue = 00 00 FF . </li></ul></ul>
  10. 10. Raw images <ul><li>Huge </li></ul><ul><li>Digital cameras with 5 Megapixel resolution </li></ul><ul><li>2739 x 1825 pixels = 10 x screen (800x600) ‏ </li></ul><ul><li>Raw = 15MB file </li></ul><ul><li>Stupid to send files this size </li></ul><ul><li>Compress the files </li></ul><ul><ul><li>Pixels – 450x300 is large enough for the screen </li></ul></ul><ul><ul><li>Representation </li></ul></ul>
  11. 11. Image Descriptions <ul><li>Two types </li></ul><ul><ul><li>Raster images (bit mapped) ‏ </li></ul></ul><ul><ul><li>Vector images (descriptions) ‏ </li></ul></ul><ul><li>Raster </li></ul><ul><ul><li>Photographs are raster images. </li></ul></ul><ul><ul><li>Painting programs usually make raster graphics. </li></ul></ul><ul><li>Vector </li></ul><ul><ul><li>Drawing programs make shapes and edit them. </li></ul></ul><ul><ul><li>True type fonts are defined by vectors and curves. </li></ul></ul><ul><ul><li>Flash on the web is done with vectors </li></ul></ul>11/09/07 Images & Colour
  12. 12. Compression <ul><li>Lossless: </li></ul><ul><ul><li>a->b, b  c, a = c </li></ul></ul><ul><li>Lossy: </li></ul><ul><ul><li>a->b, b  c, a ≠ c </li></ul></ul><ul><li>Concepts: </li></ul><ul><ul><li>Throw away unnecessary information </li></ul></ul><ul><ul><li>Remove redundancy </li></ul></ul><ul><ul><li>Resolution and size </li></ul></ul>
  13. 13. Lossless <ul><li>Makes the file smaller without losing data. </li></ul><ul><li>Information Science </li></ul><ul><ul><li>How to represent information. </li></ul></ul><ul><ul><li>What compression is possible without loss of signal. </li></ul></ul><ul><ul><li>Maximum information from minimum data. </li></ul></ul><ul><ul><li>What about noise? </li></ul></ul><ul><li>Zip compression for windows. </li></ul><ul><ul><li>Works well for text, but badly for JPEGs etc </li></ul></ul>
  14. 14. Index <ul><ul><li>One fish Two fish </li></ul></ul><ul><ul><li>Red fish Blue fish. </li></ul></ul><ul><ul><li>Black fish Blue fish </li></ul></ul><ul><ul><li>Old fish New fish. </li></ul></ul><ul><ul><li>This one has a little star. </li></ul></ul><ul><ul><li>This one has a little car. </li></ul></ul><ul><ul><li>Say! What a lot of fish there are. </li></ul></ul><ul><li>Reduce redundancy </li></ul><ul><li>Create a dictionary and use indices instead of words </li></ul><ul><li>Transmit dictionary with document </li></ul><ul><li>LZW - Auto-generates the dictionary </li></ul><ul><li>Could almost see CSS as index to styles </li></ul>Dictionary 1=One, 2=fish, 3=Two, 4=Red, 5=Blue, 6=Black, 7=Old, 8=New, 9=This, .......
  15. 15. Run Length encoding <ul><li>If any number is repeated a lot write down the number and then the repeats </li></ul><ul><li>Does not work if there is noise in the image, like photographs </li></ul>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
  16. 16. Raster <ul><li>Scaling the image is ugly </li></ul><ul><li>Describes each pixel </li></ul><ul><li>Most web graphics are still raster graphics. </li></ul><ul><li>jpeg, gif, png, bmp </li></ul><ul><li>Scale is important </li></ul><ul><li>Each pixel often 24 bit colour </li></ul>000000011111110000000 000001100000001100000000010000000000010000001100000000000001100001000000000000000100010001110000011100010100001010000010100001 .... A one bit colour image
  17. 17. BMP <ul><li>Bit Mapped Picture. </li></ul><ul><li>Uncompressed. </li></ul><ul><li>Colour </li></ul><ul><ul><li>Various colour depth. </li></ul></ul><ul><ul><li>3 bytes per pixel is millions of colours </li></ul></ul><ul><li>Huge file size. </li></ul><ul><li>You should not use BMP!!!!!! </li></ul>
  18. 18. GIF <ul><li>CompuServe </li></ul><ul><li>Good: </li></ul><ul><ul><li>Crisp block images, fixed colours. </li></ul></ul><ul><ul><li>Cartoons, Logos, CG images. </li></ul></ul><ul><li>Bad: </li></ul><ul><ul><li>Smooth shaded objects with smooth edges. </li></ul></ul><ul><ul><li>Photos. </li></ul></ul><ul><li>Palletise </li></ul><ul><ul><li>16.8 million possible colours in the image </li></ul></ul><ul><ul><li>256 most common colours and make an index. </li></ul></ul><ul><ul><li>Each pixel is now 1 byte (an 8 bit number that refers to the index) instead of 3. </li></ul></ul>
  19. 19. GIF (cont.) ‏ <ul><li>LZW compression as well </li></ul><ul><ul><li>Total savings usually about a factor of 4. </li></ul></ul><ul><li>One index spot reserved for &quot;transparency.&quot; </li></ul><ul><li>Animation </li></ul><ul><ul><li>Have more than one image in the file </li></ul></ul><ul><ul><li>Replace the whole or part of the image </li></ul></ul><ul><ul><li>Run in a sequence </li></ul></ul><ul><li>PNG better, but not as well supported. </li></ul>
  20. 20. PNG <ul><li>Portable Network Graphics or Picture Not GIF </li></ul><ul><li>Good and Bad are the same as GIF. </li></ul><ul><li>Response to GIF patent issues. </li></ul><ul><li>Colour table can include all of the colours up to 24-bit colour. </li></ul><ul><li>Completely Lossless – </li></ul><ul><ul><li>Compression without loss of data </li></ul></ul><ul><li>Similar to LZW compression </li></ul><ul><li>Graduated transparency, up to 256 levels </li></ul><ul><li>Firefox and IE support PNG now </li></ul><ul><ul><li>Transparency still an issue </li></ul></ul>
  21. 21. JPEG <ul><li>Joint Photographic Experts Group. </li></ul><ul><li>Good: </li></ul><ul><ul><li>Smooth shaded objects with blurry edges. Photos. </li></ul></ul><ul><li>Bad: </li></ul><ul><ul><li>Crisp block images fixed colours. Cartoons. </li></ul></ul><ul><li>How it works </li></ul><ul><ul><li>Uses knowledge about how the eye sees to compress the image. </li></ul></ul><ul><ul><li>Uses the Discrete Cosine Transformation (DCT) to convert to frequency information and throw away sharp frequencies. </li></ul></ul><ul><ul><li>8x8 blocks in the image </li></ul></ul>
  22. 22. JPEG <ul><li>Lossy compression – choose how much to throw away. </li></ul><ul><li>JPG not designed for this sort of image </li></ul><ul><li>Notice the blocky patches </li></ul>20% PNG 2% 100% SVG JPEG 0.72 3.52 9.67 3.52 0.76
  23. 23. GIF vs JPEG
  24. 24. Why not just JPEG <ul><li>No transparency. </li></ul><ul><li>The compression is &quot;lossy&quot;; i.e. you can't get back what you throw away. </li></ul><ul><li>Colours &quot;bleed&quot; esp. on straight edges. </li></ul><ul><li>Compression not very effective on blocky computer generated images. </li></ul><ul><li>Other alternatives gif and png, and possibly vector graphics. </li></ul>
  25. 25. Vector Images <ul><li>Describes the image </li></ul><ul><li>Very good for scaling. </li></ul><ul><li>Easily controlled and animated. </li></ul><ul><li>Easy to generate from programs. </li></ul><?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.0//EN&quot; &quot;http://www.w3.org/TR/2001/REC-SVG- 20010904/DTD/svg10.dtd&quot;> <svg xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; width=&quot;200&quot; height=&quot;200&quot; viewBox=&quot;0 0 100 100&quot;> <title>Demonstration of SVG with a smile</title> <circle cx=&quot;30&quot; cy=&quot;30&quot; r=&quot;28&quot; fill=&quot;none&quot; stroke=&quot;blue&quot; stroke-width=&quot;1&quot; /> <circle cx=&quot;20&quot; cy=&quot;22&quot; r=&quot;3&quot; fill=&quot; skyblue &quot; stroke=&quot;black&quot; stroke-width=&quot;1&quot; /> <circle cx=&quot;40&quot; cy=&quot;22&quot; r=&quot;3&quot; fill=&quot; skyblue &quot; stroke=&quot;black&quot; stroke-width=&quot;1&quot; /> <path d=&quot;M 15,38 a20,20 0 0,0 30,0&quot; style=&quot;fill:none; stroke:red; stroke-width:1&quot; /> </svg>
  26. 26. SVG <ul><li>Scalable Vector Graphics </li></ul><ul><li>XML format. </li></ul><ul><li>Supported in Firefox – Not IE6. </li></ul><ul><li>Can be animated and/or made to respond to user input using Javascript. </li></ul><ul><li>Lots of primitive shapes </li></ul><ul><ul><li>'rect', 'circle', 'ellipse', 'polygon' </li></ul></ul><ul><ul><li>'line', 'polyline' </li></ul></ul><ul><ul><li>Path – arbitrary stuff </li></ul></ul><ul><ul><li>Attributes and style information </li></ul></ul>
  27. 27. Flash <ul><li>Initially entirely vector graphics. </li></ul><ul><li>Including bitmaps as objects. </li></ul><ul><li>In version 8 per-pixel operations. </li></ul><ul><li>Requires a plug-in to run. </li></ul><ul><li>Very pretty sites </li></ul><ul><li>Usability issues slowly being overcome </li></ul><ul><li>Massive amount to learn </li></ul><ul><ul><li>Flash has a lot of structure and internal information </li></ul></ul><ul><ul><li>Scripting and interaction takes time to learn </li></ul></ul><ul><ul><li>Not covered in this course </li></ul></ul>
  28. 28. Adding Images <ul><li>Work out the size of your page + images </li></ul><ul><li>Work out how long that will take to load across a 56K modem </li></ul><ul><li>If it's longer than 30 seconds, that's too long </li></ul><ul><li>Mobile phones </li></ul><ul><ul><li>Vodafone 1c per K </li></ul></ul><ul><ul><li>Telecom 5c per K (authorised 1c per K) ‏ </li></ul></ul><ul><li><img> tag </li></ul><ul><ul><li>src – the location of the picture </li></ul></ul><ul><ul><li>alt – the alternative name if the image is missing </li></ul></ul><ul><li>CSS </li></ul><ul><ul><li>Image position and display controlled with CSS </li></ul></ul>
  29. 29. Downloading <ul><li>Size of image: </li></ul><ul><ul><li>200 pixels x 200 pixels, </li></ul></ul><ul><ul><li>40,000 pixels with 3 bytes per pixel = 120,000 Bytes = 120KB </li></ul></ul><ul><li>Modem maximum = 56Kbits / second </li></ul><ul><li> = 7KBytes / second </li></ul><ul><li>120KB / 7KB/s = 17 seconds to download </li></ul><ul><li>basically uncompressed files are big. </li></ul>
  30. 30. Summary <ul><li>Use the right format for an image </li></ul><ul><ul><li>Photo = JPEG </li></ul></ul><ul><ul><li>Cartoon = GIF or PNG </li></ul></ul><ul><li>Think about file size. </li></ul><ul><li>Think about image size </li></ul><ul><ul><li>Reducing width and height to 1/x original size reduces number of pixels to 1/x 2 . </li></ul></ul><ul><li>Think about resolution. </li></ul><ul><li>Think about ownership </li></ul><ul><ul><li>Ethics lecture. </li></ul></ul>11/09/07 (SFDV2001:14)Graphic Formats