Digital Images are represented by manipulating this…
And this…
.
Meaning…
Off
And…
.
On
Or rather ..
0 zero
And
1 One
(In fact this is true for everything we see in a computer system!)
1 Bit ImagesUse 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 SizeImage width 800 pixelsImage height 600 pixels
1 pixel = 1 bit, so image is 800 * 600 bits which is
480000 bitsor divided by 8! (8 bits in a byte)
gives us60,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 ImagesRepresenting shades of grey…
Now 1 pixel = 8 bits
200 & Fifty 6 Shades of Grey
File Size Calculations800 x 600 8 bit image = 480,000 bytes
800 x 600 = 480,000 pixels1 pixel = 1 byte thus 480,000 bytes
8 x larger than 1 bit system
File Size Calculations800 x 600 24bit colour = 1,440,000 bytes
800 x 600 = 480,000 pixels1 pixel = 3 bytes thus 1,440,000 bytes
24 x larger than our first image
(24 bit colour formats – JPEG, BMP)
24 Bit ColourFiles 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
Pixel Red Green Blue
1
RGB(0,0,255)
0 (1 byte)
0 (1 byte)
255 (1 byte)
2
RGB(0,0,255)
0 (1 byte)
0 (1 byte)
255 (1 byte)
3
RGB(0,0,255)
0 (1 byte)
0 (1 byte)
255 (1 byte)
4
RGB(0,0,255)
0 (1 byte)
0 (1 byte)
255 (1 byte)
No of bytes = 12
Draw four blue dotsRGB Example
Pixel Lookup table entry
1 1 (1 byte)
2 1 (1 byte)
3 1 (1 byte)
4 1 (1 byte)
Table Entry Red Green Blue
1
RGB(0,0,255)
0 (1 byte) 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
Pixel Lookup table entry
1 1 (1 byte)
2 1 (1 byte)
3 1 (1 byte)
4 1 (1 byte)
5 2 (1 byte)
Table Entry Red Green Blue
1
RGB(0,0,255)
0 (1 byte) 0 (1 byte) 255 (1 byte)
2
RGB(255,0,0)
255 (1 byte) 0 (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 FormatOK 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 GIFsUsed to fool the human eye that there is more detail than
there really is!
A The original unchanged imageB 1 bit monochrome with ditheringC 1 bit monochrome without dithering – note the
loss of detailD 8 bit colour with dithering – note the speckled effect
which is common to this process
A B
C D
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