2. Displaying colours Images on the web Different kinds of graphic images File compression gifs and jpegs Colours for the web Exam questions Digitising Media

3. 3 The subtractive primaries (pigments) Ink combines to black (dark brown)

4. 4 Colour-printing  Printers create colour by subtracting. Colour printers use Cyan Magenta Yellow blacK CMYK  Although black can be achieved by adding colours together, in fact, it’s four colour printing with black as a separate colour) Reflectance CMYK

5. 5 The additive primary colours Light combines to white

6. 6 How monitors work  Monitors create colour by adding light. They use red, green and blue light. RGB  White is achieved by adding red and blue and green together (shining a light on a wall) Luminance black red white green blue

7. 7 Putting them together (oversimplified)

8. Displaying colours Images on the web Different kinds of graphic images File compression gifs and jpegs Colours for the web Exam questions Digitising Media

9. 9 Images  Use the smallest file size that gives a satisfactory image. The right choice improves download characteristics and appearance  Choose the correct file types for images: Different sorts of images should have different file types and some file types should not be used on the web  Img tags should have sizes (attributes of height and width) – This improves the user experience by allowing the browser to render the page correctly even when the page is downloading

10. 10 Image size vs. File size For the web, when we consider download times, the issue is primarily file size Large file sizes worsen users experiences of the web because they take a long time to download. A quick-to-download page usually means that any images on it have been made quite small The size of the image on the screen does not necessarily reflect the size of the file Example

11. Displaying colours Images on the web Different kinds of graphic images File compression gifs and jpegs Colours for the web Exam questions Digitising Media

12. 12 Two Kinds of Computer Graphics  Raster (‘bit maps’) – pixel by pixel description of the image – array (1-bit, 8-bit (usual), 24 or 32)  Vector – mathematically described images ('line from a to b' | 'a line through point a with slope c') described as ‘resolution independent graphics’

13. 13 More about kinds of graphics  Paint packages – create bitmapped images another term: raster graphics Scanning images create bitmaps as well. Other example: photographs in digital formats, air- brushed images

14. 14 More about kinds of graphics  Draw packages – create vector graphics lines, rectangles, circles  mathematical / geometric objects  Resolution independent

15. Displaying colours Images on the web Different kinds of graphic images File compression gifs and jpegs Colours for the web Exam questions Digitising Media

16. 16 To reduce file size, compression is needed File sizes for transmission (internet) or storage can be large A typical colour image (from a digital camera for example) 1024 x 768 pixels 24-bit ‘true colour’ = 2.4 Mbytes For video 24 frames/second 640 X 480 pixels 24-bit colour = 77 Gbytes/hour

