Back to Blog

Pixels vs Millimeters: Complete Unit Conversion Guide

Screen Ruler TeamApril 28, 202612 min read
pixel converterpixels to mmpixels to inchesDPIPPI

Every screen and every print job sits on the same fault line: a pixel has no fixed physical size. The same 100-pixel rectangle looks like 26 millimeters on a typical browser, 8 millimeters on a magazine page, and as small as 4 millimeters on a fine-art print. The number that translates between digital pixels and real-world length is DPI (dots per inch) — and getting it right is the difference between a button you can comfortably tap and one your finger overshoots, between a logo that prints sharp and one that comes out fuzzy.

This guide walks through what a pixel actually is, why DPI matters, the math that converts between pixels and millimeters, the DPI standards you'll meet in the wild, and the practical workflows where designers, photographers, and developers have to do the conversion. Along the way, we'll point at the free Pixel Converter on Screen Ruler Online — open it in another tab and check the numbers as you read.

What is a pixel?

A pixel (short for "picture element") is the smallest discrete unit of a digital image or display. On a screen it's a single addressable dot, usually made of three subpixels — red, green, and blue — that combine to produce one perceived color. In an image file it's a single entry in a grid of color values. Critically, a pixel is a logical unit, not a physical one. Its real-world size depends entirely on how the device that renders it has been calibrated.

Consider a 1920×1080 image. On a 24-inch monitor running at native resolution, each pixel is about 0.265 mm wide. On a 5.5-inch phone showing the same image scaled to fit, each pixel is about 0.06 mm. On a magazine printed at 300 DPI, each pixel becomes 0.085 mm. The image is the same; the pixels' physical size is a function of the output medium.

This is why pixel-only specifications break down the moment you cross media. A "make this button 44 px tall" rule that gives a comfortable tap target on an iPhone produces a tiny strip on a 4K monitor and a massive shape on a billboard. To talk about real size, you need to talk about DPI.

What is DPI (and PPI)?

DPI stands for "dots per inch" — the number of pixels (or dots, in print) packed into one linear inch of physical surface. PPI is the same idea applied specifically to screens ("pixels per inch"). The two terms are used interchangeably in casual writing; this guide will mostly say DPI because that's what the conversion math depends on.

DPI is the conversion factor:

inches = pixels / DPI
millimeters = (pixels / DPI) × 25.4

The constant 25.4 is fixed: there are exactly 25.4 millimeters in one inch by international definition. The variable is DPI, and that's what changes between media:

Context Typical DPI What it means
Web (CSS pixels) 96 DPI The reference resolution for browsers and operating systems
Legacy Mac typography 72 DPI One pixel = one printer's point in early Apple software
Draft / large-format print 150 DPI Posters, banners, proofs
High-quality print 300 DPI Magazines, books, packaging
Photo / fine art 600 DPI Photo prints, line art, text under magnification

The same 100 pixels at these five DPIs maps to:

DPI Inches Millimeters
72 1.389 35.28
96 1.042 26.46
150 0.667 16.93
300 0.333 8.47
600 0.167 4.23

Notice how dramatically the physical length shrinks as DPI goes up. The pixel count never changes; only the assumed density does.

The math, walked through

Suppose you have a banner that's 800 pixels wide and you want to know how big it'll be on screen. Start with the formula:

inches = pixels / DPI = 800 / 96 ≈ 8.33 inches
millimeters = inches × 25.4 ≈ 211.67 mm
centimeters = inches × 2.54 ≈ 21.17 cm

So 800 px at the standard web 96 DPI is about 21 cm wide — roughly half a sheet of A4 paper.

Now move the same 800 px asset to a 300-DPI print:

inches = 800 / 300 ≈ 2.67 inches
millimeters ≈ 67.73 mm

Same pixel count, dramatically smaller print. To get the same physical size on print, you'd need to triple the pixel count to about 2400 px. That's why print designers ask for "300 DPI versions" of web assets — the photo or logo has to be resampled or re-exported at higher pixel density for the same physical size to land sharp.

