Web graphics

Derek Bridge

Department of Computer Science,
University College Cork

Web graphics

Aims:

• to learn the characteristics of computer monitors
• to learn the characteristics of computer images
• to appreciate some of the issues involved in using images on the web

Foreground image display dimensions

• You can include a width and height, either in the (X)HTML or in CSS, e.g.

  <img src="derek.jpg" alt="A photo of Derek giving a lecture" 
      width="200" height="100" />
  

• Class exercise: What's the advantage of specifying the width and height?
• The browser will scale the image (up or down) if the values you supply are not the same as the actual dimensions of the image
• Class exercise:
  • It is inadvisable to use this to scale down an image. Why?
  • It is inadvisable to use this to scale up an image. Why?

The RGB colour model in (X)HTML/CSS

• In the RGB colour model, amounts of Red, Green and Blue light are combined, additively, to produce other colours
• Numeric representations in (X)HTML/CSS:
  • percentages (0%-100%), e.g. rgb(100%,0%,0%)
  • decimal numbers in the range 0 to 255 (thus requiring 1 byte for each), e.g. rgb(255,0,0)
  • Class exercise:How many colours can we describe in this way?
  • hexadecimal numbers in the range 00 to FF, e.g. #FF0000 (abbreviation: #F00)

Computer monitors

• The screen is a grid of pixels
• A framebuffer is an area of memory (e.g. on a video card) that specifies the current colour of each pixel

Screen size

The length of the diagonal (e.g. 12 inches)

Screen resolution

The number of pixels per inch (e.g. 106 ppi), but often we're given just total pixels (e.g. 800 × 600, 1024 × 768)

Screen colour depth

The number of bits used in the framebuffer to specify the colour of each pixel (e.g. 24 bpp)

Direct colour

Most commonly, the framebuffer directly specifies the colour of each pixel

24-bit truecolour

8 bits for red, 8 for green, 8 for blue gives 2⁸ × 2 ⁸ × 2⁸ = 16,777,216 colours (millions)

32-bit truecolour

Same as 24-bit with 8 unused bits. Class exercise: Why is this popular?

8-, 12-, 15- and 16-bit direct schemes

Fewer colours but less memory: found on older hardware or handhelds

Direct colour

Indexed colour

• In indexed colour, the framebuffer contains an index into a colour lookup table (or palette)
• In 8-bit indexed colour, the table contains 2⁸ = 256 colours
• 1-, 2-, 3-, 4-, 5-, 6-, 8- and 12-bit indexed colour have been used
• For computer monitors, this is of no real relevance now: http://www.thecounter.com/

Indexed colour

Images

Two main representations:

Vector graphics images

Use mathematical equations to describe the image

• E.g. Scalable Vector Graphics (SVG)
• Example: polygons.svg
• Handled by Forefox, Opera, Safari, but not Internet Explorer (need a plug-in)

Bitmapped images (raster graphics images)

Specifies the colour of each pixel

Bitmapped images

• The image files specifies the colour of each pixel

Image dimensions

The width and height of the image in pixels
Class exercise: Will a 640 × 480 image be the same size in inches on all monitors?

Image file size

The number of pixels multiplied by the bits per pixel (determined by image colour depth)

Image colour depth

The number of bits used in the image to specify the colour of each pixel (e.g. 24 bpp)

Direct colour image formats

Indexed colour image formats

Shifting and dithering

What happens if a 32- or 24-bit truecolour image is displayed on a 16-bit highcolour monitor?

The colour values are shifted up or down to the nearest available values

What happens if a direct colour image (e.g. 32-/24-bit truecolour or 16-bit highcolour) is displayed on a 8-bit indexed colour monitor?

Either the colour values are shifted or dithering is used