Image Representation

Introduction

In computing, all data is logically represented in binary. This is true of images as well as numbers and text. However, an important distinction needs to be made between how image data is displayed and how it is stored. Displaying involves bitmap representation, whereas storing as a file involves many image formats, such as jpeg and png.

How image data is displayed

Resolution and DPI

Image data is always displayed on a computer (or digital device) screen as a bitmap. This consists of a rectangular arrangement of small coloured squares called pixels arranged in horizontal rows. Every image has a resolution which is measured in the number of pixels per row, its width, and the number of pixel rows, its height. For example an image with a resolution of 800 by 600 pixels would have 800 pixels in each row and 600 of these rows. How big the image appears on screen, as measured in inches or centimeters is another matter. This depends on the dpi or ppi (dots per inch = pixels per inch) of the screen. For example, the dpi of a typical PC monitor is 72dpi; the dpi of an iPad3 is 264 dpi. This means the same image will display about 1/3 rd as big on the iPad as it will on the PC. An advantage of the iPad's high dpi is images will appear to be very sharp because the pixel size is so small.

Pixels are so small they are hard to see with the human eye. Below is an image at normal zoom (100%) and part of it displayed at 12 times its normal size (1200%). The individual pixels can be seen clearly in the right-hand image.

Normal (resolution: 300x205)	1200% (resolution: 334x282)

The RGB system

The number of bits used to store individual pixel information has increased as the graphics and software systems of computers have become more powerful. 24 bit storage is very common today. Ten years ago 16 bit was the norm. 15 years ago 8 bit was the norm. This meant 2⁸or 256 colours could be displayed. A colour palette of 256 was decided upon and was called the web safe palette. See image below. The web safe palette actually contained less than 256 colours as some of the original 256 were reserved for the operating system. 216 are displayed in the graphic below. Some image editing programs still display this palette when a colour picker is opened.

The increase in RAM size and CPU speed have also enabled the displaying of large images to happen quickly. Also, increases in RAM and hard disk size have meant it is feasible to store Mega-pixel images without resizing them to something smaller and more space efficient. Generally speaking halving an image's dimensions will cut its file size by four. This is because 1/2 x 1/2 = 1/4, so the resized image has 1/4 of the original number of pixels.

As mentioned, today's computers often use a 24 bit colour system. The common colour system used for computer displays is called the RGB system. RGB stands for red, green and blue. The colour of a pixel is a mixture of different strengths of these three colours mixed together. For example, pure red is full strength red with no green or blue added. Eight bits can represent 256 different strengths of red, green or blue, from 0 to 255. Taken together there are 256x256x256 or 16,777,216 different combinations or colour tones. This is more than the human eye can discern. Some computer systems support 32 bit colour. This is a 4 byte system where 3 bytes are used for the red, green and blue and the remaining byte is used to set (alpha) transparency of the pixel.

The following link points to a colour picker page that allows the user to change the amounts of red, green and blue in a colour mix. Both decimal and hex values for colours are shown and can be adjusted. Also, standard 'web safe' colour names can be chosen: RGB colour

Varying bit depth

The number of bits per pixel that are used to store image data, the bit depth, can be varied. Naturally enough the more bits used the greater the range of colours that can be used. For example using one bit only two colours can stored because the single bit can only be 0 or 1 (2¹ = 2).

The table below shows the information for the flower image saved in the bitmap format at various bit depths. Click on an image to see the original version and the image information. As can be seen the larger the bit depth the better the colour quality as the number of unique colours is directly related to the bit depth. The formula is: number of unique colours = 2^{bit depth}

1 bit	4 bit
16bit	24bit

Image file size

As well as having pixel dimensions an image has a file size measured in Kilobytes (2⁸ or 1024 bytes) or Megabytes (2¹⁶ or 1024 x 1024 = 1048576 bytes). This can be calculated for an image by multiplying its width by its height by its bit depth and then dividing by 8 to get the size in kilobytes.

For the 1 bit flower above the Maths is: (675x522x1)/8 = 44,043.75Kb

For the 24bit version the Maths is: (675x522x24)/8 = 1,057,050Kb or just over 1 Megabyte. This is about 30 times bigger than the 1 bit version.

Image resizing

When an image is resized the program doing the resizing uses a particular algorithm to add more pixels into the image if it is being resized up, or to take away pixels if it is being resized down. The overall objective is to have the picture looking the same, just larger or smaller as the case may be.

