Image Resolution and DPI Explained — Web vs Print Guide

Resolution is one of the most misunderstood concepts in digital imaging. The short answer: for screen use, pixel dimensions are what matter; for print, DPI at the output size is what matters. The embedded “DPI” number in a JPEG has no effect on how it looks in a browser.

Pixel Dimensions vs Resolution

A digital image is a grid of pixels. An image described as 1920 × 1080 has 1,920 columns and 1,080 rows of pixels — about 2 million pixels total. That’s its pixel dimension.

Resolution adds a spatial density to that grid: it says how large those pixels should appear in the physical world. An image with 300 PPI packs 300 pixels into every inch of printed output. The same image at 72 PPI would spread those pixels across more physical space, producing a larger but less sharp print.

The key insight: changing the PPI number alone doesn’t change the image. It only changes the scale interpretation. The actual pixel data — and therefore screen appearance — is unchanged unless you resample (add or remove pixels).

DPI vs PPI: Clearing Up the Confusion

Term	Full name	Applies to
PPI	Pixels per inch	Digital images, screen density
DPI	Dots per inch	Printer ink droplets

When a designer says “this needs to be 300 DPI,” they almost always mean 300 PPI in the source file. The printer will convert those pixels to ink dots, but the resolution of the digital file is measured in PPI.

Modern monitors vary considerably: standard 1080p monitors are about 96 PPI, Retina/HiDPI displays run at 192–264 PPI, and 4K monitors at 27 inches land around 163 PPI.

Resolution Standards for Web

For web images, pixel dimensions are the specification that matters. The embedded PPI metadata in a JPEG, PNG, or WebP file is ignored by browsers — they render pixels at the size the CSS or HTML instructs.

Practical guidelines:

• A full-width hero image on a 1440 px wide design should be at least 1440 px wide (2880 px for Retina displays).
• A thumbnail in a product grid at 300 × 300 CSS pixels needs a 600 × 600 px source to stay sharp on HiDPI screens.
• Embedded PPI metadata can be 72, 96, or 300 — it makes no visible difference in a browser.

Resolution Standards for Print

For print, DPI at the output size is the controlling factor:

• 300 DPI — standard quality for photos, brochures, business cards, magazines
• 150 DPI — acceptable for posters and large-format prints viewed at arm’s length
• 72 DPI — banners and signage viewed from several feet away

To calculate the required pixel dimensions for print:

Required pixels = print size in inches × DPI

A 5 × 7 inch print at 300 DPI needs a 1500 × 2100 px source file. If your source is smaller, enlarging it (upsampling) introduces softness.

Resize vs Resample

These two operations are often confused:

Resize (no resample): Changes the embedded PPI value. Pixel count stays the same. The image looks identical on screen and in any browser, but a printer will render it at a different physical size.

Resample: Actually adds or removes pixels. Upsampling (adding pixels) uses interpolation algorithms to estimate new pixel values — the result is smoother but slightly softer. Downsampling (removing pixels) shrinks the image and is lossless in the sense that you’re just discarding pixels you don’t need.

Use ImgKit’s image resize tool to downsize images for the web while keeping their sharpness. Downscaling a 4000 × 3000 photo to 1200 × 900 produces a much smaller file with no visible quality loss at web display sizes.

Common Misconceptions

“My photo is only 72 DPI — it’s low resolution.” Not necessarily. A photo that is 4000 × 3000 px at 72 DPI has plenty of pixels for most uses. The 72 DPI is just a metadata tag. What matters is the absolute pixel count.

“Higher DPI always means better quality online.” False. A 72 PPI image and a 300 PPI image with the same pixel dimensions look identical in a browser.

“I can increase quality by changing DPI in software.” Changing the DPI number without resampling does not add information. You cannot recover detail by changing a metadata value.

For guidance on choosing the right pixel dimensions for specific use cases, browse the related guides on website and social media image sizing.

よくある質問

What is DPI?

DPI stands for dots per inch. It describes how many ink dots a printer places within one inch of printed output. A higher DPI produces finer, sharper printed images. The term is often used loosely to mean any kind of image resolution, but strictly speaking DPI only applies to print output.

What is the difference between DPI and PPI?

DPI (dots per inch) refers to printer output density. PPI (pixels per inch) refers to the density of pixels in a digital image or on a screen. Photographers and designers often say DPI when they technically mean PPI, which causes confusion. For digital files, the relevant measurement is PPI.

What resolution should web images be?

For web use, the effective PPI of the display matters more than the embedded PPI metadata. Most monitors render at 96 ppi (Windows) or 72–110 ppi (macOS). The critical number is pixel dimensions — a 1200 × 800 px image looks the same on screen whether its embedded PPI tag says 72 or 300. Set images to the correct pixel dimensions and let the browser handle display.

What resolution is needed for print?

Professional print typically requires 300 DPI at the final print size. Printing a 4×6 inch photo at 300 DPI requires a 1200 × 1800 pixel source image. Large-format prints (posters, banners) viewed from a distance can use 150 DPI or even 72 DPI without visible degradation.

How do I check an image's resolution?

On Windows, right-click the image file → Properties → Details tab, which shows pixel dimensions and horizontal/vertical DPI. On macOS, open the file in Preview → Tools → Show Inspector (Command-I). In Photoshop, go to Image → Image Size.

How do I change an image's resolution without changing its quality?

You can change the embedded DPI/PPI metadata — the number stored in the file header — without touching a single pixel. This is called 'resampling off.' It changes how a printer interprets the image without altering pixel count or quality. To actually add more pixels (for a physically larger print), you need to upsample, which does interpolate new pixels and can soften the image.