What's Inside an Image File?
Every photo you've ever seen is just millions of numbers arranged in a clever way. Let's crack open image files and see how they really work.
Every photo you've ever seen is just millions of numbers arranged in a clever way. Let's crack open image files and see how they really work.
Every digital image is just a grid of pixels, and every pixel is just three numbers: how much Red, Green, and Blue light to mix together.
Each color channel (R, G, B) uses 8 bits, allowing values from 0-255. That's 256 × 256 × 256 = 16,777,216 possible colors! A 1920×1080 photo has over 2 million pixels, each needing 3 bytes. That's 6 MB of raw data - before compression.
JPEG files are small because they throw away details your eyes won't notice. The image is split into 8×8 pixel blocks, then transformed and simplified.
Click a block to see how JPEG processes it
JPEG converts pixel brightness into frequency patterns. Low frequencies (smooth areas) are kept, high frequencies (sharp edges) are reduced. Your brain fills in the missing detail!
When JPEG throws away too much data, you get compression artifacts - blocky areas, color bleeding, and "ringing" around sharp edges.
PNG uses lossless compression - it makes files smaller without losing ANY data. The decompressed image is bit-for-bit identical to the original.
PNG uses filtering (predicting pixel values from neighbors) and DEFLATE compression (finding repeated patterns). It's the same algorithm used in ZIP files! Great for graphics, terrible for photos.
Image files start with magic bytes that identify the format, followed by metadata about the image, and finally the actual pixel data.
Photos from your phone often include GPS coordinates! Before sharing images online, consider stripping EXIF data. Many social media sites do this automatically, but not all.
Different formats excel at different tasks. Here's when to use each one.
| Format | Type | Best For | Transparency | Animation |
|---|---|---|---|---|
| JPEG | Lossy | Photos, realistic images | No | No |
| PNG | Lossless | Graphics, logos, screenshots | Yes | No |
| GIF | Lossless | Simple animations, memes | 1-bit only | Yes |
| WebP | Both | Web images (modern) | Yes | Yes |
| SVG | Vector | Icons, logos, illustrations | Yes | Yes |
You've uncovered the secrets hidden inside image files.
Every pixel is stored as three numbers (0-255) for Red, Green, and Blue.
JPEG saves space by discarding details your eyes barely notice, but this causes artifacts.
PNG compresses without losing any data - perfect for graphics, logos, and screenshots.
Photos → JPEG. Graphics/logos → PNG. Animations → GIF. Modern web → WebP.
Put your new knowledge into practice!