Displaying colours Images on the web Different kinds of graphic images File compression gifs and...

Displaying colours Images on the web Different kinds of graphic imagesFile compressiongifs and jpegs Colours for the webExam questions

Digitising Media

3

The subtractive primaries (pigments)

Ink combines to black (dark

brown)

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

The additive primary colours

Light combines to white

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

redwhite

green

blue

7

Putting them together(oversimplified)

Displaying colours Images on the web Different kinds of graphic imagesFile compressiongifs and jpegs Colours for the webExam questions

Digitising Media

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

Image size vs. File size

For the web, when we consider download times, the issue is primarily file sizeLarge 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

Displaying colours Images on the web Different kinds of graphic imagesFile compressiongifs and jpegs Colours for the webExam questions

Digitising Media

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

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

More about kinds of graphics

Draw packages – create vector graphics

lines, rectangles, circles mathematical / geometric objects

Resolution independent

Displaying colours Images on the web Different kinds of graphic imagesFile compressiongifs and jpegs Colours for the webExam questions

Digitising Media

16

To reduce file size,compression is needed

File sizes for transmission (internet) or storage can be largeA typical colour image (from a digital camera for example)

1024 x 768 pixels24-bit ‘true colour’

= 2.4 MbytesFor video

24 frames/second640 X 480 pixels24-bit colour

= 77 Gbytes/hour

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

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

Displaying colours Images on the web Different kinds of graphic imagesFile compressiongifs and jpegs Colours for the webExam questions

Digitising Media

20

GIFs

Especially effective at dealing with large horizontal bands of a single colour

256-colour (8-bit) images

LosslessGraphics Interchange Format, from Compuserve (patented)

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

jpeg vs gif

http://www.wfu.edu/~matthews/misc/jpg_vs_gif/JpgVsGif.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

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

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

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

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

Sometimes animated gif are useful

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

Displaying colours Images on the web Different kinds of graphic imagesFile compressiongifs and jpegs Colours for the web Exam questions

Digitising Media

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

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

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

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

This is just an introduction to hex.

We’ll be going over this a couple of additional

times.

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

Anti-aliasing

Apparent smoothing out of the edges of images is called:Anti-aliasing Anti-aliasing

The 'jaggies'

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

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

To see for yourself:

Blow up something a fairly great amount. Eventually the underlying discontinuous range becomes visible.

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

Reference/resource/origin

For the images in this presentation:http://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.html [accessed 26-10-04, last accessed 15-10-07]

http://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

Displaying colours Images on the web Different kinds of graphic imagesFile compressiongifs and jpegs Colours for the web

Exam questions

Digitising Media

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]

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

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 abetter choice of image format? When would a JPEG be a better choice? [3 marks]

44

Practical work on this

You’ll be doing practical work with image compression in the Terminal session in week 6.

45

On your own

In the textbook – read about other methods of digitising multi-media – sounds, moving images, sounds and images together

47