Developer's Unit Conversion Cheat Sheet: Bytes, Pixels, and Beyond

Unit conversions seem trivial until you realize that 1 GB can mean two different things, that rem and em are not the same, and that your cloud provider bills in GiB while your operating system reports in GB. This guide covers the conversions developers actually need, with the gotchas that cause real bugs.

Data sizes: decimal vs binary

This is the single biggest source of confusion in computing. There are two systems:

Decimal (SI) prefixes

Used by storage manufacturers, network speeds, and most cloud providers:

Binary (IEC) prefixes

Used by operating systems, RAM manufacturers, and some cloud services:

Why this matters

When you buy a 1 TB hard drive, you get 1,000,000,000,000 bytes (decimal). But your OS reports it as approximately 931 GiB (binary). You did not lose 69 GB — the two systems just count differently.

AWS bills EBS storage in GiB. If you request 100 GiB, you get 107,374,182,400 bytes — about 7.4% more than 100 GB.

1 TB (decimal) = 0.909 TiB (binary)
1 TiB (binary) = 1.0995 TB (decimal)

When writing code that handles file sizes, always be explicit about which system you are using. A function named formatBytes should document whether it uses 1024 or 1000 as the base.

CSS units

CSS has a proliferating set of units, each with different use cases:

Absolute units

• px — The workhorse. 1 CSS pixel is 1/96th of an inch at standard density. On a 2x Retina display, 1 CSS pixel equals 2 device pixels.

Relative units

• rem — Relative to the root element's font size. If html { font-size: 16px }, then 1rem = 16px. Use this for most sizing — it scales predictably when users change their browser font size.

• em — Relative to the parent element's font size. This compounds: if a parent is 1.2em and a child is 1.2em, the child is effectively 1.44em of the root. This compounding makes em tricky for nested elements.

• % — Relative to the parent element's corresponding property. width: 50% is half the parent's width. font-size: 150% is 1.5x the parent's font size.

Viewport units

• vw — 1% of the viewport width. 100vw is the full viewport width.
• vh — 1% of the viewport height. Beware: on mobile browsers, 100vh can extend behind the URL bar, causing overflow.
• dvh — Dynamic viewport height. Accounts for mobile browser chrome that appears and disappears. Use this instead of vh for mobile-friendly full-screen layouts.
• svh / lvh — Small and large viewport heights. svh is the viewport when all browser chrome is visible. lvh is the viewport when chrome is hidden.

The rem conversion table

With a root font size of 16px (the browser default):

A quick formula: *px = rem 16** (assuming default root font size).

Time units

Developers work with multiple time representations:

Key gotcha: JavaScript Date.now() returns milliseconds, but Unix timestamps are in seconds. Divide by 1000 when converting. Also, months are 0-indexed — new Date(2026, 0, 1) is January, not February.

Network speeds

Network speeds are measured in bits per second (bps), not bytes. To convert to bytes, divide by 8:

100 Mbps = 12.5 MB/s
1 Gbps = 125 MB/s

A "gigabit" internet connection transfers roughly 125 megabytes per second under ideal conditions. Overhead from TCP headers, encryption, and protocol framing typically reduces this by 5-10%.

Practical advice

1. Always show the unit. fileSize: 1024 means nothing. fileSize: "1024 bytes" or fileSizeBytes: 1024 is clear.
2. Use the right base. For file sizes displayed to users, match what their OS uses (binary on macOS and Linux, often decimal on Windows for drive sizes).
3. Do not mix systems. If your API returns sizes in bytes and your frontend formats them in MiB, document both explicitly.

Try our Unit Converter to convert between any units instantly — right in your browser, no upload required.