Pixel Converter

What is the pixel converter?

The pixel converter translates between digital pixels and real-world length units (millimeters, centimeters, inches) at any DPI you choose. CSS pixels assume 96 DPI by default, but print work uses 300 DPI and photo print can hit 600 DPI — at different DPI values, the same pixel count maps to very different physical sizes. Type a value into any of the four units, pick the DPI preset that matches your context, and the other three units update in real time. Every result is one click away from the clipboard.

How to use the pixel converter

1. Type the value you want to convert into the input field — for example, 100.
2. Pick the unit your value is in: pixels, millimeters, centimeters, or inches.
3. Select a DPI preset — 96 DPI for web, 300 DPI for print, or pick "Custom" to enter your own DPI.
4. Read the converted values for the other three units in the results panel below.
5. Click Copy next to any result to put it on your clipboard, or share the URL — your input persists as a query parameter.

Who uses a pixel converter

• Students: Math and physics homework involving pixel-to-millimeter conversions, plus screen-resolution exercises in computer-graphics courses.
• Web & UI designers: Sizing icons, padding, and components from physical mockup measurements (mm) into CSS pixels at the right reference DPI.
• Print designers: Converting Photoshop or Figma pixel exports into millimeters and inches at 300 DPI before sending to a printer.
• Photographers: Calculating physical print dimensions from camera output (e.g. 4000 × 3000 px at 300 DPI prints to 13.3 × 10 inches).
• Developers: Validating CSS pixel values against the physical sizes specified in product or accessibility specifications.

Why this converter

• All four units (pixels, millimeters, centimeters, inches) update in real time as you type.
• Five built-in DPI presets cover the common cases — 96 DPI web, 72 DPI Mac legacy, 150/300/600 DPI for print.
• Custom DPI input for non-standard displays (Retina, high-DPI monitors) and specialty print workflows.
• Shareable URL — your value, source unit, and DPI persist as query parameters.
• 100% browser-based: no signup, no ads in the result panel, and the math is open source.

How accurate is the converter?

The converter uses the standard 25.4 millimeters-per-inch ratio and the DPI you specify, computed in IEEE 754 double precision. Results are exact within float rounding (≤1×10⁻⁶ relative error). The only source of real-world inaccuracy is the DPI value itself — if your display does not actually run at the assumed DPI, calibrate first with the Screen Ruler tool.

Frequently asked questions

What is a pixel?

A pixel is the smallest discrete unit of a digital display or image. Its physical size is not fixed — it depends on the screen's pixel density (DPI). On a 96-DPI web display, one pixel is exactly 1/96 of an inch (about 0.265 mm); on a 300-DPI print, one pixel is 1/300 of an inch (about 0.085 mm).

What is DPI and why does it matter?

DPI (dots per inch) is the conversion factor between pixels and physical length. The same 100 px maps to 26.46 mm at 96 DPI but only 8.47 mm at 300 DPI. You must use the DPI of the target medium — the screen, the print, or the export — for the conversion to be physically meaningful.

How do I convert pixels to millimeters?

Divide the pixel count by the DPI to get inches, then multiply by 25.4 to get millimeters: mm = (px / DPI) × 25.4. For 100 px at 96 DPI: 100/96 × 25.4 ≈ 26.46 mm. The converter does this for you in real time.

Should I use 72 or 96 DPI for the web?

Use 96 DPI. CSS, browsers, and operating systems standardized on 96 reference pixels per inch in the 1990s. The 72 DPI value is a legacy from early Apple typography (one pixel = one printer's point) and remains useful only for specific Mac-era assets — modern web work assumes 96.

What DPI should I use for print?

Use 300 DPI for high-quality magazine and book print, 150 DPI for draft proofs and large-format work, and 600 DPI only for photo prints, fine line art, or text under heavy magnification. Going above 300 DPI for general work increases file size without visible improvement on most papers.

How does Retina/HiDPI affect the conversion?

Retina and other HiDPI displays render two or three physical pixels for every CSS pixel. The converter works in CSS pixels by default, so 100 CSS px at 96 DPI is correct for any HiDPI screen. If you need the physical pixel count, multiply by the device pixel ratio (window.devicePixelRatio in a browser).

Why does my web design look smaller on a 4K monitor?

Most operating systems run 4K monitors at 150–200% scaling, which keeps CSS pixels visually similar to a 1080p display. If scaling is off, your design will appear physically smaller because the same pixel count covers fewer real inches. Adjust DPI scaling in the OS settings, or use rem/percent units instead of fixed px.

DPI deep dive — pick the right number once

Every pixel-to-length conversion is just one equation: length = pixels ÷ DPI. The hard part is choosing the DPI that matches the medium your output will live in. The wrong DPI doesn't error — it silently produces a number that's correct mathematically and wrong physically. The presets below cover the cases that come up in 95% of real work.

Web work — always 96 DPI

CSS, browsers, and operating systems standardised on 96 reference pixels per inch in the late 1990s and that number has not moved since. Every modern browser treats 1 CSS pixel as 1/96 inch regardless of the physical display. Retina and 4K monitors render at higher physical density but the OS scales CSS pixels back to the 96-DPI reference, so your math stays valid. Treat 72 DPI as legacy — it only matters if you are pulling assets from pre-OS-X Macs.

Print work — 150, 300, or 600 DPI

Most magazines, books, and consumer photo prints use 300 DPI. Drop to 150 DPI for draft proofs and large-format work where viewing distance hides the resolution loss; that halves the file size and still reads as sharp from a metre away. Push to 600 DPI only when the print will be inspected up close — fine line art, technical drawings, small text on glossy paper. Going beyond 600 DPI almost never improves visible quality and burns disk space.

Retina and HiDPI — work in CSS pixels

A Retina display renders two or three physical pixels for every CSS pixel, but the OS hides this from your code. Stick with CSS pixels (96 DPI) for layout math. If you need the actual physical pixel count — for example when shipping bitmap assets that should look crisp on every device — multiply by window.devicePixelRatio at runtime and ship @2x or @3x variants. The pixel converter treats input as CSS pixels by default; tick the Custom DPI box only when you genuinely have measured the physical pixel density of a known display.

Common conversion patterns

Some pixel values come up so often they are worth memorising. The table below shows what 100 px, 1000 px, and a typical full HD width (1920 px) translate to at the four most common DPI values.

Practical tips for developers

Verify in DevTools first

Before trusting a conversion, confirm the browser is reporting 96 reference DPI by typing window.matchMedia('(min-resolution: 96dpi)').matches into the console. On a correctly configured system this returns true. If it returns false, your OS scaling or zoom level is non-default and the conversion needs adjustment.

Always export at the target DPI

Photoshop, Figma, and most design tools export at the canvas DPI by default. Set the canvas DPI to your target medium before exporting — exporting a 96-DPI canvas at 300 DPI does not actually upsample the image, it just relabels the metadata and prints at a third of the intended physical size.

Calibrate the screen for ground truth

If your work depends on physical accuracy — measuring a hand-held object against the screen, sizing an icon to a known credit card width — open the Screen Ruler tool and calibrate against a real credit card first. Your screen's actual DPI rarely matches the spec sheet; calibration pins the conversion to physical reality.