Stupid Question 110 & 111: What is a digital image (raster type/ bitmap) and what is a pixel?

[To celebrate my first year of programming I will ask a ‘stupid’ questions daily on my blog for a year, to make sure I learn at least 365 new things during my second year as a developer]

Since I have so many friends that work as graphic designers I might get in real trouble if I answer this question incorrectly. Lets hope I don’t.

Images are those magical colorful things we have here and there on our computer, phone and so on. We’ve gotten so used to them I think few of us hardly ask ourselves what they really are. If you work with images then you need to know.

One of the school projects we had in school was to create an image editing software, without the help of any external API’s except for the GDI+ (which isn’t external). With just a few months of programming behind us it sure was quite the challenge. With a big time constraint we just had to code 24/7 and I never took the time to really grasp what these images was all about. Being a little bit wiser now, I hope to be able to explain :)

The result of the school project

There are two main types of digital images, raster and vector types, but since people usually refer to raster images (also called bitmaps) I’ll focus on those.

A digital image is composed of small bits called pixels arranged in a rectangular array (a two-dimensional array). Imagine a grid with rows and columns, each cell would make a pixel. (But they don’t have to be rendered as squares, but for simplicity we will just go for the square analogy).

If you zoom in on an image you will see this- tiny small squares, called pixels

Pixel comes from picture element, which describes quite well what it is. It is an element in the picture. This point contains numbers that make up a color for that particular physical point. The color can be black and white (representing a gray shade or just pure white and black) or a color. Colors are either represented as RGB numbers (Red, Green, Blue) or CMYK numbers (Cyan, Magenta, Yellow and Black). Those are just different ways of describing a color.

I was talking about numbers, each pixel defines the color by holding data about the color. The data is referred to as bits per pixel, and it defines the number of distinct colors that a pixel can represent.

1bpp has just 1-bit per pixel, and as we know a bit can be either on or of. As the bits double so does the number of possible colors.

2 bpp can have 4 colors

3 bpp can have 8 colors

And so on.

Notice that you can choose this when creating a new image

Grayscale images uses just one 8 bit data per pixel, and a byte can hold values from 0-255, which means it can represent the full spectrum of gray shades (256). A little side note is that we can only distinguish between 200 shades (hence the title of the book 200 Shades of Grey) so it’s a bit more than what we need.

RBG has three 8-bit bytes, one for each RBB. So each of the three values can be anything from 0-255 (256 different values per). The combination of these three gives us 16.7 million possible combinations of colors. Cool! RGB is a 24-bit, CMYK is 32 bit.

Here is a pixel, sampled. In .Net its rather easy to find a pixel and select it, try it!

So how do we organize and save this data? We use image files. The different image files are just storage ways for the data in compressed or uncompressed form, it is not a digital image per definition- but contains one. They vary a lot and that is a different question and discussion.

Hope I you learned something new about digital images today :) I know I did, and dear pixel nerds (Yes Kim Brockie I am referring to you! Feel free to comment/correct me if I said something wrong!)

Comments

That was a good introduction. 
Now on to part 2. Why use vector over raster? Raster suffers from the jaggies if you zoom in too much and file size bloat if you zoom out too much. 

I'm not entirely sure of this, but I thought in JPEG images, the pixels don't hold their color value, but a reference to an entry of the embedded color profile (sRGB, Adobe RGB, ...). That's why older browser have problems with displaying JPEG's that use for example Adobe RGB. The browsers assume sRGB and map the values "contained by the pixels" to the sRGB translation chart. Simplified: a pixel says its color can found in position 123 of the color profile. In sRGB that might one shade of blue while in Adobe RGB that might be a completely different shade of blue. 

Hi,
I just wanted to say that I've found a series of excellent tutorials on Youtube regarding Image Processing using C#. Check it out if you want to learn about programming brightness, contrast, gamma, blur etc. 
http://www.youtube.com/watch?v=VwXvTNupW48
David 

Last modified on 2012-12-22