17. 17 File compression  Get rid of redundant information – file size gets smaller without loss of information. (restore the information at a later time if needed – for example, a long strip of solid colour, could be stored as a sequence of bits or stored in a more efficient manner  Other ways of compressing file information, loses information but information that we don’t notice being gone.

18. 18 Two types of file compression “lossless” – same amount of information, smaller file size (eliminate redundancy) “lossy” – loss of information but we may not notice or care

19. Displaying colours Images on the web Different kinds of graphic images File compression gifs and jpegs Colours for the web Exam questions Digitising Media

20. 20 GIFs Especially effective at dealing with large horizontal bands of a single colour 256-colour (8-bit) images Lossless Graphics Interchange Format, from Compuserve (patented)

21. 21 JPEG (aka.jpg) “Lossy” – it loses information, but if this loss is barely perceptible or not perceptible at all, a great significant reduction in file size can be achieved. 24-bit (16.7 million colours) Joint Photographics Experts Group

22. 22 jpeg vs gif http://www.wfu.edu/~matthews/misc/jpg_vs_gif/Jpg VsGif.html http://www.wfu.edu/~matthews/misc/jpg_vs_gif/Jpg VsGif.html photo comparison and graphics comparison – image quality and file size http://www.siriusweb.com/tutorials/gifvsjpg/ graphics and photos comparisons Jpeg for photos and other continuous toned images Gifs for large swatches of single colours

23. 23 Other forms for web.png – a replacement (in some ways an improvement) on gif, patent-free with some nice technical properties..svg – scalable vector graphics – up or down to any size of image – small file size, additional processing load on client machine _______________________________ Avoid device-dependent formats unsuitable over the Internet.bmp – limited to Windows.pict – limited to MAC

24. 24 More about gif, png, jpeg You can create interlaced gif and png images – when a low-resolution version of an image appears as soon as the image begins downloading. Similarly you can create progressive jpg, which have the same effect. (-) The file size of the interlaced (or progressive) image is larger and takes longer to download (+) The user usually gets to see something of the image more quickly

25. 25 Transparency in gifs pngs Transparency is when you allow the background to show through. The logo on this page for example is a transparency (Technically one colour on the palate is reserved, the browser (or other application) is instructed in displaying the image to show the colour of the background You can’t achieve this with jpg. You can with gifs and pngs

26. 26 Animated gifs Animation is a sequence of images, shown sequential giving a sense of movement. Allowed in the gif format. (other formats don’t allow it) (you can achieve animation in other ways – through Flash and through Java)

27. 27 Sometimes animated gif are useful

28. 28 Tools for compressing images - optimising graphics These tools have the capability to compress jpg’s and gif’s. You get to see the quality of the image before you commit yourself to that level of compression, so you know the file size + the image quality Choosing an appropriate balance of image quality and file size for the purposes that the image will be used eg thumbnails Paint Shop Pro is available on the Public Desktops

29. Displaying colours Images on the web Different kinds of graphic images File compression gifs and jpegs Colours for the web Exam questions Digitising Media

30. 30 Using the right colours for the web  Different platforms show colours differently – sometimes only a little, sometimes very differently  If you choose your colours for the web correctly, the differences between different platforms and different browsers will be very small

31. 31 Web-safe colours To avoid these problems, choose ‘browser- safe colours’, colours that look basically the same on different platforms. (8 bit / hexadecimal colours) http://www.w3schools.com/html/html_colors.asp

32. 32 How to designate colours By name By number – hexadecimal For details see: http://www.w3schools.com/html/html_colors.asp For the Web via the internet, use browser- safe colours. (different browsers and platforms may display colour values differently especially if one uses names.) What names work? What is a hexadecimal ?

33. 33 Computer speak: Hexadecimal Hexadecimal numbers use a base 16. Decimal use base 10 (‘deci’ means 10; ‘hex’ means 6 – ‘hexadeci’ 16) Binary use base 2. Why base 16?  Human readable and useable.  Easy to convert to binary (which is what machines read and use) http://kb.indiana.edu/data/afdl.html http://kb.indiana.edu/data/afdl.html This is just an introduction to hex. We’ll be going over this a couple of additional times.

34. 34 Hexadecimal colours HTML colours are specified with three pairs of hex digits, preceded by a hash sign. Each pair of digits represents the quantity of red, green & blue that make up the colour. Thus: –#FFFFFF refers to white –#000000 refers to black –#FF0000 refers to red There are lookup tables!

35. 35 Anti-aliasing Apparent smoothing out of the edges of images is called: Anti-aliasing Anti-aliasing The 'jaggies'

36. 36 Anti-aliasing (2)  Anti-aliasing – blend hues of the colours Many graphics programs allow you to choose whether images should be anti-aliased

37. 37 Dithering Dithering can be used as a general way to create illusions of colours and shades – let’s it seem as if there are more colours or shade than there really are ‘application dither’ occurs when an application (PhotoShop, PaintShopPro … ) creates an image in a format like gif png-8 from a original with more colours ‘browser dither’ occurs when a web-browser using an 8- bit colour display (256 colours) shows an image with more colours.

38. 38 To see for yourself: Blow up something a fairly great amount. Eventually the underlying discontinuous range becomes visible.

39. 39 Quick terminology review  Anti-aliasing – a way to create the illusion of a sharp edge (where in fact its actually jagged) by taking an number of intermediate colours  Dithering – a way to use a limited palate of colours to create a wider range of colours and tones (dithering is also a term in sound technology for a similar phenomenon)

40. 40 Reference/resource/origin For the images in this presentation: http://www.paris-pc- gis.com/MI_Enviro/Colors/color_models.htmhttp://www.paris-pc- gis.com/MI_Enviro/Colors/color_models.htm [accessed 26- 10-04, last accessed 15-10-07] http://www.rgbworld.com/color.htmlhttp://www.rgbworld.com/color.html [accessed 26-10-04, last accessed 15-10-07] http://www.help4web.net/webmaster/Color/BasicColorWheel. htmlhttp://www.help4web.net/webmaster/Color/BasicColorWheel. html [accessed 26-10-04, last accessed 15-10-07] And on slides where they were presented with URL or copyright information

41. Displaying colours Images on the web Different kinds of graphic images File compression gifs and jpegs Colours for the web Exam questions Digitising Media

42. From the 2009 past exam paper Colours and images (i) Monitors create colour by adding light. How many colours do monitors use? What are they? [1 mark] (ii) Printers create colour by subtracting light. How many colours do printers use? What are they? [1 mark] (iii) What is the meaning of hexadecimal? What colours do the following hexadecimal codes produce? (1) #000000 (2) #FFFFFF (3) #888888 [2 marks] (iv) What would be a good file type for a photograph? [1 mark]

43. From the 2007 past exam paper: (b) What colours are represented by the following hexadecimal codes: #0000FF #FFFFFF [1 mark] (c) Explain the differences between bitmap and vector image formats. Explain the difference between a lossy and a lossless compression algorithm? [3 marks] 43

44. From the 2006 past exam paper: (c) What colours are represented by the following hexadecimal codes: (i) #FF0000 (ii) #222222 (iii) #FFFFFF [2 marks] (d) What are the differences between a GIF and a JPEG? When would a GIF be a better choice of image format? When would a JPEG be a better choice? [3 marks] 44

45. Practical work on this  You’ll be doing practical work with image compression in the Terminal session in week 6. 45

46. On your own  In the textbook – read about other methods of digitising multi-media – sounds, moving images, sounds and images together

47. 47