The reverse direction is just as common. A printer asks for a 100 mm × 50 mm logo at 300 DPI. The required pixel dimensions are:

pixels = (millimeters / 25.4) × DPI
       = (100 / 25.4) × 300 ≈ 1181 px wide
       = (50 / 25.4) × 300 ≈ 591 px tall

The Pixel Converter does this round-trip in real time. Type 100 in the millimeters field, switch the DPI to 300, and it shows you 1181 pixels at the click of a unit chip.

Web reality: 96 DPI and the CSS pixel

Modern web browsers, operating systems, and CSS specifications all standardize on 96 reference pixels per inch. This means a 96 px line is supposed to render as one inch of physical screen real estate. In practice a few things complicate that:

  1. Display scaling. macOS and Windows can scale UI by 125%, 150%, 200%, etc. A 100 px line on a 4K display at 200% scaling shows up at the same physical size as on a 1080p display at 100% — a system-level adjustment so text doesn't shrink to unreadable size on high-DPI hardware.
  2. Device pixel ratio (DPR). A "Retina" or HiDPI display renders multiple physical pixels for each CSS pixel. iPhone screens commonly run at DPR 3, meaning the browser draws 3 actual pixels for each CSS pixel you specify. This keeps text crisp without you doing anything special; CSS keeps speaking in CSS pixels and the GPU handles the upsampling.
  3. Browser zoom. User-initiated zoom multiplies CSS pixels relative to physical pixels. 150% zoom turns a 100 px line into 150 CSS pixels of work for the layout engine.

The takeaway: for web design, use 96 DPI. CSS pixels already speak the right language. If you're producing a physical mockup that needs to print at exact size, switch the converter to 300 DPI and recompute.

Print reality: 300 DPI and resampling

Print expects every pixel of source data to be physically packed at the device's resolution. A magazine running at 300 DPI wants to see ~300 pixels' worth of detail in every printed inch. Send less, and the press has to interpolate — your edges go soft, fine lines get jaggy.

Designers convert in two phases:

  1. Layout in real-world units. A magazine spread is "210 mm × 297 mm" (A4 portrait), not "2480 × 3508 pixels". InDesign, Affinity Publisher, and Photoshop's print mode all let you set up canvases in millimeters or inches.
  2. Export at the target DPI. When the layout is exported to PDF or TIFF for the press, the software resamples raster images to the target DPI. A photo placed at 100% scale on a 300-DPI page should already be at 300 DPI in pixel terms. If it's only 150 DPI in pixel terms, it'll be doubled up by the export — which is when softness creeps in.

The Pixel Converter is most useful during phase 1 — figuring out how many pixels to source. If you need a logo to print at exactly 50 mm wide on a 300-DPI brochure, you need 591 px of source detail. Source it at 300 px and you'll see fuzz on press.

Photography: from sensor to print

A 24-megapixel camera produces an image around 6000 × 4000 pixels. Photographers convert pixels → physical print sizes constantly:

At 300 DPI: 6000 / 300 = 20 inches wide → 50.8 cm
At 240 DPI: 6000 / 240 = 25 inches wide → 63.5 cm
At 180 DPI: 6000 / 180 ≈ 33 inches wide → 84.7 cm

300 DPI is the gold standard for prints viewed at arm's length (books, gallery prints). 240 DPI is acceptable when viewing distance grows — large wall art that you stand back from. 180 DPI is the floor below which most people start to perceive softness.

The Pixel Converter's 300 and 600 DPI presets cover the photo workflow cleanly: drop your sensor's pixel count in, see the print dimensions in inches and centimeters, decide whether to print at native resolution or upscale.

Retina, HiDPI, and the device pixel ratio

The iPhone 4 introduced "Retina" branding in 2010 — a display dense enough that individual pixels are below the resolution of human vision at typical viewing distances. Today, most laptop, tablet, and phone screens are HiDPI, with two or three physical pixels for every CSS pixel.

