Formatting and Parsing Byte Sizes in JavaScript
These libraries handle the conversion of raw byte counts into human-readable strings, though they serve different roles in the stack. bytes is widely used in backend environments, particularly with Express.js, for parsing HTTP headers like Content-Length as well as formatting. filesize offers deep customization for formatting, supporting bits, bytes, and various rounding strategies. pretty-bytes is the frontend standard for clean, localized output with minimal configuration. humanize-bytes provides a lightweight alternative but sees less active maintenance compared to the others.
Npm Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Formatting and Parsing Byte Sizes: bytes vs filesize vs humanize-bytes vs pretty-bytes
When displaying storage capacity, network speed, or file sizes, raw numbers like 1048576 mean nothing to users. These four packages solve that problem, but they target different layers of the application stack. Let's break down how they handle parsing, formatting, and localization.
🎯 Core Purpose: Parsing vs Formatting
The most critical difference lies in direction. Most tools only format numbers to strings, but bytes handles both directions, making it unique for server-side input handling.
bytes parses strings into numbers and formats numbers into strings.
- Useful for reading
Content-Lengthheaders or config files. - Returns
nullif the string is invalid.
import bytes from 'bytes';
// Format number to string
console.log(bytes(1024)); // '1KB'
// Parse string to number
console.log(bytes('1kb')); // 1024
filesize focuses strictly on formatting numbers into readable strings.
- Does not parse strings back to numbers.
- Returns a formatted string immediately.
import { filesize } from 'filesize';
// Format number to string
console.log(filesize(1024)); // '1.02 kB'
// Parse string to number (Not supported)
// console.log(filesize('1kb')); // Error
humanize-bytes is a simple formatter for numbers.
- No parsing capability.
- Minimal output style.
import humanize from 'humanize-bytes';
// Format number to string
console.log(humanize(1024)); // '1KB'
// Parse string to number (Not supported)
// console.log(humanize('1kb')); // Error
pretty-bytes is a dedicated formatter optimized for UI display.
- No parsing capability.
- Focuses on clean, localized output.
import prettyBytes from 'pretty-bytes';
// Format number to string
console.log(prettyBytes(1024)); // '1.02 kB'
// Parse string to number (Not supported)
// console.log(prettyBytes('1kb')); // Error
🛠 Configuration & Control
Developers often need to tweak rounding, units, or separators. filesize leads here, while pretty-bytes prefers sensible defaults.
bytes allows basic separators and decimal control.
- Good for matching existing backend styles.
- Options are limited compared to dedicated formatters.
import bytes from 'bytes';
bytes(1000, {
decimalPlaces: 2,
thousandsSeparator: ','
}); // '1000.00B'
filesize offers the deepest configuration options.
- Control rounding, base, bits vs bytes, and exponents.
- Best for technical dashboards requiring specific rules.
import { filesize } from 'filesize';
filesize(1000, {
round: 3,
base: 2,
bits: true
}); // '7.813 Kib'
humanize-bytes has minimal to no configuration.
- Designed for zero-setup usage.
- You get what you get without tuning.
import humanize from 'humanize-bytes';
// No options typically supported
humanize(1000); // '1KB'
pretty-bytes balances simplicity with key controls.
- Allows binary toggle and digit limits.
- Keeps API surface small to prevent misuse.
import prettyBytes from 'pretty-bytes';
prettyBytes(1000, {
binary: true,
maximumFractionDigits: 1
}); // '1 KiB'
📏 Unit Standards: IEC vs JEDEC
Confusion often arises between KB (1000 bytes) and KiB (1024 bytes). Different packages default to different standards.
bytes defaults to JEDEC (base 1024, no 'i').
- Matches common HTTP and OS conventions.
- Output looks like
1KBeven if it means 1024.
import bytes from 'bytes';
bytes(1024); // '1KB' (JEDEC style)
filesize lets you choose explicitly.
- Supports IEC (KiB), JEDEC (KB), and decimal (kB).
- Prevents ambiguity in technical contexts.
import { filesize } from 'filesize';
filesize(1024, { standard: 'iec' }); // '1 KiB'
filesize(1024, { standard: 'jedec' }); // '1 KB'
humanize-bytes typically follows JEDEC.
- Less explicit control over standards.
- Assumes common usage patterns.
import humanize from 'humanize-bytes';
humanize(1024); // '1KB' (JEDEC style)
pretty-bytes defaults to SI (base 1000) but supports binary.
- Aligns with modern web standards for storage.
- Switch to binary for memory-specific displays.
import prettyBytes from 'pretty-bytes';
prettyBytes(1000); // '1 kB' (SI style)
prettyBytes(1024, { binary: true }); // '1 KiB'
🌍 Locale & Internationalization
Global applications need number formatting that respects local conventions (e.g., commas vs periods).
bytes has no built-in locale support.
- You must handle separators manually.
- Suitable for server logs or internal systems.
import bytes from 'bytes';
// No locale option
bytes(1000.5); // '1000.5B'
filesize supports locale via options.
- Pass an ISO locale code to format numbers correctly.
- Useful for international admin panels.
import { filesize } from 'filesize';
filesize(1000.5, { locale: 'de-DE' }); // '1.000,5 B'
humanize-bytes lacks locale features.
- Output is fixed to English conventions.
- Not recommended for global consumer apps.
import humanize from 'humanize-bytes';
// No locale option
humanize(1000.5); // '1KB'
pretty-bytes has robust locale support.
- Uses
Intl.NumberFormatunder the hood. - Best choice for user-facing frontend interfaces.
import prettyBytes from 'pretty-bytes';
prettyBytes(1000.5, { locale: 'de-DE' }); // '1 kB'
📊 Summary Table
| Feature | bytes | filesize | humanize-bytes | pretty-bytes |
|---|---|---|---|---|
| Parse String | ✅ Yes | ❌ No | ❌ No | ❌ No |
| Format Number | ✅ Yes | ✅ Yes | ✅ Yes | ✅ Yes |
| Bits Support | ❌ No | ✅ Yes | ❌ No | ❌ No |
| Locale Support | ❌ No | ✅ Yes | ❌ No | ✅ Yes |
| Config Depth | Low | High | None | Medium |
| Primary Use | Backend/HTTP | Dashboards | Simple Scripts | Frontend UI |
💡 Final Recommendation
These tools solve similar problems but fit different slots in your architecture.
bytes is the backend specialist 🖥️. Use it in Node.js services when you need to read configuration values like 512mb or parse HTTP headers. It is the only choice here that handles input parsing reliably.
filesize is the power user tool 🛠️. Reach for it when you need to display network speeds in bits, enforce specific rounding rules, or support obscure unit standards. It handles edge cases the others ignore.
humanize-bytes is the legacy lightweight 🪶. Only use it for quick internal scripts where dependencies must be minimal and features like localization do not matter. For new projects, prefer pretty-bytes.
pretty-bytes is the frontend standard 🎨. It is the default choice for React, Vue, or Angular apps. It provides localized, clean output without requiring complex configuration.
Final Thought: For most modern web apps, pair bytes on the server for parsing inputs and pretty-bytes on the client for displaying results. This combination covers the full lifecycle of data handling — from ingestion to presentation.
How to Choose: bytes vs filesize vs humanize-bytes vs pretty-bytes
- bytes:
Choose
byteswhen working in Node.js environments, especially with Express, where you need to parse incoming byte strings from headers or configuration files. It is the only package in this group designed for bidirectional conversion (string to number and number to string). Use it for server-side logic where HTTP standards matter. - filesize:
Choose
filesizewhen you need granular control over output formatting, such as displaying network speeds in bits instead of bytes. It supports custom rounding, specific unit standards (JEDEC vs IEC), and locale formatting. It is ideal for dashboards or technical tools where precision and configuration are critical. - humanize-bytes:
Choose
humanize-bytesonly for simple projects where you need a quick, zero-config solution and do not require locale support or advanced options. Be aware that it receives less maintenance thanpretty-bytes, so it may not keep up with newer JavaScript standards. It works for internal tools where exact formatting rules are not strict. - pretty-bytes:
Choose
pretty-bytesfor modern frontend applications where clean, localized UI text is the priority. It handles internationalization out of the box and follows current best practices for unit display. It is the default choice for build tools, download progress bars, and user-facing file size indicators.
Popular Comparisons
README for bytes
Bytes utility
Utility to parse a string bytes (ex: 1TB) to bytes (1099511627776) and vice-versa.
Installation
This is a Node.js module available through the
npm registry. Installation is done using the
npm install command:
$ npm install bytes
Usage
var bytes = require('bytes');
bytes(number｜string value, [options]): number｜string｜null
Default export function. Delegates to either bytes.format or bytes.parse based on the type of value.
Arguments
| Name | Type | Description |
|---|---|---|
| value | number｜string | Number value to format or string value to parse |
| options | Object | Conversion options for format |
Returns
| Name | Type | Description |
|---|---|---|
| results | string｜number｜null | Return null upon error. Numeric value in bytes, or string value otherwise. |
Example
bytes(1024);
// output: '1KB'
bytes('1KB');
// output: 1024
bytes.format(number value, [options]): string｜null
Format the given value in bytes into a string. If the value is negative, it is kept as such. If it is a float, it is rounded.
Arguments
| Name | Type | Description |
|---|---|---|
| value | number | Value in bytes |
| options | Object | Conversion options |
Options
| Property | Type | Description |
|---|---|---|
| decimalPlaces | number｜null | Maximum number of decimal places to include in output. Default value to 2. |
| fixedDecimals | boolean｜null | Whether to always display the maximum number of decimal places. Default value to false |
| thousandsSeparator | string｜null | Example of values: ' ', ',' and '.'... Default value to ''. |
| unit | string｜null | The unit in which the result will be returned (B/KB/MB/GB/TB). Default value to '' (which means auto detect). |
| unitSeparator | string｜null | Separator to use between number and unit. Default value to ''. |
Returns
| Name | Type | Description |
|---|---|---|
| results | string｜null | Return null upon error. String value otherwise. |
Example
bytes.format(1024);
// output: '1KB'
bytes.format(1000);
// output: '1000B'
bytes.format(1000, {thousandsSeparator: ' '});
// output: '1 000B'
bytes.format(1024 * 1.7, {decimalPlaces: 0});
// output: '2KB'
bytes.format(1024, {unitSeparator: ' '});
// output: '1 KB'
bytes.parse(string｜number value): number｜null
Parse the string value into an integer in bytes. If no unit is given, or value
is a number, it is assumed the value is in bytes.
Supported units and abbreviations are as follows and are case-insensitive:
bfor byteskbfor kilobytesmbfor megabytesgbfor gigabytestbfor terabytespbfor petabytes
The units are in powers of two, not ten. This means 1kb = 1024b according to this parser.
Arguments
| Name | Type | Description |
|---|---|---|
| value | string｜number | String to parse, or number in bytes. |
Returns
| Name | Type | Description |
|---|---|---|
| results | number｜null | Return null upon error. Value in bytes otherwise. |
Example
bytes.parse('1KB');
// output: 1024
bytes.parse('1024');
// output: 1024
bytes.parse(1024);
// output: 1024