Image Resolution Guide: DPI, PPI and What They Mean

Quick Definition

Image resolution is the number of pixels in a picture, written as width by height. DPI counts ink dots a printer lays down. PPI counts pixels packed into an inch of print or screen. On the web only the pixel count matters, since browsers fix one CSS inch at exactly 96 pixels.

Image resolution is simply how many pixels your picture contains, written as width by height. A 3000 by 2000 photo holds six million of them. DPI and PPI are the two numbers people argue about on top of that, and here's the short version: DPI counts dots of ink on paper, PPI counts pixels squeezed into an inch, and neither one changes a single pixel of your file. They only describe how big those pixels get printed. For anything that lives on a screen, the DPI value stored in your file is ignored outright, because the CSS specification pins one inch to exactly 96 pixels no matter what your image claims.

That one fact clears up most of the confusion. Below you'll find where each number actually matters, the maths for working out print sizes, what to use on the web, and why the famous "72 DPI for web" advice has been wrong for about twenty years. If you just want to see what you're working with, our free image size checker reads the dimensions of any file on your own device.

What Is Image Resolution, Really?

A digital photo is a grid. Resolution is the size of that grid. When your phone says it shoots 12 megapixels, it means roughly twelve million squares of colour arranged 4032 across and 3024 down.

Everything else follows from those two numbers. How much you can crop before things fall apart, how large you can print, whether a logo stays crisp on a big monitor. It's all a question of whether you have enough pixels for the job in front of you.

What resolution is not: file size. A 4000 by 3000 photo saved as a heavily compressed JPEG might be 400 KB, while the same picture saved as PNG could be 12 MB. Same resolution, wildly different files. If you want to shrink the file rather than the grid, that's a compression job, and our image compression guide walks through the difference.

Quick check: Multiply width by height and divide by a million to get megapixels. 4000 × 3000 = 12,000,000, so 12 MP.

What's the Difference Between DPI and PPI?

They get swapped constantly, including by software that really ought to know better. The US National Archives put it plainly in an August 2023 explainer: "Today, people use dpi and ppi interchangeably, though they are entirely different measures."

DPI is dots per inch. It's a printer term. NARA defines it as "how many dots of ink can be displayed or printed within one inch of space." An inkjet printer builds a photo out of tiny sprayed dots, and it needs several of them to reproduce one pixel's colour. That's why a printer rated at 1440 DPI is not asking you for a 1440 PPI file.

PPI is pixels per inch. NARA describes the term as the one "used by software like Photoshop to describe the pixel array of a digital file or the number of pixels of a computer monitor display." It answers a different question: if I print this grid at a given physical size, how densely packed will the pixels be?

Here's the part that trips everyone up. PPI is not baked into the pixels. It's a note attached to the file saying "print me at this density." Change it and you have changed nothing about the image data, only the size it comes out of the printer. A 3000 by 2000 photo tagged 300 PPI and the same photo tagged 72 PPI are byte-for-byte identical in the pixel grid. One will print at 10 inches wide, the other at 41.7 inches wide and looking rough.

Term	What it counts	Where it applies
Resolution	Total pixels, width by height	The file itself
PPI	Pixels per inch of output	Print size and screen density
DPI	Ink dots per inch	The printer hardware

Does DPI Do Anything to an Image on a Screen?

No. Not one thing. And this is where the "save for web at 72 DPI" advice needs to be retired.

The reason is written into the web platform itself. The W3C CSS Values and Units Module Level 4 defines the absolute length units with fixed ratios: 1in equals 2.54cm equals exactly 96px, and one CSS pixel is defined as 1/96th of an inch. That ratio never changes. It doesn't consult your monitor, and it certainly doesn't consult the DPI field in your JPEG header.

So when a browser lays out your image, it reads the pixel dimensions and nothing else. A 1200 by 800 image tagged 72 DPI and a 1200 by 800 image tagged 600 DPI render identically, pixel for pixel. The tag is dead weight on the web.

The W3C spec is worth a look for another reason. It anchors those units to what it calls the reference pixel, defined as "the visual angle of one pixel on a device with a device pixel density of 96dpi and a distance from the reader of an arm's length." At a nominal arm's length of 28 inches, that works out to roughly 0.26 mm. In other words, the whole system is calibrated to how big something looks to a person sitting at a desk, not to any particular hardware.

