Pixels are the starting point
A digital photograph or raster graphic is a grid of tiny squares called pixels, each holding a color. The width and height of that grid, such as 3000 by 2000 pixels, are the image’s pixel dimensions. This is the most important number for resolution, because it fixes how much detail the file actually contains.
Multiplying the two gives the total pixel count. Using that hypothetical example, 3000 times 2000 is 6,000,000 pixels, or six megapixels. More pixels mean more potential detail, though a blurry photo with many pixels is still blurry.
What “resolution” means in practice
The word is used for several related things, which causes confusion.
- Pixel dimensions: how many pixels wide and tall the image is.
- Density: how many pixels are packed into a physical distance, usually measured in pixels per inch (ppi) when talking about images and screens, or dots per inch (dpi) when talking about printers.
- Display size: how large the image appears on a page or screen.
A file does not have a fixed physical size on its own. Physical size comes from dividing pixel dimensions by density. Our hypothetical 3000 by 2000 image at 300 ppi measures 10 inches by about 6.7 inches, because 3000 divided by 300 is 10 and 2000 divided by 300 is roughly 6.67. Spread the same pixels across 20 inches, and the density falls to 150 ppi: the picture is the same, but each pixel is stretched larger and fine detail looks softer.
This is why changing a “resolution” number in a settings box without changing pixel dimensions does not add detail. It only changes how the pixels are spread out.
Resolution for screens
On screens, what matters is the pixel dimensions relative to the size at which the image will appear. Modern displays often pack more than one device pixel into each layout pixel, so an image shown at a given width on a page can need roughly twice that many pixels across to look sharp on a high-density screen.
As a hypothetical example, if a picture appears 600 layout pixels wide and you want it to be crisp on a screen that uses two device pixels per layout pixel, a file about 1200 pixels wide is a reasonable target. Much bigger than that wastes bandwidth, because the viewer cannot see the extra detail but still downloads it.
Because layouts shift across devices, responsive layout often involves providing several sizes of the same image so each device loads an appropriate one.
Resolution for print
Print generally needs more pixels for a given physical size than screens do. A commonly cited target for photographs is around 300 ppi at final size, though the right value depends on the printing method, the viewing distance and the image. Large posters and signage are viewed from farther away, so they often get by with lower density. Print production and signage design touch on that distinction.
The practical approach is to ask the printer what they need, and to work out the required pixels: final width in inches times target ppi. For a hypothetical 8-inch-wide image at 300 ppi, that is 2400 pixels across.
Why enlarging does not add detail
Software can resize an image upward by calculating new pixels from neighboring ones. This is called resampling or interpolation. It can make an enlargement look smoother, but it cannot recover detail that was never captured. Strong enlargements usually look soft, blocky or artificial. Reducing an image is far safer than enlarging it, so start with the largest, cleanest source you can get.
This is a key difference from vector graphics, which are described by shapes and can scale without this loss.
What compression does
Image files are often large, so formats use compression to shrink them. There are two broad kinds.
Lossless compression reduces file size without discarding information. The original pixels can be restored exactly. It works well for graphics with flat colors, sharp edges and text, such as logos, screenshots and diagrams. PNG is a common lossless format.
Lossy compression discards information that is judged hard to notice, producing much smaller files. The higher the compression, the more is lost. JPEG is the familiar example and is widely used for photographs. Some newer formats also offer lossy modes and often produce smaller files at similar quality, though support can vary by software and browser.
The trade-off
Heavier lossy compression gives smaller files and faster pages, but it eventually produces visible damage:
- blocky patches or banding in smooth gradients
- fuzzy halos or ringing around sharp edges and text
- smeared fine detail
Each time a lossy file is edited and saved again, more quality can be lost. Keep an original or a lossless master, and export lossy copies from it.
Choosing a format
A rough guide:
- Photographs: a lossy photo format at a moderate quality setting.
- Logos, icons, line art, screenshots: a lossless format, or better, a vector format where possible.
- Images needing transparency: a format that supports it, usually a lossless one.
- Simple animation: formats exist for this, but short video is often more efficient.
Preview at the real display size when choosing quality. Settings that look the same to most viewers can cut file size considerably, but there is no universal number, because it depends on the picture.
File size and the real cost of heavy images
Large files slow pages, use mobile data and affect people with slow connections most. Reducing dimensions to what is needed, choosing a suitable format and compressing carefully usually matter more than any single trick. Lighter pages are also part of sustainable design, since less data moves each time a page loads.
A short checklist
- Know the final display size and the device or print method.
- Calculate the pixel dimensions required.
- Start from a source at least that large.
- Choose lossless or lossy based on content.
- Export, then inspect the result at actual size.
- Keep the original file safe.