bytes vs filesize vs pretty-bytes: Formatting Byte Values in JavaScript

Converting raw byte counts into human-readable strings is a common task in web development — whether you are displaying file sizes to users, logging memory usage, or validating HTTP headers. While bytes, filesize, and pretty-bytes all solve this problem, they take different approaches regarding flexibility, parsing capabilities, and environment fit. Let's break down how they handle real-world scenarios.

🧮 Core Usage: Formatting Numbers

All three packages accept a number and return a string, but their default output styles differ.

bytes produces compact output without spaces between numbers and units.

import bytes from 'bytes';

console.log(bytes(1024)); 
// Output: "1KB"

console.log(bytes(1500)); 
// Output: "1.5KB"

filesize includes a space by default and offers more readable decimals.

import { filesize } from 'filesize';

console.log(filesize(1024)); 
// Output: "1.02 KB"

console.log(filesize(1500)); 
// Output: "1.5 KB"

pretty-bytes focuses on clean, localized output with spaces.

import prettyBytes from 'pretty-bytes';

console.log(prettyBytes(1024)); 
// Output: "1.02 kB"

console.log(prettyBytes(1500)); 
// Output: "1.5 kB"

🔁 Parsing vs Formatting: Bidirectional vs One-Way

A key architectural difference is whether the library can convert strings back to numbers.

bytes supports bidirectional conversion. If you pass a string, it returns a number.

import bytes from 'bytes';

// Formatting
console.log(bytes(1024)); // "1KB"

// Parsing
console.log(bytes('1KB')); // 1024
console.log(bytes('1mb')); // 1048576

filesize is strictly for formatting. It does not parse strings back to numbers.

import { filesize } from 'filesize';

// Formatting
console.log(filesize(1024)); // "1.02 KB"

// Parsing (Not supported)
// filesize('1KB') would throw an error or return invalid

pretty-bytes is also strictly for formatting. It expects a number input.

import prettyBytes from 'pretty-bytes';

// Formatting
console.log(prettyBytes(1024)); // "1.02 kB"

// Parsing (Not supported)
// prettyBytes('1KB') would return "NaN B" or similar

⚙️ Configuration: Customization Depth

When you need to control rounding, units, or standards, the packages diverge sharply.

bytes has limited options, mostly focused on casing and separators.

import bytes from 'bytes';

bytes(1000, { 
  unitSeparator: ' ', 
  decimalPlaces: 2 
}); 
// Output: "1.00 KB"

filesize offers extensive control over bases, bits, and symbols.

import { filesize } from 'filesize';

filesize(1000, { 
  base: 2, // IEC standard (KiB)
  bits: true, // Show bits instead of bytes
  round: 1 
}); 
// Output: "7.8 Kib"

pretty-bytes keeps options minimal, focusing on locale and binary standards.

import prettyBytes from 'pretty-bytes';

prettyBytes(1000, { 
  binary: true, // Use 1024 base
  locale: 'de-DE' // German locale formatting
}); 
// Output: "1,02 KiB"

🌍 Locale and Internationalization

Displaying numbers correctly for different regions matters for user-facing apps.

bytes does not support locale-aware formatting natively. You get standard dots for decimals.

import bytes from 'bytes';

// No locale option available
bytes(1000.5); 
// Output: "1KB" (rounded) or "1.001KB"

filesize supports locale options to handle decimal separators.

import { filesize } from 'filesize';

filesize(1000.5, { locale: 'de-DE' }); 
// Output: "1,00 KB" (comma separator)

pretty-bytes has robust locale support built into the core API.

import prettyBytes from 'pretty-bytes';

prettyBytes(1000.5, { locale: 'de-DE' }); 
// Output: "1,001 kB"

🖥️ Environment Fit: Backend vs Frontend

Where you run the code influences which tool makes sense.

bytes is historically tied to the Node.js ecosystem. It is common in Express middleware and server logs.

// Typical Node.js backend usage
app.use((req, res, next) => {
  const limit = bytes('5mb');
  if (req.headers['content-length'] > limit) {
    return res.status(413).send('Too Large');
  }
  next();
});

filesize works everywhere but shines in complex admin dashboards where users toggle settings.

// React dashboard component
function FileRow({ size }) {
  return (
    <td>{filesize(size, { standard: 'jedec' })}</td>
  );
}

pretty-bytes is optimized for modern frontend builds and bundle analysis tools.

// Webpack bundle analyzer or UI card
function BundleCard({ size }) {
  return (
    <div>{prettyBytes(size, { files: true })}</div>
  );
}

📊 Summary: Key Differences

💡 The Big Picture

bytes is the utility player for Node.js developers — especially when you need to parse incoming header strings or validate sizes on the server. Its bidirectional capability saves you from writing custom parsers.

filesize is the power tool for data-heavy interfaces. If your users need to switch between bits and bytes, or require specific rounding rules, this package handles the complexity without extra code.

pretty-bytes is the modern choice for frontend displays. It respects user locales, looks clean by default, and integrates well with build tools that report bundle sizes.

Final Thought: If you are building a server API, reach for bytes. If you are building a user-facing dashboard with specific formatting needs, choose filesize. If you just need a file size to look good in a UI card with minimal fuss, pretty-bytes is the way to go.