Introduction

Look at that image. You see colors. Shapes. A cool character and scenery. Your brain processes it instantly.

But what is your computer actually looking at. What is an image really. Just data. A very specific arrangement of numbers. That’s it.

Pixels. The Smallest Unit

Every digital image is a grid of tiny squares. Each square is a pixel. Short for picture element.

A 1920x1080 image is a grid of 1920 columns and 1080 rows. That is 2,073,600 pixels. Over two million tiny squares.

Zoom in far enough on any image and you will see them.

┌───┬───┬───┬───┬───┐
│   │   │   │   │   │
├───┼───┼───┼───┼───┤
│   │   │ ● │   │   │
├───┼───┼───┼───┼───┤
│   │   │   │   │   │
└───┴───┴───┴───┴───┘

Each box is one pixel.

One pixel by itself is meaningless. Millions of them together and your brain sees a photo.

What Is Inside a Pixel

A pixel is just a color. And a color is just numbers.

Most images use three channels. Red. Green. Blue. RGB. Each channel gets a value from 0 to 255. That is 256 possible intensities per channel.

Red:   0 = no red      255 = full red
Green: 0 = no green    255 = full green
Blue:  0 = no blue     255 = full blue

Mix them together and you get a color.

(255,   0,   0) = pure red
(  0, 255,   0) = pure green
(  0,   0, 255) = pure blue
(255, 255, 255) = white
(  0,   0,   0) = black
(255, 165,   0) = orange
(128, 128, 128) = gray

That is it. Every color you see on screen is just three numbers between 0 and 255.

Why 0 to 255

Because each channel is stored as one byte. One byte is 8 bits. 2 to the power of 8 is 256. So you get 256 possible values. Starting from 0 that gives you 0 through 255.

Three channels at one byte each means each pixel takes 3 bytes.

Some images have a fourth channel. Alpha. That is transparency. RGBA. Four bytes per pixel.

How Big Is an Image Actually

Take a 1920x1080 image with three channels.

1920 x 1080 = 2,073,600 pixels
2,073,600 x 3 bytes = 6,220,800 bytes
6,220,800 / 1024 / 1024 ≈ 5.93 MB

Almost 6 megabytes. For one image. That is the raw uncompressed size. Every pixel stored as three numbers in a row.

A 4K image at 3840x2160 with four channels.

3840 x 2160 x 4 = 33,177,600 bytes ≈ 31.6 MB

Over 31 megabytes for a single frame. Raw image data adds up fast.

How the Data Is Laid Out

The simplest layout is row by row. Left to right. Top to bottom. Each pixel written as its red value then green then blue. One after the other.

Pixel 1: R G B
Pixel 2: R G B
Pixel 3: R G B
...

Row 1:  [R G B] [R G B] [R G B] [R G B] ...
Row 2:  [R G B] [R G B] [R G B] [R G B] ...
Row 3:  [R G B] [R G B] [R G B] [R G B] ...

That is a raw bitmap. No compression. No metadata. Just a flat stream of color values. If you know the width and the height and the number of channels you can reconstruct the entire image from that stream.

So Why Are Image Files Not 6 MB

Because compression.

A raw 1080p photo is 6 megabytes. But a JPEG of the same image might be 200 kilobytes. PNG maybe 1 megabyte. The pixels are the same. The file is smaller. Something had to give.

Lossless Compression

PNG uses lossless compression. It looks at the raw pixel data and finds patterns. Repeated values. Predictable sequences. It encodes those patterns more efficiently.

Think of it like this. Instead of writing "red red red red red red red red" you write "8x red". Same information. Fewer bytes.

When you decompress a PNG you get back the exact original pixels. Nothing lost. Every value identical. That is what lossless means.

Lossy Compression

JPEG uses lossy compression. It throws away data you probably will not notice.

It breaks the image into 8x8 blocks. It converts the color information into frequency data using math called a discrete cosine transform. Then it aggressively rounds off the high frequency details. Small color variations. Subtle gradients. Fine textures.

Your eyes are not great at noticing those losses. Especially in photos. So the file gets dramatically smaller and the image still looks fine.

The Tradeoff

Format    Compression    Quality     File Size
─────────────────────────────────────────────
Raw       None           Perfect     Huge
PNG       Lossless       Perfect     Large
WebP      Both options   Good        Small
JPEG      Lossy          Good enough Tiny

More compression means smaller files but more compromises. Less compression means bigger files but perfect quality. Every image format sits somewhere on that spectrum.

What About Color Depth

Each channel is 8 bits. That gives you 256 values per channel. With three channels that is 256 x 256 x 256 possible colors. About 16.7 million.

That sounds like a lot. And for most things it is. But it is not infinite.

Some images use 16 bits per channel. That is 65,536 values per channel instead of 256. These are called HDR or high dynamic range images. Way more color precision. Way bigger files. Mostly used in photography and film where you need room to adjust exposure and color in post.

Metadata. The Stuff Around the Pixels

An image file is not just pixels. There is a header that tells you the dimensions. The color format. The number of channels. Maybe the color space.

Photos from cameras also embed EXIF data. Camera model. Shutter speed. GPS coordinates. Date and time. Thumbnail previews. Sometimes several kilobytes of metadata before a single pixel.

The Full Picture

An image is a grid of pixels. A pixel is a color. A color is a few numbers. The grid is stored row by row as a flat stream of bytes. Everything else is just compression and metadata wrapped around that simple idea.

Next time you look at a photo on your screen remember that your computer sees nothing but millions of tiny number triplets. Your brain does all the hard work of turning that into something meaningful.