Back to Blog

How to Use a Pixel Converter (Step-by-Step Walkthrough)

Screen Ruler TeamApril 28, 20269 min read
how to use pixel converterpixels to mmpixels to inchesDPI conversion

You don't need a chart, a calculator, or a search of "how many mm in 96 px" to convert pixels to physical units. The free Pixel Converter at Screen Ruler Online handles the math instantly — but only if you know which DPI to pick. This guide walks through the entire workflow: pasting a value, choosing the DPI for your context, and reading the right unit out the other side. By the end you'll have done the conversion three different ways for three different situations: web design, print prep, and photo prints.

The 30-second version

If you're in a hurry, the steps are:

  1. Open screenruler.online/pixel-converter.
  2. Type or paste your value into the input field.
  3. Click the unit chip (px / mm / cm / inch) that matches your value.
  4. Pick a DPI preset — 96 for web, 300 for print, 600 for photo.
  5. Read the converted values in the results panel. Click Copy next to any unit to put it on your clipboard.

That's the whole thing. The rest of this guide is for when you need to know why you picked 96 over 300, or when the result doesn't match what your design tool reports, or when the conversion goes the other direction.

Step 1: Open the converter

Navigate to https://screenruler.online/pixel-converter. The page loads instantly — there's no account, no signup, and the converter is rendered server-side so the math works even on a slow connection. Bookmark it; you'll come back.

The page has three regions: a value input on the upper-left, a DPI selector on the upper-right, and a results panel below showing all four units (pixels, millimeters, centimeters, inches) at once. As soon as the page loads, the default state is 100 px at 96 DPI, which already shows ~26.46 mm / ~2.65 cm / ~1.04 inches. So you can verify the page is working before typing anything.

Step 2: Enter your value

Click the input field labeled "Value to convert" and type or paste your number. The converter accepts:

  • Plain integers: 100
  • Decimals: 42.5, 0.75
  • Numbers with thousand separators: 1,920 is parsed as 1920
  • Surrounding whitespace: 100 works
  • Zero: a valid input — gives you 0 in every unit

It doesn't accept negative numbers (length can't be negative) or non-numeric strings. If your input is invalid, the results panel shows "Enter a non-negative number to see the conversions." instead of stale numbers — so you'll never copy a misleading value by accident.

Step 3: Pick the source unit

Below the input field there are four unit chips: Pixels / Millimeters / Centimeters / Inches. Click the one that matches the number you just typed. The converter highlights the active chip in blue and treats your input as that unit; the other three rows in the results panel become the conversions.

Common patterns:

  • From a design tool (Figma, Photoshop, Sketch, Adobe XD): you almost always have pixels, so leave Pixels selected.
  • From a printer's spec or PDF: usually millimeters or inches. Pick the matching chip.
  • From a CSS rule (width: 1024px): pixels.
  • From a print mockup ("100 mm × 50 mm logo"): pick Millimeters for one dimension at a time.

Step 4: Pick the right DPI

This is the step that trips people up. The converter uses 96 DPI by default — the CSS reference resolution that browsers and operating systems standardized on. That's correct for web work but not for print or photography. The DPI dropdown gives you five presets:

Preset DPI When to use
Web standard 96 CSS, browsers, OS reference
Mac legacy 72 Early Apple typography (rarely needed today)
Print draft 150 Posters, banners, large-format proofs
Print high quality 300 Magazines, books, packaging — the most common print DPI
Photo print 600 Fine art prints, line work, text under magnification

There's also a Custom option that lets you enter any DPI — useful for non-standard hardware (a 220 PPI iPad, a 300 DPI proofer, or an industrial printhead at 1200 DPI).

A simple rule of thumb: if it's going to be displayed on a screen, use 96; if it's going to be printed, use 300; if it's a photo print viewed up close, use 600.

Step 5: Read the result

