Image DPI and Resolution - What You Need to Know for Print and Web

DPI and resolution confuse even experienced designers. You have probably seen recommendations like "save at 300 DPI for print" or "72 DPI for web" without a clear explanation of what those numbers actually mean. This guide breaks down the concepts in plain language so you can prepare images correctly for screens, printers, and social media.

What Is DPI?

DPI stands for dots per inch. It describes how many ink dots a printer places within one linear inch of paper. A 300 DPI print means the printer lays down 300 dots of ink horizontally and 300 dots vertically in each square inch. More dots generally produce smoother edges and finer detail in the printed output.

DPI is a print concept. It tells you about the relationship between a physical image and a physical output device. When a print shop asks for a 300 DPI file, they want enough pixel data to fill each inch of the printed page at high quality.

What Is PPI?

PPI stands for pixels per inch. It describes how many pixels are packed into one inch on a digital display. A 27-inch monitor with a 2560 by 1440 resolution has roughly 109 PPI. A phone screen with the same pixel dimensions but a smaller physical size might have 400 PPI or more.

People often use DPI and PPI interchangeably in casual conversation, but they refer to different contexts. PPI applies to screens. DPI applies to printers. Image editing software typically labels the setting as PPI or "resolution" even when you plan to print the file.

Why DPI Does Not Matter for Web Images

Here is the most important fact for web work: browsers ignore DPI metadata. When you upload a 1200 by 800 pixel image to a website, the browser displays all 1200 by 800 pixels regardless of whether the file is tagged at 72 DPI or 300 DPI. The DPI value stored in the file header has zero effect on how the image appears on screen.

What matters for web images is pixel dimensions. If your layout needs a 600 pixel wide hero image, your source file should be at least 600 pixels wide. File size, format, and compression affect load time and quality. DPI does not. You can set it to 1 or 1000 and the on-screen result stays identical.

Why DPI Matters for Print

Print is where DPI becomes critical. Printers need enough pixels to fill each inch of output at acceptable quality. The industry standard for high-quality photo printing is 300 DPI. A 4 by 6 inch print at 300 DPI requires a source image of 1200 by 1800 pixels.

Submitting a 600 by 900 pixel image for a 4 by 6 inch print gives the printer only 150 DPI. The result may look soft or pixelated up close. Large format prints viewed from a distance, such as posters or banners, can use lower DPI values like 150 because viewers stand farther away. Always confirm requirements with your print provider.

Common DPI Misconceptions

The biggest misconception is that changing DPI in an image editor adds or removes pixels. It does not. If you open a 1000 by 1000 pixel image and change the DPI from 72 to 300 without resampling, you still have exactly 1000 by 1000 pixels. Only the metadata label changes. The file size and on-screen appearance remain the same.

To actually increase print resolution, you must add pixels through resampling or upscaling. This can interpolate new pixel data, but it cannot recover detail that was never captured. Starting with a high-resolution source photo is always better than trying to upscale a small image later.

Another myth is that 72 DPI is required for web images. This number comes from old Mac screen standards and has no relevance to modern browsers. Use whatever pixel dimensions your layout requires and ignore DPI entirely for web delivery.

How Screen Resolution Affects Display

Every screen has a fixed number of physical pixels. When a browser renders an image, it maps image pixels to screen pixels. A 400 pixel wide image occupies 400 screen pixels on a standard display. CSS can scale images larger or smaller, but the underlying pixel data determines sharpness.

Higher resolution screens do not change this logic. They simply pack more physical pixels into the same physical space. An image still displays at its native pixel count unless CSS or device pixel ratio scaling intervenes.

Retina and HiDPI Displays

Retina and HiDPI screens use device pixel ratios of 2x or higher. A CSS pixel on a 2x display maps to a 2 by 2 grid of physical screen pixels. To look sharp on these screens, images should be roughly twice the CSS display size in actual pixels.

If an image displays at 300 CSS pixels wide, provide a 600 pixel wide source file for retina clarity. This is about pixel dimensions, not DPI. A 600 pixel image tagged at 72 DPI and one tagged at 300 DPI look identical on any screen when displayed at the same pixel size.

Recommended Dimensions for Social Media

Social platforms specify pixel dimensions, not DPI. Use these as starting points and check each platform current guidelines before publishing.

Instagram feed posts work well at 1080 by 1080 pixels for square images or 1080 by 1350 for portrait. Facebook link previews typically use 1200 by 630 pixels. Twitter/X post images display best at 1600 by 900 pixels. LinkedIn shared images recommend 1200 by 627 pixels. YouTube thumbnails use 1280 by 720 pixels.

Export at these pixel sizes with appropriate compression. DPI metadata is irrelevant for all of these platforms.

How to Check and Change Image DPI

Most image editors show DPI in the file properties or export dialog. In Photoshop, open Image Size to view and adjust resolution alongside pixel dimensions. In GIMP, check Scale Image or Print Size under the Image menu. On Mac, select a file in Finder and press Command-I to see dimensions in Preview.

When preparing for print, set DPI and dimensions together. Uncheck "Resample" if you only want to change the print size label without altering pixel data. Enable resampling only when you intentionally need to add or remove pixels.

Practical Workflow Tips

Keep separate export settings for web and print workflows. For web, focus on pixel width, file format, and compression quality. WebP or AVIF at appropriate quality levels often outperform JPEG for file size. For print, calculate required pixels by multiplying the print size in inches by your target DPI.

Save master files at full resolution and generate sized-down copies for specific uses. Never upscale a web-optimized image for print. When converting between formats for different purposes, tools like SnapFormat let you resize and convert images in your browser without uploading sensitive files to a server.

Understanding the difference between pixel dimensions and DPI metadata saves time and prevents quality problems. For screens, think in pixels. For print, think in pixels per inch of output. Once that distinction clicks, image preparation becomes much simpler.