How computers show images

Where are we?

You know that it’s important to have basic image skills.

This lesson starts building those skills by exploring how computers display images.

This lesson’s goals

By the end of this page, you should:

  • Know what a pixel is.
  • Know how each pixel’s color is represented.
  • Know what a color channel is.
  • Know what anti-aliasing is.

Pixels

Every image on your computer’s screen is made up of pixels. A pixel is a tiny dot of color. When the pixels are small enough, your brain merges them together into a single image.

Here’s an example.

Pixels

Figure 1. Pixels

The photo is of Renata when she was about two months old. Her eye is zoomed by 1,100%, so you can see the pixels.

Images made of pixels are often called bitmaps.

Color codes

Each pixel is made up of three different colors: red, green, and blue (RGB). By mixing different amounts of red, green, and blue, your computer can show any color your eye can see.

The most common way to represent colors in Web work is as RGB codes. Each channel (one for each color) has a number from 0 to 255. 0 means none of the color. 255 means as much of the color as the computer can show.

Why 0 to 255? It has to do with bits, bytes, and powers of two. Really geeky stuff. Let’s decide we don’t care.

Here’s the color (255, 0, 0):

   

Full red, no green, no blue.

Here’s the color (0, 255, 0):

   

No red, full green, no blue.

You can mix colors. Here’s the color (128, 32, 64):

   

So each dot in Figure 1 has three numbers for its color. For example, this color:

   

is in the image. It’s (250, 206, 161).

There are two colors you should know by heart. (0, 0, 0) means all the colors are off. That shows as black, like my fur. (255, 255, 255) means all the colors are on full. That shows as white.

Text and anti-aliasing

Photos have thousands of different colors, captured by a digital camera or a scanner. Text and drawings have fewer colors.

Text

Figure 2. Text

This text has only two colors: white (255, 255, 255) and dark red (157, 16, 16).

But the text is jagged. How about this:

Anti-aliased text

Figure 3. Anti-aliased text

This uses anti-aliasing to make the text look better. Where two contrasting colors meet, the computer works out an average color, and uses that to blend the two together. Anti-aliased images look smoother.

Summary

You learned:

  • That a pixel is a colored dot.
  • There are three color channels for each pixel.
  • That each pixel’s color is represented by an RGB code.
  • That anti-aliasing blends contrasting colors to make color transitions smoother.

What now?

Now let’s see how different file formats store color information.


How to...

Lessons

User login

Log in problems? Try here


Dogs