Image DPI Explained: Does 72 DPI or 300 DPI Matter Online?

Quick answer: DPI is not the web quality switch

For normal website images, 72 DPI vs 300 DPI does not decide how sharp the image looks online. The browser is mainly working with:

• The image's actual pixel dimensions, such as 1200 x 800.
• The CSS size on the page, such as 600 px wide.
• Responsive image rules such as srcset and sizes.
• The device pixel ratio on the screen.
• The compression and file format used for the exported file.

A 1200 x 800 JPG tagged as 72 DPI and the same 1200 x 800 JPG tagged as 300 DPI usually render the same on a webpage. They contain the same number of pixels. The DPI value is mostly a print instruction.

DPI starts to matter when the image has to become a physical size. A 2 x 2 inch passport photo at 300 DPI needs 600 x 600 pixels. A 4 x 6 inch print at 300 DPI needs 1200 x 1800 pixels. That is where the DPI number becomes useful: it connects pixels to inches or millimeters.

So when someone asks for "300 DPI," the best follow-up question is:

Is this for print, or do you actually need a larger pixel image for the web?

DPI, PPI, pixels, and CSS pixels

People use DPI to mean several different things, which is why the advice gets messy.

For digital image files, PPI is the more precise term. A file does not contain ink dots. It contains pixels. But people search for DPI, print labs ask for DPI, and clients often say DPI when they mean PPI, so this guide uses both carefully.

The practical formula is simple:

pixels = print inches x PPI
print inches = pixels / PPI

If a photo is 3000 pixels wide, it can print 10 inches wide at 300 PPI, 20 inches wide at 150 PPI, or 41.7 inches wide at 72 PPI. The file did not become better or worse. You are only changing how densely those pixels are placed on paper.

What the DPI value inside an image actually does

Many image formats can store a resolution or density value. In everyday software, you may see it as:

• 72 DPI.
• 96 DPI.
• 240 PPI.
• 300 PPI.
• A "resolution" field in Photoshop.
• Horizontal and vertical density metadata in a JPG or PNG.

This value is metadata. It suggests how large the image should be when printed or placed into a layout that honors that density. It does not add detail.

Imagine a 3000 x 2000 photo:

Same pixels. Different suggested print size.

This is the part that trips people up. If you only change the DPI field, you have not resized the image for the web. You have not compressed it. You have not made it sharper. You changed the print label.

What browsers use instead

For common webpage work, browsers use the file's pixel data and the page's layout instructions.

If the HTML or CSS says an image should display at 600 CSS pixels wide, the browser lays it out at 600 CSS pixels wide. If you provide a 1200-pixel-wide source image for that slot, it has enough pixels for a 2x high-density display. If you provide a 400-pixel-wide source image for that slot, it may look soft because the browser has to enlarge it.

That is why web image work usually sounds like this:

• Hero image: export around the largest expected display width, often with responsive variants.
• Blog image: make a 1200-1600 px wide version unless the design needs more.
• Thumbnail: export closer to the displayed card size.
• Retina icon: provide 2x or 3x source pixels for the CSS size.
• Slow page: resize and compress the pixels, not the DPI tag.

MDN's naturalWidth documentation is useful here because it describes image width in CSS pixels, not as "whatever the DPI tag says." MDN's responsive image guidance also explains that srcset and sizes help the browser choose an appropriate source based on layout and device conditions.

There is one technical nuance: CSS has an experimental image-resolution property, and W3C CSS Images discusses image resolution metadata. MDN currently marks image-resolution as experimental and notes that browser support is not there for production use. For normal web publishing, you should not rely on a JPG or PNG's DPI metadata to control visible webpage size.

Why 72 DPI became web folklore

The "72 DPI for web" rule is mostly inherited habit.

Early desktop publishing workflows had a closer relationship between screen pixels, points, and inches. Old Macintosh screen conventions are often associated with 72 pixels per inch. Windows and CSS history brought 96 DPI into the picture. W3C CSS Values defines a fixed relationship where 1in equals 96px, and MDN's resolution documentation explains that 1dppx corresponds to 96dpi in CSS terms.

That does not mean you should export website images at 96 DPI either.

It means CSS has a reference system for layout units. Your actual web image still needs enough pixels for the size where it appears. A 5000 px wide photo is too heavy for a 300 px thumbnail whether it is tagged 72 DPI or 300 DPI. A 400 px wide logo may look soft in a 600 px slot no matter what the DPI field says.

For web images, the better question is:

How many pixels will this image occupy in the layout, and how many source pixels should I provide for the screens I care about?

The Photoshop resampling trap

Photoshop and similar tools often show width, height, and resolution in one dialog. That is helpful for print, but it creates a trap for web work.

Adobe's Image Size documentation separates:

• Dimensions: the pixel count.
• Width and height: the physical or layout size depending on unit.
• Resolution: pixels per inch for print quality.
• Resample: adding or removing pixels.

The key switch is Resample.

When Resample is off, changing 72 PPI to 300 PPI keeps the same pixels and changes the suggested print size. A 3000 x 2000 file remains 3000 x 2000. This is metadata-level work.

When Resample is on, changing the resolution can add or remove pixels depending on the width and height fields. That changes the image data. It can make the file larger or smaller, sharper or softer, and it can introduce interpolation artifacts if you upscale too much.

For web use, skip the vague command "make it 72 DPI." Say the actual target:

