2.1 Si23_03 SI23 Introduction to Computer Graphics Lecture 2 - Images

2.2 Si23_03 Course Outline Image Display URL GIMP colour 2D vector graphics URL SVG Viewer lines, areas graphics algorithms interaction VRML viewer 3D Graphics URL surfaces viewing, shading Graphics Programming OpenGL API animation

2.3 Si23_03 Course Outline – Images and Colour n Image creation, manipulation and display n Colour URL GIMP colour Image Display

2.4 Si23_03 Graphics Display Hardware - Cathode Ray Tube phosphor coated screen electron beam heated cathode focusdeflection plates Basic technology for workstation screens is the cathode ray tube Beam scans across screen in series of lines - 60 times per second

2.5 Si23_03 Colour Raster Scan Display n Colour CRT red green blue metal mask Colour composed as combination of RED, GREEN, BLUE

2.6 Si23_03 Colour Frame Buffers Today most colour displays have 24bit frame buffers or pixmaps. So each pixel has a 24bit colour value associated with it - 8 bits for R,G,B red gun green gun blue gun

2.7 Si23_03 Colour Look Up Table (CLUT) Colour Palette 8-bit frame buffer Pixel value (=167) red green blue 24-bit colour table Pixel value acts as an index into the look up table. This allows 256 (=28) on-screen colours from a palette of 16.7 million To save on memory costs, some displays use a look-up table …

2.8 Si23_03 Gamma Correction n For CRT displays, brightness is not a linear function of the drive signal n Instead it is related by: Brightness = (Signal) Typical value for is 2.2 n Thus displays will provide gamma correction of the red, green and blue signals to give the expected uniform effect Note: assumes signal in range [0,1]

2.9 Si23_03 Homework n How does colour work for LCD displays??

2.10 Si23_03 Images n We can generate images in a variety of ways… n … and we can subsequently process them in order to … n The GIMP will help us do many of these things n Fill in the answers!

2.11 Si23_03 Image Formats n Large number of formats have emerged over the years n Why? n Which are in common use? n Use a couple of test pictures

2.12 Si23_03 Silicon Graphics RGB Format n File begins with a header which has the following information: – xsize, ysize - dimensions of image – zsize : 1 for 8-bit (colour index); 3 for 24-bit colour – colour map flag: indicates image or colour map n The rest of the file contains the data – for 8-bit, each pixel represented as 1 byte, so there are ysize scan lines, each of xsize bytes – for colour, three single images (for R, G, B) are stored, one after the other.

2.13 Si23_03 Image Sizes n The picture of Banks Peninsula is 2472 by 1704 pixels – as RGB image it is 12 Mbytes n The diagram with the square is 256 by 256 pixels – As RGB image it is 193k bytes

2.14 Si23_03 Compression - RLE Consider the triangle on right. Suppose 0 represents black and 1 represents white. The image file will look like, for each scan line: It would be more efficient to store as runs of pixel values: 12*0,14*1,10*0 This is known as Run Length Encoding (RLE) and is an option in the RGB image file specification.

2.15 Si23_03 RLE Compression n The NZ photo reduces from 12 Mbytes to 9.5 with RLE compression n Is this what youd expect? n The square reduces from 193k to 13k with RLE compression n Is this what youd expect?

2.16 Si23_03 Image Formats n RGB is one of a large number of image formats – MS Windows bitmap for PC applications (BMP format) – GIF, JPEG, PNG are widely used across different platforms n RLE is just one of a number of compression techniques - different formats use different compression methods

2.17 Si23_03 Image Formats - GIF n GIF (Graphics Interchange Format) – probably the most common image format – developed by CompuServe Inc – 8 bit colour indices point to entries in a colour table of size 256 – thus in uncompressed form, we have header comprising colour table, followed by rows of data, one byte per pixel – rows stored as 0,8,16,..; 4,12,20,..; 2,6,10,..; 1,3,5,... this interlacing gives progressive image display – 24 bit colour images not supported – Animated GIFs a very useful feature (used with care)

2.18 Si23_03 LZW Compression n GIF uses the LZW (Lempel-Ziv-Welch) compression technique which has been subject of frequent legal battles -UNISYS and CompuServe claim to have patented it (so not supported fully in Windows GIMP) n Dictionary-based – frequently occurring patterns of data are identified and given code words which are shorter than the original pattern n For normal images, typically better than RLE; not good on noisy images (neither is RLE) n For file size comparison, see PNG later

2.19 Si23_03 Image Formats - PNG n PNG = Portable Network Graphics n Created as a successor to GIF, free of legal restrictions n Defined as a Web standard by W3C n.. And better than GIFs! n Key features: – Transparency – Gamma correction – Text – Interlacing – Filtering – Compression

2.20 Si23_03 PNG Features n Transparency – Alpha channel in addition to RGB n Gamma Correction – Store the gamma value at creation – Correct at display time – Can you work out the correction formula?

2.21 Si23_03 PNG Features n Text – Why would it be useful to associate text with an image? n Interlacing – 2d interlacing – 7 passes (Adam7) – Why is this useful?

2.22 Si23_03 PNG Features n Filtering – Simple operator to promote good compression – Eg sub filter replaces pixel values on scan line, with differences from predecessor n Compression – Uses LZ77 approach (recall from SI11) – Plus Huffman encoding (also from SI11) – Used in gzip Encoding is: interlace, filter, compress

2.23 Si23_03 Example n NZ photo does not compress particularly well – Uncompressed 12 MB – RLE 9.5 MB – PNG 4 MB n Square compresses outstandingly well – Uncompressed 193 kB – RLE 13 kB – PNG 1 kB

2.24 Si23_03 Image Formats - JPEG File Interchange Format (JFIF) n Developed as an international standard interchange format using a compression method developed by Joint Photographic Experts Group (JPEG) n Supports 24 bit colour, or greyscale – but not palette n Copes with noisy data, so can handle scanned images

2.25 Si23_03 JPEG Compression n Discrete Cosine Transform (DCT) applied to 8x8 subblocks of image – DCT transforms data values to a new set of 64 data items (in a frequency space) – ordered in importance (1st value represents average over subblock, etc, values at end represent high frequency, ie noise) – safe to discard these noise terms and store only the early terms from the DCT

2.26 Si23_03 JPEG Compression n Resulting values are then compressed using Huffman encoding n Free of any legal problems n Known as lossy compression, because we cannot recreate exact original image (cf RLE and LZW which are lossless)

2.27 Si23_03 JPEG Quality Control n JPEG allows user to tune the quality of encoding by a quality setting – corresponds to ignoring values in the DCT – Q-factor from 0 to 100 (100 = high quality) n Suggested technique: – encode using Q factor of 75%, decode and redisplay – if defects seen, increase Q and re-encode – if acceptable, decrease Q until just acceptable

2.28 Si23_03 Example n For the NZ photograph, we have outstanding compression – Uncompressed 12MB – RLE 9.5MB – JPEG 339kB

2.29 Si23_03 Image Transfer across WWW - Summary n GIF format still predominates – lossless, 8-bit palette-based, LZW compression, legal status in doubt, supported by all browsers n PNG – lossless, 8-bit palette or 24 bit colour, non-patented compression, transparency, gamma correction, 2d interlacing, filtering n JPEG – lossy, 24-bit, non-patented compression n Choice: – PNG for synthetic images – JPEG for photographic images

2.30 Si23_03 Reading More n The source of PNG information – n Test your browser support for PNG transparency – n What is difference between GIF87a and GIF89a?