Where 72 DPI came from: early Macintosh screens happened to show about 72 pixels per inch, which matched the 72 points per inch used in typesetting. Handy in 1984. Meaningless now, and the CSS spec settled on 96 anyway.

If you want the resolution of the display rather than the file, CSS has a separate unit for that. The W3C spec defines dppx as dots per px unit and notes that "due to the 1:96 fixed ratio of CSS in to CSS px, 1dppx is equivalent to 96dpi." You'll see it in media queries like @media (min-resolution: 2dppx), which is how a site serves sharper images to dense screens.

What Resolution Do You Need for Print?

Print is where PPI earns its keep, because now the pixels have to land on a physical surface.

The working standard is 300 PPI, and it isn't arbitrary. NARA traces the number back to the point where "it equated to the human eye's ability to perceive detail in an 8 x 10-inch print held at arm's length." Past that, you're recording detail nobody can see from a normal viewing distance.

US federal agencies have codified it. Under 36 CFR §1236.50, published June 2023, agencies digitising permanent records must use "a minimum resolution of 300 pixels per inch" for modern textual paper records, while photographic prints and paper records carrying fine detail require "a minimum of 400 ppi sized to the source document," with the note that higher may be necessary. Colour records have to be captured in RGB, and images must be sized to match the original document.

The tolerance is the part people miss. Those specification tables allow a variance of 2 percent, so the real floor is 294 PPI for text and 392 PPI for photographs. Come in under that and the scan fails. Agencies are also told they can go higher for records carrying very small detail, with aerial photographs and topographic maps named specifically.

And there's a catch that matters if you're buying a scanner. The number you dial into the software is not the same thing as the resolution you actually get. The National Archives makes this point directly in its own explainer on DPI and PPI, published in August 2023: "true optical resolution is not determined by the scanner settings, but by how well the device resolves the fine detail." Under 36 CFR §1236.46, federal agencies have to prove it by scanning an ISO-compliant test target and checking the result with analysis software such as OpenDICE.

Which is why a cheap scanner advertising 9600 DPI is mostly selling you a number. It will happily interpolate up to that figure. Whether the optics ever resolved that much detail is a separate question, and it's the one that counts.

The broader framework behind those rules is the FADGI Technical Guidelines for Digitizing Cultural Heritage Materials, third edition approved 9 May 2023. FADGI uses a four star rating system, and its tables set the minimum sampling frequency in PPI for each content category at each star level. Useful reading if you're scanning anything you care about keeping.

For everyday printing, here's the practical range:

300 PPI for photos, brochures, business cards, anything held in the hand.
400 PPI for photographic prints and fine detail you plan to archive, matching the federal floor.
150 PPI for large posters seen from a metre or more away.
50 to 100 PPI for banners and billboards, where nobody is standing close enough to count pixels.

Viewing distance is doing the work in that list. The further back the viewer stands, the fewer pixels per inch you need, which is why a billboard printed at 300 PPI would be an enormous waste of file.

How Close Will Anyone Actually Look at It?

That list above is really one question in disguise. Every PPI target is a bet about viewing distance, and once you can put a number on the distance you can stop guessing at the PPI.

The starting point is how much detail an eye can resolve at all. Normal vision is defined around one minute of arc. Per Webvision, the University of Utah reference work hosted by the National Library of Medicine, 20/20 vision means each stroke of the test letter subtends exactly one arcminute, and the minimum angle of resolution for normal vision is one arcminute.

Turn that into a rule and you get one division:

Required PPI ≈ 3438 ÷ viewing distance in inches. That constant is just how many arcminutes fit in a radian, so the sum answers "how small a detail can someone still separate from this far away."

Run it and the familiar numbers fall out on their own:

Viewing distance	Acuity-derived PPI	Typical job
12 in, a photo in your hands	~287	Photo prints, business cards
28 in, arm's length at a desk	~123	Documents, screens
3 ft, a poster on a wall	~96	Posters
10 ft, an exhibition banner	~29	Trade show graphics
30 ft, a billboard	~10	Outdoor advertising

