Image Resolution Explained: DPI vs PPI and What Actually Matters

Published July 1, 2026 · By the PixelPalette team

"Make sure it's 300 DPI" is one of the most repeated instructions in design — and one of the most widely misunderstood. Most people who say it are using DPI as a stand-in for "high quality" without knowing what the number measures, which leads to two opposite mistakes: uploading a needlessly enormous file to a website, or sending a genuinely too-small image to a printer. Here is what resolution actually measures, why the unit changes depending on the medium, and how to check whether an image is actually big enough before you use it.

The core confusion: DPI and PPI are not the same thing

PPI (pixels per inch) describes a digital image: how many individual pixels are packed into each inch of the image when displayed or printed at a given size. DPI (dots per inch), technically, describes a printer's physical output: how many tiny ink dots a printer lays down per inch of paper. In casual conversation the two terms get used interchangeably, and for most practical purposes that is harmless — but the underlying difference explains a lot of confusion. A printer might use several dots of ink to reproduce the color of a single pixel, so DPI and PPI are not a strict 1:1 relationship even when people use the words as if they were.

The number that actually matters for your file is pixel dimensions — literally how many pixels wide and tall the image is. Everything else (DPI, PPI, and the physical size an image prints at) is just a matter of how those existing pixels get divided across a physical measurement.

Why resolution is meaningless without a physical size

An image that is 3000 by 2000 pixels is not "high resolution" or "low resolution" in isolation — resolution only exists relative to how large the image will be displayed or printed. That same 3000×2000 image is:

• Extremely sharp printed at 4×6 inches (750 PPI — far more detail than the eye can distinguish)
• Print-quality sharp at 10×6.7 inches (300 PPI — the traditional print industry standard)
• Noticeably soft printed at 30×20 inches (100 PPI — visible pixelation up close)

The pixel count never changed. Only the physical size it was stretched across changed. This is why "is this image high resolution?" is genuinely an unanswerable question without also asking "at what size?"

Why 300 DPI is a print rule that does not apply online

The 300 DPI figure comes from the print industry, where it represents the point at which most people can no longer perceive individual pixels or ink dots at normal reading distance on paper. It has nothing to do with screens. Screens are measured in actual pixels, not inches, and a browser or app simply displays an image's pixels directly (or scales them) — there is no ink, no physical dot pattern, and generally no printing-press viewing distance to account for.

Applying 300 DPI logic to a website image leads people to upload files many times larger than necessary — a hero image that only ever displays at 1200 pixels wide gains nothing from being saved at a "print-ready" 3600 pixels, except a much slower page load. For screens, the number to focus on is the actual pixel dimensions the image will be displayed at, accounting for high-density ("Retina") displays, which typically show images at roughly double their CSS size in actual device pixels.

A practical resolution cheat sheet

How to check an image's real resolution before using it

Right-click any image file on desktop and look at its properties or "Get Info" panel — it will show pixel dimensions directly. In a browser, right-click an image and choose "Open image in new tab," then check the tab title or the address bar's image info, which often lists the dimensions. Design tools like Photoshop and Figma show pixel dimensions in their file or export panels. The key number you want is always width × height in pixels — everything else (DPI settings, physical print size) is a calculation derived from that number combined with your intended output size.

What happens when you upscale a low-resolution image

Stretching a small image to a larger pixel size does not add real detail — traditional resizing tools simply interpolate, guessing new pixel values based on the surrounding ones, which produces a softer, blurrier result rather than genuinely sharper detail. This is why a logo saved as a small JPEG and then scaled up for a banner always looks fuzzy: the information needed for a crisp large version was never captured in the first place. Modern AI upscaling tools can do a more convincing job of hallucinating plausible extra detail, but they are reconstructing an approximation, not recovering lost data — for anything requiring true accuracy (a logo, a product photo, brand-critical imagery), always work from the original high-resolution source file rather than an upscaled copy.

This is also why vector formats sidestep the entire resolution problem for certain content — a logo saved as SVG has no fixed pixel dimensions at all and renders crisply at any size, because it is drawn from mathematical instructions rather than a fixed pixel grid. See our guide on vector vs raster graphics for when that option is available to you.

Practical takeaways

1. Ignore DPI as a quality label; check actual pixel dimensions against your intended output size instead.
2. Use roughly 300 PPI at final size for standard print, and match the actual display size (doubled for Retina) for web.
3. Always keep and work from your highest-resolution source file — you can scale down freely, but you cannot genuinely scale up without quality loss.
4. For logos and icons that need to work at many sizes, use a vector format instead of chasing an ever-larger raster file.

Retina and high-density displays, explained simply

Modern phone, tablet, and many laptop screens pack far more physical pixels into each inch than older displays did — a technique broadly referred to as "Retina" (Apple's marketing term) or high-density display technology generally. A screen like this does not display images larger; instead, it uses extra physical pixels to render the same content more sharply, similar to how a higher-resolution print looks crisper at the same physical size. This is precisely why a web image that looks perfectly sharp on an older monitor can look slightly soft on a modern phone — the phone has more physical pixels available in the same space and is stretching a lower-resolution image across them.

The practical fix is to provide image files at roughly double (sometimes triple, for the very highest-density screens) the pixel dimensions the layout calls for in CSS, while instructing the browser to display them at the original intended size. A "400px wide" image slot on a website, for full sharpness on high-density screens, is typically best served by an actual source file 800px or even 1200px wide — the browser handles the scaling down, and the result is a crisp image on every type of screen rather than a soft one on the newest devices.

Common resolution myths worth retiring

• "Bigger pixel dimensions always means better quality." Not if the extra pixels were only created by stretching a smaller original — a genuinely higher-resolution capture beats an upscaled one every time, even at identical final pixel dimensions.
• "Screenshots don't have a real DPI, so they're low quality." A screenshot's usefulness depends entirely on its actual pixel dimensions relative to where it will be used, exactly like any other image — the concept of DPI as a print-specific measurement simply does not apply to it in a meaningful way.
• "Setting an image's DPI metadata to 300 in software makes it print-quality." Changing the DPI metadata field alone, without resampling the actual pixel dimensions, does not add any real detail — it only changes what physical size the file claims it should print at. The pixel count is what determines actual quality, not the number written in the metadata field.
• "A high-megapixel camera guarantees high-resolution photos." Megapixel count sets the ceiling, but cropping, compression, and resizing after the fact can all reduce an image's effective resolution well below what the camera originally captured.