Image Resolution Explained: Pixels, DPI, PPI and File Size

Image resolution is the number of pixels in an image, usually written as width by height (like 1920 by 1080). More pixels mean more detail and a larger file. Everything else people argue about (DPI, PPI, “72 dpi for web”) is really about how those pixels get displayed or printed, not about the image data itself.

That one distinction clears up most of the confusion, so let’s build it out properly.

What image resolution actually means

Resolution counts pixels. A photo that is 4000 by 3000 has 4000 pixels across and 3000 down. That is the resolution, full stop. It has nothing to do with inches, printers, or screens until you decide to output it somewhere.

Think of the pixels as a fixed grid of colored squares. The grid does not know it will end up on a phone, a billboard, or an A4 print. When someone says “this image is high resolution,” they mean the grid is large: lots of squares, lots of room for fine detail.

The trap is that resolution gets tangled up with two other ideas: how sharp the image looks (which depends on the display) and how big the file is (which depends on format and compression). Keep them separate and the rest of this makes sense.

Pixels, megapixels, and dimensions

A pixel is one colored dot, the smallest unit of the image. Dimensions are just the pixel count on each side, and megapixels are those two numbers multiplied together, then divided by a million.

Take that 4000 by 3000 photo. Multiply: 4000 times 3000 is 12,000,000 pixels, so it is a 12-megapixel image. A phone camera advertised as “48 MP” is producing roughly 8000 by 6000. The megapixel number is a shorthand for total detail, but the width and height are what actually matter when you fit an image into a layout.

Two images can share a megapixel count and still look different in a design. A 3000 by 4000 portrait and a 4000 by 3000 landscape are both 12 MP, but they crop into a page very differently. When you plan a layout, work with the width and height, not the megapixels.

DPI vs PPI: the difference people get wrong

DPI (dots per inch) is a printing measurement: how many ink dots a printer lays down per inch of paper. PPI (pixels per inch) is a display and file measurement: how many image pixels get packed into an inch of screen or print. People use the two words interchangeably, and that is where the confusion in dpi vs ppi starts.

Here is the part that surprises people: PPI is not baked into your image in any meaningful way. An image is a fixed grid of pixels. The PPI value is just a tag in the file’s metadata that says “when printed, aim for this density.” Change that tag and you change the print size, not the pixels.

So a 3000 by 2000 image at 300 PPI prints at 10 by about 6.7 inches. The same 3000 by 2000 image at 150 PPI prints at 20 by about 13.3 inches, bigger and softer, with the exact same pixel data. Nothing was added or removed. Only the intended print density changed.

DPI belongs to the printer. PPI belongs to the file and the screen. If you are working on anything for the web, you mostly care about raw pixel dimensions and can ignore both numbers.

What DPI for web images (and why 72 is a myth)

For web images, DPI and PPI do not matter. Browsers render by pixel count alone. A 800 by 600 image looks identical on a web page whether its metadata says 72, 96, or 300 PPI, because the browser reads the 800 by 600 and throws the density tag away.

The “72 DPI for web” rule is a leftover from 1980s Macintosh screens that genuinely showed 72 pixels per inch. Modern displays range from around 96 PPI on an old monitor to over 400 on a phone. There is no single “screen DPI” anymore, so setting your export to 72 accomplishes nothing except making people think density matters online. It does not.

What actually decides web image quality is the pixel dimensions relative to the space the image fills, plus the display’s pixel density. A retina phone packs roughly two device pixels into each CSS pixel, so an image meant to display 400 pixels wide should often be exported around 800 pixels wide to stay crisp. That is a dimensions decision, not a DPI decision.

The practical takeaway: for the web, size your image in pixels to fit its slot (times two for high-density screens), and ignore the DPI field entirely.

How to check an image’s resolution

The fastest way to check image resolution is your operating system’s file info. On Windows, right-click the file, choose Properties, then the Details tab, and read the Dimensions line. On macOS, select the file and press Command+I, or open it in Preview and choose Tools then Adjust Size.

On a phone, open the photo and look at its info panel. On iPhone, tap the info icon (the small “i”) under the photo. On Android, open the image in Google Photos and tap the details view. Both show pixel dimensions and often the file size next to them.

You can also see dimensions in any image editor’s export or resize dialog, or by dropping the file into a browser and checking. The number you want is the pair like “2048 x 1365.” That is the resolution. If a dialog shows you a DPI field too, remember it only affects print output, not the pixels you just read.

How resolution affects image file size

More pixels mean a bigger file, but the relationship is not simple, because format and compression sit in between. Roughly, file size scales with the total pixel count, so doubling both width and height (four times the pixels) tends to multiply the size several times over, not just by two.

Format changes everything. The same 2000 by 1500 photo might be 6 MB as an uncompressed PNG, around 900 KB as a quality-80 JPEG, and roughly 500 KB as a WebP. Same resolution, very different sizes, because JPEG and WebP throw away data your eye barely notices. Choosing the right one is a real decision, which is why we wrote a separate guide on the best image format for web.

Content matters too. A photo of a busy forest compresses worse than a flat blue sky, because there is more visual detail for the encoder to store. This is the difference between lossy vs lossless compression: lossy formats trade a little quality for much smaller files, lossless keep every pixel exact but stay large.

One more thing that quietly inflates size: embedded metadata. Camera files carry EXIF data (camera model, GPS location, timestamps) that adds weight and can leak information you did not mean to share. If you want to know what is hiding in there, see what is EXIF data.

Print vs web resolution cheat sheet

A quick reference for the numbers that come up most often:

• Web full-width hero: about 1600 to 2000 pixels wide, DPI ignored.
• Web thumbnail: 300 to 600 pixels wide, sized to its slot (double it for retina).
• Social share image: 1200 by 630 pixels is the common target.
• Standard 4 by 6 inch photo print: 1200 by 1800 pixels at 300 PPI.
• A4 print at 300 PPI: about 2480 by 3508 pixels.
• Business card at 300 PPI: about 1050 by 600 pixels.

For print, work backward from inches times 300. For the web, work forward from the pixel width of the space, and stop worrying about DPI.

Resize and compress for the right resolution

Once you know the resolution you need, the last step is getting there without wrecking quality. Two moves: resize the pixel dimensions down to what the slot actually needs, then compress to shrink the file.

Resizing a 6000-pixel-wide camera photo down to 1600 for a blog post can cut the file by 90 percent before you even touch compression, because you removed pixels you were never going to display. Shrinking dimensions is almost always the biggest win, and it is the step people skip.

You can do both with our free image compressor. Drop in a photo, set the width you want, and it strips excess weight (including bulky metadata) in one pass. That handles the resize-and-compress step this whole guide has been building toward.

FAQ

Is higher resolution always better? No. Beyond the size you will actually display or print, extra pixels only make the file heavier and slower to load. A 6000-pixel photo on a page that shows it at 800 pixels wastes bandwidth for zero visible gain. Match the resolution to the output.

What is a good resolution for web images? Size the image in pixels to fit its space, then double it for high-density screens. An image displayed 500 pixels wide is usually exported around 1000 pixels wide. Ignore DPI for the web entirely: browsers only read pixel dimensions.

Does DPI matter for images on a screen? No. Screens render by pixel count, so the DPI or PPI tag in the file is ignored on the web. DPI only affects physical print output. The “72 DPI for web” idea is a myth left over from old Macintosh monitors.

How do I make an image higher resolution without losing quality? You mostly cannot add real detail that was never captured. Upscaling stretches existing pixels and softens the image, and AI upscalers invent plausible detail rather than recover true detail. The reliable path is to start from the highest-resolution original you have, then resize down as needed.