So the 300 PPI print standard isn't a magic number. It's roughly what one arcminute works out to at the distance you hold a photograph, which is about twelve inches. And it explains why the poster and banner figures in the previous section drop the way they do.

Notice the 28 inch row too. That's the same arm's length the W3C uses to define its reference pixel, and the resulting figure lands near the 96 pixels per inch the CSS spec settles on. The web and print standards are answering the same question at different distances.

One update worth knowing, because the one arcminute figure is conservative. Ashraf, Chapiro and Mantiuk measured the real ceiling and published in Nature Communications in 2025. Against the long-accepted 60 pixels per degree that one arcminute implies, they found the eye resolves about 94 pixels per degree for black and white detail, with some individuals reaching 120. Colour detail is lower: 89 ppd for red-green and just 53 ppd for yellow-violet.

That's roughly 57 percent above the textbook number, so treat the table as a floor rather than a target. If the piece carries fine high-contrast detail, or the client has good eyes and will lean in, multiply by about 1.5 and you're covered. The yellow-violet figure also explains something printers know instinctively: colour edges tolerate less resolution than black text does.

Where the sum stops helping: it assumes someone standing at the distance you predicted. People walk up to posters. If a piece invites close inspection, price it at the closer distance rather than the average one.

How Do You Work Out the Pixels You Need?

One line of arithmetic. Inches times PPI equals pixels.

Want a 4 by 6 inch print at 300 PPI? That's 4 × 300 = 1200 and 6 × 300 = 1800, so you need 1200 by 1800 pixels.

Print size	At 300 PPI	At 150 PPI
Business card, 3.5 × 2 in	1050 × 600	525 × 300
Postcard, 4 × 6 in	1200 × 1800	600 × 900
A4, 8.27 × 11.69 in	2481 × 3507	1241 × 1754
Photo print, 8 × 10 in	2400 × 3000	1200 × 1500
Poster, 18 × 24 in	5400 × 7200	2700 × 3600

Run it the other way to find out how big you can go with what you already have. Divide pixels by your target PPI. A 4000 by 3000 photo at 300 PPI gives 13.3 by 10 inches, comfortably enough for an A4 print with room to trim.

Once you know the target, our free image resizer gets you there in the browser, and the complete resizing guide covers the settings that matter.

📐 Resize an Image Free →

What Resolution Should Web Images Be?

Forget PPI entirely. Think in pixel widths and the layout slot the image has to fill.

Blog body images: 1200 px wide covers most content columns with headroom.
Full width hero banners: 1920 px, or 2400 px if you want it sharp on large dense displays.
Thumbnails and cards: 400 to 600 px wide.
Product photos with zoom: 2000 px on the long edge.
Social posts: follow the platform spec, which our 2026 social media image sizes guide lists in full.

The rule of thumb is to serve roughly the width the image will occupy, not the width your camera produced. Uploading a 6000 px original into a 800 px slot means the browser downloads several megabytes and throws most of them away.

Format choice matters as much as dimensions here. WebP and AVIF land far smaller than JPEG at the same visual quality, and the PNG vs JPG vs WebP comparison breaks down which to pick for which job.

Do

Set the pixel width you need
Serve 2x for dense screens
Compress after resizing
Keep the original untouched

Don't

Chase a DPI number for web
Upload camera originals raw
Resize up from a small file
Re-save JPEGs over and over

Why Do Some Screens Want Images at 2x?

Because a CSS pixel and a hardware pixel stopped being the same thing.

Modern phones and laptops pack two or three physical pixels into the space of one CSS pixel. The layout still treats a 400 px wide slot as 400 px, but the panel has 800 or 1200 real pixels available to fill it. Feed it a 400 px image and the screen stretches each pixel across a 2 by 2 block, which reads as soft.

So for a display where things need to look crisp, supply the image at twice the CSS width. A 600 px slot gets a 1200 px file. This is exactly what the min-resolution: 2dppx media query is for, and since the W3C spec fixes 1dppx at 96dpi, a 2dppx screen is one running at an effective 192 dots per inch.

The obvious cost is weight. A 2x image carries four times the pixels, so compress it properly with our free image compressor or use srcset so browsers only fetch the version they need. There's more on the size and speed tradeoff in the website speed guide.

