Digital Graphics: Colour Resolution and Depth

Image Resolution

Image resolution is basically the amount of dots/pixels that an image contains to display the image and focuses on how much detail that an image is capable of holding. It is the amount of pictures that an image contains. An example of this would be if an image is 1000X1000 then you would multiply 1000 by 1000 to get 1000000 pixels. A television displays its output through pixels/ dots.

An image with high resolution will be a lot higher in quality and will appear a lot sharper. This is why high resolution images always look better in comparison to low resolution images. The higher the resolution of an image will mean the larger the file size.

An image that is low of resolution will appear pixalated and the quality will be very low. The higher the resolution of an image will determine the overall file size. An image that is low in resolution will be smaller in size, therefore making it more suitable for use on websites.
Images on websites usually have a resolution of 72dpi.

Images that are used for graphics and being printed usually have a higher resolution of at least 300dpi. Pixels/ dots can be displayed in many sizes such as 800 by 600. This means that the monitor will display 800 dots horizontally and 600 dots vertically. This means that on the screen their will be four hundred and eighty dots that are displayed. Resolution can be measured in either dpi or in ppi. Dpi stands for dots per inch and ppi stands for pixels per inch.

DPI and PPI bacically refers to the amount of dots or pixels that is displayed in every inch squared of the image. Below I have displayed two identical images. The only difference is that one of the pixels is displayed at a higher resolution of 300dpi and the other is displayed at 72dpi. The higher the resolution the better the image will be. This will however make the file size a lot larger so may not be suitable for websites.

With bitmap images each pixel will contain colour data that needs to be stored for every pixel. Therefore a high resolution bitmap image will be larger in file size.

With vector graphics this problem doe not occur. No matter how large you make a vector image it will always remain a small size. This is because vector files do not store information on each pixel instead they use mathematical equations to create the image.

Therefore image resolution is not an issue with vector graphic. No matter how big we make a vector graphic image the resolution will still always be very high.

Below is a video on image resolution

Below is an example of different colour resolutions. 8 bit, 10 bit and 16 bit.

Colour Depth

Colour depth is basically how much different colours that there are in an image. A higher resolution image will mean the image will have more colours and therefore it will have a better colour quality. it is a representitive of how many colours there are in an image.

Their are four main types of colour depth. These are 32 bit, 24 bit, 16 bit, 8 bit and 256 bit(mainly used in gifs). The higher the bit means the larger the variation in colours that an image can display. This will mean that the image will usually appear more brighter and more vibrant. An image with a higher resolution will mean that the image will appear to be of higher quality and more realistic. An image that is higher in colour depth such as a 32 bit image will be a lot larger in file size in comparison to an image lower in colour depth such as a 16 bit image.

A 256 bit image format can allow up to 256 different colours per pixel that can be chosen from the colour pallet CLUT (Colour Look Up Table). A 16 bit image format has 65 thousand colours and is the lowest quality but also is the smallest in size. It requires 2 bytes of space per pixel. A 24 bit image red, green and blue colour values to determine the colour of the pixel. each value of red, green and blue has 256 values. It has 16 million colours and looks very realistic Therefore the number of colours available is 256 x 256 x 256 = 16 777 216 possible colours.

A 32 bit image (also called a true colour image) basically uses the same format as a 24 bit image (RGB) it has the exact same amount of possible colours however it also store the transparency of each colour leaving it looking a lot more realistic but also a lot higher in file size.

16-bit resolution has 65 thousand colours. the 24- bit resolution has 16 million different colours and from here the image starts looking realistic.

Below is an example of an image at 4 bit 8 bit and 24 bit.