Images, Pixels and RGB

A little BIT about Pixels

(camera clicks) Good.

I created Instagram with my co-founder, Mike.

Initially we saw the mobile phone as an opportunity to create something new.

Because for the first time people were carrying around a computer in their pocket.

And we decided that sharing imagery was probably the biggest opportunity

for the next five years, and one that we held close to our hearts,

something we wanted to spend our time on.

It's great to say you have an app or an idea that does x, y, or z

but unless that solves a real problem for people they're not going to use it.

And the question is: What problem are you solving?

(Piper - Photographer) When people first faced the problem of how to show a picture on a screen

they had to come up with a way to break the image down into data.

In 1957, an early computer engineer named Russell Kirsch took a picture of his infant son and scanned it.

It was the first digital image,

a grainy black and white baby picture.

And that's how the pixel was born!

Pixels are an interesting concept because you can't see them very easily.

But actually, if you get a magnifying glass and you go up to a screen

you actually can see that your screen is made up of tiny dots of little light.

What's more interesting is that those tiny dots of little light

are actually multiple tiny dots of little light of different colors.

There's red, green, and blue.

Pixels together, from far away, create an image and upfront they are just little lights that are on and off.

The combination of those create images

and what you see on your screen every single day you use your computer.

So you'll hear the term resolution a lot, both in computer science

and manufacturers of devices will talk about it.

Resolution is basically the dimensions by which you can measure how many pixels are on a screen.

So back in the day when I was a high school student,

it was 640 by 480 pixels.

And today it's a lot bigger.

And then there's the question not only of resolution, but also density.

For instance, on modern smartphones they fit the same number of little lights called pixels,

but in a denser space and that's what allows you to get sharper images.

Now, how do you store those values of the pixels in a file?

What you do is you store red, green, and blue values in little triplets effectively,

with different values that each make up a single pixel.

The values range from 0 to 255.

0 would be very dark, 255 would be very bright.

And triplets of these values together compose a single pixel.

An image file, whether it's a jpeg, gif, png, etc.

contains millions of these RGB (red-green-blue) triplets.

So how does a computer store all that data?

All computing and digital data are represented by bits.

A bit has two states: it's on or it's off.

But instead of on or off, computers use 1 and 0 -- binary!

So an image file is actually just a bunch of 1s and 0s.

But why do RGB values go from 0 to 255?

Turns out that each color channel, RGB, is represented by 8 bits,

which together are called a byte.

If you know the binary number system,

you know that the maximum number 8 bits can represent is 255,

which is equal to eight 1s in a row.

And the lowest is 0 or eight 0s in a row.

Therefore, 0 to 255 gives us 256 different intensities per color channel.

We can represent a pixel of the color turquoise for example,

in our traditional decimal based number system as 64 (for a little red),

224 (for a lot of green),

and 208 (for some blue).

But a computer would have stored it as

Red: 01000000 // Green: 11100000 // Blue: 1101 0000

We use 24 binary digits to represent this one pixel.

So rather than binary, digital artists often use the hexadecimal number system to represent colors.

So we can represent the same color turquoise using only six hexadecimal digits:

40 E0 D0. Which is a lot shorter.

Let's say you want to modify the colors of the image. How do you do that?

Basically there are ways of mapping functions where you take the input value of the pixel.

So you take an input of a red, green, and blue value which represents that color remember.

Then you map it using a function to a new red, green, and blue value.

Let's say you wanted to make an image darker.

One way of doing that is by taking the red, green, and blue values that

come in and let's just say subtracting a fixed constant from each of them,

say subtract 50.

Obviously you can't go below 0, but you just subtract 50 from each of them and that's the output.

So the input is R, G, B and the output is R-50, G-50, B-50.

What you'll see is you've taken an image with a certain brightness,

and you get out an image with a much darker brightness.

What a lot of people don't realize about Instagram is that

initially people thought what it was was a way of filtering images,

making your images look cool in some way or retro.

And what it grew into was actually much more important,

it was a way of people connecting.

So it's not just about seeing photos of your friends and your family,

but actually being able to discover things happening all around the world.

Whether that's a riot overseas, a social movement,

you're able to basically consume that information in a visual way.

And that allowed us to grow very quickly and be a universal platform.