Pixels, DPI and Aspect Ratio Explained

Three numbers get quoted whenever someone talks about image size (pixel dimensions, DPI and aspect ratio) and they're constantly confused for one another. Once you see what each one really measures, sizing an image for any purpose becomes obvious.

Pixels: the only measurement screens care about

A digital image is a grid of coloured squares called pixels. Its pixel dimensions are simply how many columns and rows it has, written as width × height, e.g. 1920 × 1080.

This is the number that matters for anything shown on a screen. A phone, a website, a social feed. They all think in pixels. If a form asks for a "1080 × 1080 image," it wants exactly that many pixels, and nothing about inches or DPI enters the picture.

The total pixel count (width × height) is often called the resolution. 1920 × 1080 is about 2 megapixels; 4000 × 3000 is 12.

DPI: a print instruction, not an image property

DPI ("dots per inch") (and its sibling PPI, "pixels per inch") describes how densely those pixels are packed when the image is printed on paper. It says nothing about how the image looks on a screen.

Here's the part that trips everyone up:

Changing the DPI number alone does not add or remove pixels. It only changes how big the print comes out.

An example makes it click. Take a 3000 × 2400 pixel photo:

• At 300 DPI, it prints at 10 × 8 inches, crisp, magazine quality.
• At 72 DPI, the same pixels print at about 41 × 33 inches, huge and blocky.

Same file, same pixels, different print size. That's why "make it 300 DPI for the web" is a meaningless request: browsers ignore DPI entirely. For print, aim for 300 DPI. For screens, forget the number and get the pixel dimensions right.

This is one of the rare cases where a tool's limitation is the clearest way to explain the concept, so I'll use ours. Our image resizer works purely in pixel dimensions. It deliberately writes no DPI tag at all. That isn't an oversight I keep meaning to fix. DPI is a number a printer reads to decide how big to print. It changes nothing about the image data, so there's nothing for a resizer to meaningfully do with it. If a print shop asks for 300 DPI, what they need is enough pixels for the physical size, a 10 × 8 inch print needs 3000 × 2400 pixels, and no metadata field can conjure those. Set the DPI field in your layout or print software at the point where a physical size actually exists.

What the resizer does do is the part that genuinely affects quality: pixel data is handed to pica, which resamples with a Lanczos filter rather than the browser's default smoothing. On a downscale that's the difference between crisp text in a screenshot and a slightly mushy one. If pica fails to load for any reason, the code falls back to the canvas path and still gives you a file. It degrades, it doesn't break.

Aspect ratio: the shape

Aspect ratio is the proportional relationship between width and height, reduced to its simplest form:

• 1:1: a square (Instagram post)
• 16:9: widescreen (YouTube, most video and monitors)
• 4:5: tall portrait (Instagram feed)
• 9:16: vertical full-screen (Stories, Reels, TikTok)
• 3:2, the classic DSLR photo shape

Aspect ratio is what determines whether an image gets cropped or letterboxed when it lands in a differently shaped slot. A 16:9 photo dropped into a square frame loses its sides. A square dropped into a 16:9 slot gains bars.

How the three fit together

Think of it as a quick decision tree:

1. Screen or web? Set the pixel dimensions. Ignore DPI.
2. Print? Set the pixel dimensions and the DPI together. They multiply to give the physical size.
3. Worried about cropping? Match the aspect ratio of the destination first, then set the exact pixels.

Get the ratio right and the pixels right, and DPI takes care of itself for anything on a screen.

Try it hands-on

The fastest way to internalise this is to play with it. Open the image resizer, type a width, and watch the height follow when the aspect-ratio lock is on. That lock is the ratio doing its job. Unlock it and force a square, and you'll see exactly what "changing the aspect ratio" does to your image.

• Pixels = how many dots there are.
• DPI = how tightly they're packed on paper.
• Aspect ratio = the shape they form.

Keep those three straight and most "what size should this be?" questions answer themselves, and the ones that don't are usually a destination with an opinion, not a maths problem. From here, aspect ratios explained goes deeper on shape, resizing without losing quality covers the downscale, and upscaling for print vs web is the one to read before you send anything to a printer.

Sources

• Dots per inch (Wikipedia)
• Image resolution (Wikipedia)
• �12� (MDN Web Docs): how screens handle density instead of DPI
• pica, the Lanczos resampler behind our resizer