Images: pixels and formats
A digital photo is a grid of coloured dots. Once you can describe that grid (how many dots, what shape, how many colours) and know how each format stores it, you can choose the right format for any picture.
Pixels: the dots in the grid
A pixel (picture element) is one dot of one colour. A photo is a rectangle of pixels, counted across and down.
A tiny 8 × 5 image, zoomed in. Each box is one pixel.
┌──┬──┬──┬──┬──┬──┬──┬──┐
│░░│░░│░░│▓▓│▓▓│░░│░░│░░│
├──┼──┼──┼──┼──┼──┼──┼──┤
│░░│░░│▓▓│██│██│▓▓│░░│░░│ width = 8 pixels
├──┼──┼──┼──┼──┼──┼──┼──┤ height = 5 pixels
│░░│▓▓│██│██│██│██│▓▓│░░│ total = 8 × 5 = 40 pixels
├──┼──┼──┼──┼──┼──┼──┼──┤
│▓▓│██│██│██│██│██│██│▓▓│
├──┼──┼──┼──┼──┼──┼──┼──┤
│██│██│██│██│██│██│██│██│
└──┴──┴──┴──┴──┴──┴──┴──┘A real phone photo works the same way, with far more pixels.
Dimensions and resolution
Dimensions are the width and height in pixels, written width first: 4032 × 3024. People often call this the resolution.
Multiply them to get the pixel count. Photo cameras quote it in megapixels (MP), millions of pixels:
| Dimensions | Pixels | Megapixels | Typical source |
|---|---|---|---|
| 1280 × 720 | 921,600 | 0.9 MP | HD video frame, small web image |
| 1920 × 1080 | 2,073,600 | 2.1 MP | Full HD screen or video |
| 3840 × 2160 | 8,294,400 | 8.3 MP | 4K screen or video |
| 4032 × 3024 | 12,192,768 | 12.2 MP | A common phone camera photo |
More pixels means more detail you can zoom into or print, and a bigger file.
DPI is for paper, not screens
You may see "72 DPI" or "300 DPI" in an image's details. DPI (dots per inch, also PPI) only matters when you print: it says how many pixels go into each inch of paper. A screen shows pixels, so a 1920 × 1080 image looks the same at 72 or 300 DPI.
For printing, divide pixels by the DPI you want. A 4032 × 3024 photo printed at 300 DPI is 4032 ÷ 300 = 13.4 inches (about 34 cm) wide.
Aspect ratio: the shape
The aspect ratio is width compared to height, reduced to small numbers. 4032 × 3024 divides down to 4:3.
1:1 square 4:5 portrait 4:3 photo 16:9 widescreen 9:16 story
┌──────┐ ┌─────┐ ┌────────┐ ┌────────────┐ ┌───┐
│ │ │ │ │ │ │ │ │ │
│ │ │ │ │ │ └────────────┘ │ │
└──────┘ │ │ └────────┘ │ │
└─────┘ │ │
└───┘When an image must change shape, for example a 4:3 photo going into a 1:1 square, you have three choices:
| Choice | What happens | Downside |
|---|---|---|
| Crop | Cut off the edges that do not fit | You lose part of the picture |
| Fit (letterbox) | Shrink it until it fits inside, leave empty bands | The result is smaller than the frame, or has bars |
| Stretch | Force it to the new shape | People and objects look squashed |
Stretching almost always looks wrong. Lesson 5 shows how the apps crop and fit.
Colour depth: how many colours
Each pixel's colour is a mix of red, green and blue (RGB). Colour depth (or bit depth) is how many steps each of those three has.
| Bits per channel | Steps per channel | Colours | Used for |
|---|---|---|---|
| 8 | 256 | 256 × 256 × 256 = about 16.7 million | Almost every JPEG, PNG and web image |
| 10 | 1,024 | about 1 billion | HDR photos and video |
| Indexed (a palette) | n/a | at most 256 in the whole image | GIF, and "8-bit" PNGs |
So a normal pixel takes 3 bytes (24 bits). A fourth channel, alpha, stores how see-through the pixel is, which makes 4 bytes.
That gives the size of a photo with no compression at all:
4032 × 3024 pixels × 3 bytes = 36,578,304 bytes ≈ 36.6 MBA phone saves that photo as a JPEG of a few megabytes. Lesson 2 explains how.
Raster and vector
Everything above describes raster images: grids of pixels. Photos are raster.
A vector image stores shapes instead: "a circle here, this big, filled blue", "a line from here to there". The computer draws the shapes at whatever size you need, so a vector logo stays sharp on a phone and on a billboard. SVG is the vector format of the web; an SVG file is text you can open in an editor:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#1e66f5" />
</svg> Enlarge a raster circle: Enlarge a vector circle:
edges turn into steps edges stay smooth
▄▄██▄▄ ╭──────╮
▄████████▄ ╭╯ ╰╮
██████████ │ │
▀████████▀ ╰╮ ╭╯
▀▀██▀▀ ╰──────╯Use vector for logos, icons, diagrams and charts. Use raster for photos: there is no practical way to describe a photo as shapes.
Transparency
Transparency means some pixels show what is behind them. A logo on a coloured web page needs transparent corners, or it sits in a white box.
- PNG, WebP and AVIF store a full alpha channel: each pixel can be anything from fully see-through to solid, which gives soft edges and shadows.
- GIF has on-or-off transparency only: a pixel is fully see-through or not at all, so curved edges look jagged.
- JPEG has no transparency. When you save a transparent image as JPEG, the see-through areas are filled with a colour, usually white.
The formats compared
| Format | Compression | Transparency | Animation | Best for |
|---|---|---|---|---|
JPEG (.jpg) | Lossy | No | No | Photos, everywhere |
| PNG | Lossless | Yes | No (APNG aside) | Screenshots, logos, text, graphics with flat colour |
| WebP | Lossy or lossless | Yes | Yes | Web images; usually smaller than JPEG or PNG |
| AVIF | Lossy or lossless | Yes | Yes | Web images where the smallest file matters |
| GIF | Lossless, 256 colours | On or off | Yes | Short, simple animations; old systems |
| HEIC | Lossy | Yes | Yes | Photos on iPhones and some Android phones |
| SVG | Text (vector) | Yes | Yes | Logos, icons, diagrams |
Lossy and lossless are the subject of the next lesson. For now: lossless keeps every pixel exactly, lossy throws away detail you are unlikely to notice, to make the file much smaller.
When to use each
- A photo to send or post anywhere: JPEG. Every device, app and website reads it.
- A screenshot, a chart, a logo with text: PNG. JPEG blurs sharp edges and text, as you will see in Lesson 2.
- Images on your own website: WebP, which all current major browsers display, or AVIF for smaller files still. Keep a JPEG or PNG for anything that must open in older software.
- An animation: a short video (MP4 or WebM) is usually far smaller than a GIF. Use GIF only where video is not allowed.
- A logo or icon you control: SVG if the place you put it accepts SVG, otherwise a PNG at the largest size you need.
HEIC, the iPhone format
Recent iPhones save photos as HEIC by default. It stores a photo in roughly half the space of a JPEG of similar quality, but many programs, websites and Windows PCs cannot open it without extra software. None of the Dhiva Labs image apps in this track accepts HEIC.
Two ways around it: on the iPhone, open Settings → Camera → Formats and choose Most Compatible to take JPEGs from now on, or share or export the photo from the phone, which usually converts it to JPEG.
Check it in a Dhiva Labs app
The Metadata tab of DL Image Tools shows any image's Type, Size, Dimensions, Aspect ratio and Megapixels. Load a phone photo and you might see:
| Field | Value |
|---|---|
| Type | image/jpeg |
| Dimensions | 4032 × 3024 |
| Aspect ratio | 4:3 |
| Megapixels | 12.2 MP |
To change the format, use the Convert tab in DL Image Tools (JPG, PNG, WebP, AVIF), the format converters in Dhiva Tools (JPG, PNG, WEBP), the Convert tab in Creator Toolkit (JPG, PNG, WEBP), or Image Converter in CompressX (JPG, PNG, GIF, BMP, TIFF, ICO; it reads WEBP but cannot write it).
TIP
Converting a JPEG to PNG does not bring back lost detail. It only stores the already-damaged pixels without further loss, in a much bigger file.
Check yourself
Question 1 of 6
A photo is 4000 × 3000 pixels. About how many megapixels is it?
What you learned
- An image is a grid of pixels; its dimensions are width × height, and megapixels are the total in millions.
- Aspect ratio is the shape. Changing shape means cropping, fitting or stretching.
- Normal images use 8 bits per channel, 3 bytes per pixel, plus 1 for transparency.
- Raster images (photos) are pixels; vector images (SVG) are shapes that scale without blur.
- JPEG for photos, PNG for screenshots and graphics, WebP or AVIF for the web, SVG for logos, video instead of long GIFs.
Next steps
- Compression and quality: how a 36 MB photo becomes 3 MB
- Compress and convert in DL Image Tools