• "Resize this to 1600 px wide."
• "Export a 320 px thumbnail."
• "Compress this JPG under 200 KB."
• "Make a 2x image for a 600 CSS px slot, so export 1200 px wide."

Does changing DPI change file size?

Usually, no.

If you edit only the DPI/PPI metadata, the file size may stay the same or change by a tiny amount because metadata bytes changed. The image data is still the same grid of pixels.

File size changes when you do one of these:

• Resize the pixel dimensions.
• Crop away part of the image.
• Change JPG/WebP/AVIF quality.
• Convert to another format.
• Remove EXIF or other metadata.
• Flatten transparency.
• Reduce animation frames or duration.

If a website says the upload must be under 500 KB, changing 300 DPI to 72 DPI is the wrong fix. Resize the image, compress it, or both.

When 300 DPI actually matters

300 DPI is useful shorthand for close-viewed print work. It means the print file has 300 pixels for each inch of final output.

Common 300 DPI cases:

• Passport and visa photos.
• 4 x 6 and 5 x 7 photo lab prints.
• Small marketing flyers and brochures.
• Book or magazine images.
• Product labels viewed up close.
• Scans where small text or fine lines matter.

The math:

For print, the physical size is not optional. "300 DPI" alone is incomplete. A 300 DPI image for a 2 x 2 inch passport photo is 600 x 600 pixels. A 300 DPI image for an A4 page is about 2480 x 3508 pixels. Those are wildly different files.

When 300 DPI does not matter

300 DPI is usually the wrong thing to focus on for:

• Website images.
• Social media posts.
• Email attachments.
• Product thumbnails.
• Blog screenshots.
• App icons and interface graphics.
• Online forms that validate pixel dimensions and file size.

Some upload portals mention DPI in their instructions because the final output may be printed. Even then, the portal may actually check pixel dimensions, aspect ratio, file size, color mode, or face position rather than the metadata tag. If the requirement says "2 x 2 inches at 300 DPI," convert that to pixels: 600 x 600.

For screens, use pixel requirements. For print, use pixel requirements plus physical size.

Retina and HiDPI screens are not "300 DPI"

High-density screens need more source pixels than older screens, but that is not the same as changing the file metadata to 300 DPI.

Example:

• The design displays a product photo at 600 CSS pixels wide.
• A 1x screen can use a 600 px wide source.
• A 2x screen benefits from a 1200 px wide source.
• A 3x screen may benefit from an 1800 px wide source if the detail matters.

The image can still be tagged 72 DPI, 96 DPI, or 300 DPI and the layout logic is the same. What matters is the relationship between source pixels and displayed CSS pixels.

This is why responsive images use descriptors such as 1200w or 2x, not "300dpi." The browser is trying to pick an image with enough pixel data for the rendered size, screen density, and network conditions.

How to translate common requests

People often ask for DPI changes when they really mean something else. Translate the request before editing the file.

That one extra question prevents most DPI mistakes.

How PhotoTools handles DPI-related tasks

PhotoTools is built around the thing that actually changes output: pixels.

For web work:

1. Use Resize to set the real pixel dimensions.
2. Use compression if there is a file-size target.
3. Keep the original file untouched.
4. Export a web copy named for its use, such as hero-1600.jpg or card-600.webp.

For passport or ID photo printing:

1. Open the Passport Photo Maker.
2. Choose a preset such as 2 x 2 inch, 35 x 45 mm, or a custom size.
3. The tool converts the physical photo size to pixels at the selected DPI.
4. It builds a 4 x 6 or 6 x 4 print sheet in the browser.
5. Print at 100% scale, actual size, with fit-to-page disabled.
6. Measure the printed photo before submission.

The local implementation uses the selected photo size, sheet size, and DPI to calculate pixel dimensions. For example, a 4 x 6 inch sheet at 300 DPI becomes a 1200 x 1800 pixel canvas. A 2 x 2 inch photo area at 300 DPI becomes 600 x 600 pixels.

That is a real print layout. It is different from opening a small web image, changing the metadata field to 300, and hoping the print becomes sharp.

Practical checklist

Use this checklist before you edit a file because someone mentioned DPI:

• If the destination is a website, ask for pixel dimensions and file-size limits.
• If the destination is print, ask for physical size and target DPI/PPI.
• If the file is too heavy, resize or compress instead of changing metadata.
• If the image is blurry, check source pixels, compression, and display size.
• If the print is soft, calculate whether the source has enough pixels.
• If the print is the wrong physical size, check printer scaling and paper size.
• If the output is a passport or visa photo, measure the final print and verify the official requirements.

The short version: DPI connects pixels to paper. Pixels and CSS control the web.

Technical sources checked

This guide was reviewed against:

• W3C CSS Values and Units Module Level 4, for CSS absolute units, resolution units, and the 1dppx = 96dpi relationship.
• W3C CSS Images Module Level 4, for how CSS defines image resolution and the image-resolution property.
• MDN: image-resolution, for current implementation notes and the experimental status of CSS image-resolution.
• MDN: HTMLImageElement naturalWidth, for browser image sizing in CSS pixels.
• MDN: img element reference, for srcset, sizes, width descriptors, and browser source selection.
• Adobe Photoshop image size and resolution, for Photoshop's distinction between dimensions, resolution, and resampling.
• Adobe Photoshop resizing and resampling, for how resampling changes pixel data and why resolution/physical size are print concepts.

Bottom line: changing a DPI tag is rarely the fix. Decide the destination first, then change the pixels, compression, or print layout that destination actually uses.