Digital Images are represented by manipulating this…

And this….

Meaning… Off

And…. On

Or rather.. 0zero And 1One (In fact this is true for everything we see in a computer system!)

1 Bit Images Use a single bit to represent each pixel (dot on the screen) 00101

Use more bits and display as a grid… The following image is 61 pixels wide by 57 pixels high

Quick Calculation of File Size Image width 800 pixels Image height 600 pixels 1 pixel = 1 bit, so image is 800 * 600 bits which is bits or divided by 8! (8 bits in a byte) gives us 60,000 bytes

Make the grid larger and pixels smaller… Here we have increased the image resolution by using more dots per inch (dpi) Increasing dpi means we are cramming in more dots per area of image.

This image is 512 pixels wide by 512 high This type of image may be referred to as a binary image since each pixel is stored as a single zero or one This kind of picture is also called a 1 bit monochrome image since it has no colour content

8 Bit Grey Scale Images Representing shades of grey… Now 1 pixel = 8 bits

200 & Fifty 6 Shades of Grey

File Size Calculations 800 x bit image = 480,000 bytes 800 x 600 = 480,000 pixels 1 pixel = 1 byte thus 480,000 bytes 8 x larger than 1 bit system

File Size Calculations 800 x bit colour = 1,440,000 bytes 800 x 600 = 480,000 pixels 1 pixel = 3 bytes thus 1,440,000 bytes 24 x larger than our first image (24 bit colour formats – JPEG, BMP)

24 Bit Colour Files getting larger We can now represent 16 million colours The human eye can only see 10 million of them Extra colours useful for image processing and special effects Colour resolution is the number of colours a single pixel may display

8 bit Colour Images and Look up Tables PixelRedGreenBlue 1 RGB(0,0,255) 0 (1 byte) 255(1 byte) 2 RGB(0,0,255) 0 (1 byte) 255(1 byte) 3 RGB(0,0,255) 0 (1 byte) 255(1 byte) 4 RGB(0,0,255) 0 (1 byte) 255(1 byte) No of bytes = 12 Draw four blue dots RGB Example

PixelLookup table entry 11 (1 byte) Table EntryRedGreenBlue 1 RGB(0,0,255) 0 (1 byte) 255 (1 byte) Reducing the number of bytes in this example from 12 to 7 The GIF and PNG formats uses a look up table Lookup Table Using a Lookup Table

PixelLookup table entry 11 (1 byte) (1 byte) Table EntryRedGreenBlue 1 RGB(0,0,255) 0 (1 byte) 255 (1 byte) 2 RGB(255,0,0) 255 (1 byte)0 (1 byte) Lookup Table Only Record Unique Pixel Data

Graphic Formats We will now look at a few common file formats BMP GIF JPG PNG

The Windows BMP Format OK for Windows based systems Not web friendly Not good for MAC / UNIX / Mobile Devices

Graphics Interchange Format (GIF) Pronounce “giff” or “jiff” is a very popular format on the Web This format was originally devised by CompuServe

GIFF and Colour Limited to 256 colours, so conversion from 16 million colours to the 256 colour GIF format will result in loss of colour resolution Makes use of a colour lookup table to store the colour information It only stores the colours that are in the image

Dithering and GIFs Used to fool the human eye that there is more detail than there really is! A The original unchanged image B 1 bit monochrome with dithering C 1 bit monochrome without dithering – note the loss of detail D 8 bit colour with dithering – note the speckled effect which is common to this process AB CD

GIFF, Dithering and Banding Without dithering a GIFF file tends to develop harsh transitions called banding.

Interlacing Images on the web normally drawn from top left to right down the image The GIFF format allows for a technique called interlacing which displays the image every eighth line at a time.

We get an idea of what the image looks like without downloading the whole file (useful for low bandwidth)

GIFF Transparency

Joint Photographic Experts Group JPEG / JPG A compression standard best applied to photographs or complex shading / lighting effects Stores a complete black and white version of the image and most of its colour information Not all of the colour information is retained, this makes JPEG a “lossy” format as some of the original image information is lost, especially in highly compressed files

When using graphics with large areas of similar colour the GIF format is a better choice.

Zoom in… The GIF is 2K, the JPEG is 15K.

However in photographs the JPEG is better

PNG Format Offers better compression than GIF – ranging from 10 – 30 % Is a lossless format so whatever colour data in the original will be present when viewed in the browser Is not limited to 256 colours with full RGB capabilities Supports interlacing Supports transparent colours