For the converter, this doesn't change anything. CSS pixels are still 96 DPI by web convention. The HiDPI math is handled by the browser. If you're doing icon design or asset export specifically targeting devicePixelRatio (e.g., exporting @2x and @3x versions of the same asset), then yes, double or triple the pixel count of your source — but the conversion to physical millimeters still uses 96 DPI for the CSS reference.

If you're doing a visual mockup at 1:1 physical size on a HiDPI screen, you can either:

  • Keep working in CSS pixels at 96 DPI (recommended — the OS handles scaling)
  • Multiply by window.devicePixelRatio for the actual physical pixel count, and then divide by the device's true PPI (which varies by hardware) for the physical size

The converter does the simpler version. For accurate physical-size measurement on any specific screen, calibrate first with the Screen Ruler tool.

Common gotchas

Mixing 72 and 96. Old Mac assets exported from Illustrator or Photoshop sometimes carry a 72 DPI metadata tag. If you import them into a 300 DPI print layout, the software might scale them up unexpectedly. Always check the imported file's "actual" pixel dimensions, not its DPI tag.

"DPI" on web exports. Photoshop's "Save for Web" sets DPI to 72 by default — and it doesn't matter, because browsers ignore the tag and assume 96. Don't worry about it. The pixel count is what matters for web.

Shrinking print past native resolution. Going below 200 DPI for print viewed at reading distance is when softness becomes obvious. The Pixel Converter doesn't stop you, but the math will tell you the truth: a 600 px asset at 50 mm wide is 305 DPI; the same asset at 100 mm wide is only 152 DPI.

Forgetting CSS scaling on 4K monitors. A 1080p design tested on a 4K monitor at 200% scaling looks fine. Drop the scaling to 100% and the same design looks half-size. Always test at typical user scaling, not native resolution.

Aspect-ratio creep when resampling. If you scale a 1920 × 1080 image to fit a 1024 × 1024 square, you'll either crop or distort. The pixel count changes; the aspect ratio matters too. Pair the Pixel Converter with the Aspect Ratio Calculator when both factors come into play.

When to use which DPI

A quick reference for the DPI to pick:

  • Web design, app UI, browser-only assets: 96 DPI. Always.
  • Document templates that may go to print: 96 for layout, but model the print output at 300 DPI before exporting.
  • Print proofs, large-format banners, posters viewed from a distance: 150 DPI is fine.
  • Magazines, books, packaging, marketing collateral viewed up close: 300 DPI is the floor.
  • Photo prints, fine line art, text-heavy layouts under magnification: 300–600 DPI.
  • Old Mac legacy assets: 72 DPI exists for compatibility. Don't use it for new work.

When in doubt, default to 96 for screen and 300 for print. The Pixel Converter has both as one-click presets.

Putting it together

A typical brand designer's day might look like this. The product manager asks for "a hero banner, 1920 × 720 px, that prints sharp at 300 DPI for an event poster". You open the converter, enter 1920 in the pixels field, switch to 300 DPI: that's 162.56 mm wide. The poster spec is 297 mm × 420 mm (A3). At 162.56 mm, the asset will only fill the top half — which means you need a 3508 × 1316 px source for full-width 297 mm at 300 DPI. Now you know what to ask the photographer for.

A web developer adapting a print mockup goes the other way. The mockup is 100 mm tall at 300 DPI — that's 1181 px in the source, but the website displays at 96 DPI on screen. If they place the asset at 1181 px tall in CSS, it'll be ~308 mm tall on screen, way too big. They need to either downsample to 378 px (= 100 mm × 96 / 25.4) or set CSS dimensions in mm units explicitly.

The conversions are simple enough to memorize after a few rounds. But when you're moving assets between media at speed, having a dedicated tool that handles the math, remembers the DPI presets, and lets you copy the result is the difference between a smooth workflow and constant arithmetic. That's exactly what the Pixel Converter is for.

Related

Related Articles