How image data is saved or stored

Images data can be saved or stored in many different formats. The most common are bitmap, jpeg, gif and png. Each have their strengths and weaknesses. Whatever format is used an image is displayed as a bitmap on a computer screen. A bitmap is basically a 2 D grid of coloured pixels.

Bitmap
A bitmap image has the file extension bmp. Image data is saved to file in an uncompressed format at a particular bit depth. This is usually 24 bit. This enables millions of colours to be displayed. Because image data is not compressed when saved to file, file sizes can be very big. This makes them unsuitable to be used on web pages, even though web browsers will render them. Bitmaps are the native file format for images made with the MS Paint program.
For more information look at this Wikipedia page

Jpeg
Jpeg stands for Joint Photographic Experts Group. It is a 24 bit format invented specifically for storing photographs. Being 24 bit millions of colours can be displayed. It is also a lossy compressed format. This means image data is stored in a compressed form, and some of the original image data is discarded when it is saved. When saving, a quality setting can be chosen. Maximum quality is 100. Images will still look good on a web page saved at a quality of 60. A lower quality setting results in a smaller file size. Jpegs are the predominant format for images on web pages. Also, most digital cameras save images in this format for reasons of space efficiency. For more information look at this Wikipedia page

Gif
Gif is a lossless format that uses a colour palette of 256 colours (or less). This means it is best suited for images that do not contain complex colour gradations like photographs do. Images with blocks of plain colours suit this format. The colours in the colour palette changes according to the colours in the image, but can never be more than 256. A Gif image can be optimised (made smaller) by removing some of the colours in its palette. Photoshop's print preview has a facility to do this. Gif images also allow one colour in the palette to be transparent. Jpegs do not allow this. A type of Gif image format allows for animation.
For more information look at this Wikipedia page

Png
Png or Portable Network graphics is the native format for the Adobe Fireworks program. It has a lot in common with the Gif format because it can support transparency and is a lossless saving format. It comes in two versions, 8 bit and 24 bit. The 24 bit version can support many more colours than Gif - about 16 million. The 8 bit version uses many fewer, so like Gif it is suitable for plain colours rather than tonal gradations. File sizes compared to jpegs are large when saving photos in this format, even though compression is an option when saving. For more information look at this Wikipedia page

Proprietary formats
Image manipulation software often have their own proprietary formats for storing image data. For example Adobe Photoshop has a psd format that not only stores image information but also the layers that the information is on. This results in large files and the format is not useful for generally displaying images, though a program such as Irfanview can display psd images.

Jpeg EXIF data
Many digital cameras store taken images using the jpeg format because it is so space saving. In addition to storing image data extra information about camera settings is recorded. This is called EXIF data. The Exif data for the image below is on its right. Note such things as camera name, X and Y resolution, shutter speed, and F stop setting.

File: - C:\Users\Peter\Downloads\hellicopter.jpg
Make - NIKON CORPORATION
Model - NIKON D60
Orientation - 1 (top left)
XResolution - 300
YResolution - 300
ResolutionUnit - 2 (inch)
Software - Ver.1.01
DateTime - 2011:03:18 08:46:59
YCbCrPositioning - 2 (datum point)
ExifOffset - 216
ExposureTime - 10/8000 seconds
FNumber - 5.6000
ExposureProgram - 0
ISOSpeedRatings - 200
ExifVersion - 221
DateTimeOriginal - 2011:03:18 08:46:59
DateTimeDigitized - 2011:03:18 08:46:59
ComponentsConfiguration - 0 3 2 (CrCb)
CompressedBitsPerPixel - 4 (average)
ExposureBiasValue - 0.0000
MaxApertureValue - F 5.66
MeteringMode - 5 (multi-segment)
LightSource - 0 (auto)
Flash - 0 (no flash)
FocalLength - 200.0000 mm
UserComment - ASCII
SubsecTime - 858783744
SubsecTimeOriginal - 858783744
SubsecTimeDigitized - 858783744
FlashPixVersion - 010
ColorSpace - 1 (sRGB)
ExifImageWidth - 0
ExifImageHeight - 0
InteroperabilityOffset - 33382
SensingMethod - 2 (other)
FileSource - 768 (other)
SceneType - 256 (other)

Maker Note (Vendor): -