For logos and icons, skip this problem entirely. Everything on this page assumes a grid of pixels. A vector file has no grid, so it has no resolution to get wrong. W3C describes SVG as offering resolution independence, and says plainly that it "provides identical online and hardcopy display." Same file, sharp at 200 px, sharp at 2x, sharp on a poster. No 1x and 2x pair to maintain.

Which quietly undercuts the logo example you're about to read in the next section. Serving logo-200.png and logo-400.png is the correct answer if your logo is a raster file. It's the wrong question if it doesn't have to be one. Anything built from shapes and text rather than photographed, so logos, icons, charts and diagrams, is usually better off as SVG, and then the whole density conversation stops applying to it. Our format comparison covers when SVG is the right pick. Photographs are the genuine exception, since a photo has no shapes to describe and stays raster.

How Do You Serve the Right Resolution to Every Screen?

You don't pick one. You offer several and let the browser choose, which is the honest answer to "what resolution should this image be" once you accept that your visitors are on wildly different screens.

The section above left you with a real problem. A 2x image carries four times the pixels, so serving it to everyone punishes the person on an old laptop to please the person on a new phone. The srcset attribute exists to end that trade-off.

There are two ways to write it, and picking the right one saves a lot of confusion.

Density descriptors, for a fixed-size image. If your logo always renders 200 px wide, you just need a sharper copy for dense screens:

Per MDN's reference on the img element, when you use x descriptors the src file is treated as the 1x candidate automatically. So low-density screens get the small one, dense screens get the big one, and you wrote one extra attribute.

Width descriptors, for an image that changes size with the layout. This is the one most content images need, and it takes two attributes:

The w values state how wide each file actually is in pixels. The sizes attribute tells the browser how wide the image will be displayed, which it can't work out on its own before layout happens. It divides one by the other, factors in the device pixel ratio, and downloads the single best match.

The mistake that breaks it: getting sizes wrong. If you claim the image fills the viewport when it actually sits in an 800 px column, the browser dutifully fetches a file far larger than needed and your markup makes things worse. The w numbers must be the real pixel widths of the files too, not the sizes you wish they were.

Worth knowing how few sites do this. The 2024 Web Almanac from HTTP Archive parsed over 10 million pages and found srcset on just 42 percent of mobile pages. That's real progress from 34 percent in 2022, but it still means most of the web ships one image to every device. The <picture> element, which you need for swapping formats or art direction rather than just size, sat at 9.3 percent. Native lazy loading reached 33 percent, up from roughly 25 percent in 2022.

And the pressure is going the wrong way. The same report found the 90th percentile largest image grew 13 percent to nearly 1 MB. Images are getting heavier faster than sites are getting smarter about serving them.

One limit worth stating plainly, because responsive markup gets oversold. Offering three sizes of a badly prepared image just gives the browser three bad choices. Resize and compress properly first, then let srcset decide which of your good files to send. Our image resizer and compressor both run in your browser, so you can produce the set without uploading anything.

Can You Increase the Resolution of an Image?

You can make the pixel count bigger. You cannot invent detail that was never captured.

Upscaling works by interpolation. The software looks at the pixels it has and guesses what should sit between them. Older methods like bicubic average their neighbours, which is why enlarged images go soft and edges pick up a slight halo. AI upscalers guess with far more context and produce results that often look genuinely good, but they're still generating plausible detail rather than recovering the real thing. On text, faces and fine patterns that difference shows.

NARA makes a related point about capture itself: "simply increasing the sampling rate or size doesn't necessarily result in better quality if the scanner cannot meet the specifications." True optical resolution depends on what the hardware can actually resolve, which is why the federal guidelines call for verification against ISO compliant test targets rather than trusting the number in the settings dialog. Turning a scanner up to 1200 PPI when its optics top out lower gets you a bigger file, not a better one.

The practical advice is boring and effective. Find the largest original you have before you upscale anything. The version someone sent you over WhatsApp is already compressed and shrunk, and no amount of enlarging brings back what that trip removed.

Which Resolution Mistakes Cost People the Most?

Four keep showing up.