The results panel below shows all four units at once. The unit you selected as input is highlighted (so you don't accidentally read your own number back as if it were converted). Each row shows the value formatted to the right precision:

  • Pixels: integer (browser pixels are discrete)
  • Millimeters: 2 decimals (26.46)
  • Centimeters: 3 decimals (2.646)
  • Inches: 4 decimals (1.0417 — typography uses 1/1000 inch)

Click Copy next to any unit to put <value> <unit> on your clipboard. The button briefly shows "Copied!" so you know it landed.

Step 6: Share or bookmark

The converter mirrors your current state into the URL as query parameters: ?value=100&from=px&dpi=96. That means you can:

  • Share the URL with a teammate so they see the same conversion.
  • Bookmark a specific configuration — for example, "300 mm at 300 DPI" for a recurring print spec check.
  • Reload without losing your numbers.

The URL updates as you type, so there's no save button to remember.

Worked example 1: Web banner sizing

You've been told to design a hero image at "1920 × 720 px" but the marketing team wants to know how big that is on a typical desktop monitor.

  1. Type 1920 in the input.
  2. Pixels chip is already selected (default).
  3. DPI is already 96 (web).
  4. Read the millimeters row: 508.00 mm — about 50 cm wide.
  5. Reset the input to 720 to get the height: 190.50 mm — about 19 cm tall.

So the banner physically spans about 50 × 19 cm on a standard 1080p monitor. On a 4K display at 200% scaling, the same CSS dimensions still cover that physical area; on a 4K display at 100%, it'd be half size — which is why CSS uses 96 reference pixels regardless of physical pixel density.

Worked example 2: Print logo at exact size

A printer asks you to deliver a logo that prints at "exactly 50 mm wide on a 300 DPI brochure". You need to know how many pixels of source detail to provide.

  1. Type 50 in the input.
  2. Click the Millimeters chip.
  3. Switch DPI to Print high quality (300).
  4. Read the pixels row: 591 pixels.

So your source artwork needs to be at least 591 pixels wide. If you export at 600 px, you have 1.5% headroom for cropping and you'll print sharp at 305 DPI. If you export at 400 px, the printer will upscale to 591 effective at 200 DPI — visibly soft on glossy stock.

The converter goes both directions: you can also start with the desired pixel count, switch the DPI to match the medium, and read the corresponding physical size.

Worked example 3: Photo print from camera

You shot a photo at 6000 × 4000 pixels on a 24-megapixel camera. You want to print at 300 DPI on glossy photo paper. How big can the print be?

  1. Type 6000 in the input.
  2. Pixels chip selected.
  3. DPI = 300.
  4. Read inches: 20.0000 inches — and centimeters: 50.800 cm.

So the longest side prints at exactly 50.8 cm at native resolution. Going larger means upsampling: 70 cm at 300 DPI would need 8268 pixels, and you only have 6000. You can either accept a softer print (about 215 effective DPI) or bring the print down to ~63 cm and stay native.

Going the other direction: dimensions to pixels

Most of the time you start with pixels and convert to physical units. But it works in reverse just as well:

  • Print spec: "Need a 100 × 100 mm icon at 300 DPI." → Type 100 mm at 300 DPI → 1181 pixels each side.
  • Banner ad: "210 mm wide at 96 DPI for an A4 PDF reader." → 794 pixels.
  • Display panel: "An 11.6-inch display at 1080p — what's the DPI?" → Solve for DPI: 1920 px / 11.6 inch ≈ 165 DPI. Switch to Custom DPI = 165.

For the third case the converter doesn't have a "compute DPI" mode, but you can verify by typing 11.6 inch at the candidate DPI and checking the pixels match.

Common mistakes

Forgetting to switch DPI for print. A "100 mm logo at 300 DPI" gives you 1181 pixels. If you forget and use the default 96 DPI, the converter says 378 pixels — and your printer will tell you the file's too small. Always check the DPI dropdown before reading print numbers.

Trusting the file's saved DPI tag. Photoshop's "Save for Web" sets the file metadata to 72 DPI. The browser ignores it. The print press uses what the layout tool tells it, not the file tag. The converter ignores it too — it asks you what DPI to use, every time.

Mixing CSS pixels and device pixels on Retina. When you measure a Retina screen with a physical ruler and try to back-compute DPI, you'll get ~163 PPI on an iPhone. CSS still uses 96. Both are right; they describe different things. The converter speaks CSS pixels. For physical-pixel measurement on a specific screen, calibrate with the Screen Ruler tool.

Ignoring the input row highlight. When the Pixels row is highlighted, the value in that row is your input, not a conversion. Read the other three rows. (This catches more designers than you'd think.)

Next steps

Once the converter is part of your workflow, two related tools tend to come up:

  • The Aspect Ratio Calculator handles the orthogonal problem: "is 1920 × 1080 the same shape as 3840 × 2160?" Use it together with the Pixel Converter when you're rebuilding an asset for a different medium and both dimensions and shape matter.
  • The Screen Ruler handles real-world calibration: it shows you a 1:1 ruler on your screen so you can compare a CSS measurement against a physical object (a credit card, a printout, a coin). When you suspect a DPI mismatch on a particular display, that's the tool that confirms it.

Bookmark all three and the entire pixel-to-physical-unit workflow becomes one tab away.

Related

Related Articles