Instagram's Kevin Systrom explains pixels and how filters work

Hear Instagram co-founder explain how images are represented in binary, and how image filters work on the inside. This video is part of the Code.org video lecture series for the upcoming Computer Science Principles high school course. For more about the curriculum see http://code.org/educate/csp. For other educational videos from Code.org see http://code.org/educate/videos.

Special thanks to Kevin Systrom and Instagram and Piper Hanson photography http://piperhanson.com

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. 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 visual 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! 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. 255 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 0100 0000 1110 0000

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. 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. 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.

Learn more at studio.code.org.