Setting DPI instead of pixels for web work. Changing a file from 72 to 300 DPI in an export dialog does nothing to how it appears in a browser. Change the pixel dimensions instead.

Sending a screen sized image to print. A 1200 px wide file at 300 PPI covers 4 inches. Ask a printer for A4 from it and you get visible softness across the page.

Cropping first, then discovering you're short. Cropping throws pixels away permanently. If you plan to print, crop conservatively and check the remaining dimensions against your target before you commit. The image cropping guide covers this in more detail.

Resizing the same file repeatedly. Every JPEG save runs lossy compression again on whatever survived the last one. Keep one high resolution master and export copies from it rather than editing the export.

One habit that solves most of this: archive the biggest version of every image you produce, and treat every web or print file as a disposable export from that master.

What Else Do People Ask?

Is 72 DPI the correct resolution for web images?

No. 72 DPI is a leftover from early Macintosh displays and it has no effect on how a browser renders your picture. The CSS specification fixes one inch at exactly 96 pixels, so browsers ignore the DPI value stored in the file completely. Set the pixel width and height you actually want and leave the DPI field alone.

What is the difference between DPI and PPI?

DPI counts the dots of ink a printer can lay down across one inch of paper. PPI counts pixels, either packed into one inch of a print or into one inch of a screen. The US National Archives describes them as entirely different measures that people now use interchangeably. Printers deal in DPI. Files and screens deal in PPI.

What resolution do I need to print a photo?

Multiply the print size in inches by 300 PPI. A 4 by 6 inch print needs 1200 by 1800 pixels, and an 8 by 10 needs 2400 by 3000. US federal digitisation rules set 300 PPI as the floor for modern paper records and 400 PPI for photographic prints. Big posters viewed from further away can drop to 150 PPI.

Can you increase the resolution of an image?

You can enlarge the pixel count, but you cannot recover detail that was never captured. Upscaling invents new pixels by guessing from the ones around them, which softens edges and smears fine texture. AI upscalers guess more convincingly than older methods, though they are still guessing. Always go back to the largest original file you have first.

How do I check the resolution of an image?

Right click the file and open its properties or info panel, where the pixel width and height are listed. On the web you can drop the file into a browser based checker that reads the dimensions on your own device without uploading anything. The number that matters is the pixel count, not whatever DPI value the file happens to carry.

Sources: W3C, CSS Values and Units Module Level 4, absolute length units, the reference pixel, and resolution units including dppx (w3.org/TR/css-values-4). US National Archives and Records Administration, Records Express, "When We Say We Want Resolution: DPI and PPI Explained", 22 August 2023, and "Digitizing Records: Requirements for Paper and Photographs", 7 June 2023, covering 36 CFR §1236.50 (archives.gov). HTTP Archive, Web Almanac 2024, Media chapter, based on more than 10 million parsed pages, for the 42 percent srcset adoption on mobile against 34 percent in 2022, the 9.3 percent picture element figure, the 33 percent native lazy loading figure, and the 13 percent growth in the 90th percentile largest image to nearly 1 MB. Mozilla Developer Network, the img element reference, for how the w and x descriptors and the sizes attribute drive candidate selection, and for src acting as the 1x candidate. Federal Agencies Digital Guidelines Initiative, Technical Guidelines for Digitizing Cultural Heritage Materials, third edition approved 9 May 2023 (digitizationguidelines.gov). W3C, About SVG, for resolution independence and the statement that SVG provides identical online and hardcopy display; SVG 1.1 and the SVG Mobile Profiles are W3C Recommendations. Kalloniatis, M. and Luu, C., "Visual Acuity," in Webvision: The Organization of the Retina and Visual System, University of Utah Health Sciences Center, hosted on the NIH National Library of Medicine NCBI Bookshelf, for the one arcminute minimum angle of resolution. Ashraf, M., Chapiro, A. and Mantiuk, R.K. (2025), "Resolution limit of the eye, how many pixels can we see?", Nature Communications, PMC12559231, for the 94, 89 and 53 pixels per degree measurements against the 60 ppd standard. Federal requirements apply to US agency records and are cited here as a published quality benchmark, not as a rule for personal printing.

Know the pixels you need? Our free image resizer and image size checker both run in your browser, so nothing gets uploaded anywhere.