pretty-bytes vs bytes vs filesize vs humanize-bytes
Formatting and Parsing Byte Sizes in JavaScript
Search packages..
pretty-bytesbytesfilesizehumanize-bytes

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

3 Years

Github Stars Ranking

Stat Detail

Package
Downloads
Stars
Size
Issues
Publish
License
pretty-bytes25,114,6601,31016.1 kB018 days agoMIT
bytes047412.3 kB11-MIT
filesize01,70964.4 kB07 days agoBSD-3-Clause
humanize-bytes03-011 years agoMIT

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-Length headers or config files.
  • Returns null if 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 1KB even 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.NumberFormat under the hood.
  • Best choice for user-facing frontend interfaces.
import prettyBytes from 'pretty-bytes';

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

πŸ“Š Summary Table

Featurebytesfilesizehumanize-bytespretty-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 DepthLowHighNoneMedium
Primary UseBackend/HTTPDashboardsSimple ScriptsFrontend 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: pretty-bytes vs bytes vs filesize vs humanize-bytes

  • pretty-bytes:

    Choose pretty-bytes for 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.

  • bytes:

    Choose bytes when 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 filesize when 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-bytes only 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 than pretty-bytes, so it may not keep up with newer JavaScript standards. It works for internal tools where exact formatting rules are not strict.

Similar Npm Packages to pretty-bytes

pretty-bytes is a simple and effective npm package that converts a number of bytes into a human-readable string format. It is particularly useful for displaying file sizes in a way that is easy for users to understand, such as converting bytes into kilobytes (KB), megabytes (MB), or gigabytes (GB) with appropriate suffixes. The package is lightweight and straightforward, making it a popular choice for developers who need to present file sizes in their applications.

While pretty-bytes is a great option, there are alternatives in the npm ecosystem that offer similar functionality:

  • bytes is a utility that provides a way to convert between byte sizes and human-readable formats. It supports both converting from a string (like "1kB" or "2MB") to bytes and from bytes to a human-readable string. The bytes package is widely used and offers a simple API, making it a solid choice for developers looking for a reliable solution for byte size conversions.
  • filesize is another popular library that formats file sizes in a human-readable way. It provides a rich set of options for customizing the output, including the ability to specify the base (binary or decimal), add suffixes, and control the number of decimal places. filesize is particularly useful for applications that require more flexibility in how file sizes are displayed, making it a great alternative for developers who need advanced formatting options.

To see how pretty-bytes compares with bytes and filesize, check out the comparison: Comparing bytes vs filesize vs pretty-bytes.

Similar Npm Packages to bytes

bytes is a utility library for converting between byte sizes and human-readable formats. It allows developers to easily manipulate and display file sizes in a more understandable way, converting values like bytes into kilobytes, megabytes, and gigabytes. While bytes is a popular choice for this functionality, there are several alternatives available that offer similar capabilities. Here are a few noteworthy alternatives:

  • filesize is a versatile library for formatting and parsing file sizes. It provides a wide range of options for customizing the output, including different units and formatting styles. filesize is particularly useful for applications that need to display file sizes in a user-friendly manner, offering features like rounding, precision control, and even support for binary and decimal formats. If you require a highly customizable solution for displaying file sizes, filesize is an excellent choice.
  • humanize-bytes is a straightforward library designed to convert byte values into human-readable strings. It focuses on simplicity and ease of use, making it a great option for projects that need a quick and effective way to display file sizes without the need for extensive customization. humanize-bytes is particularly useful for developers looking for a lightweight solution that gets the job done without unnecessary complexity.
  • pretty-bytes is another utility for converting byte values into human-readable formats. It aims to provide a clean and simple output, making it easy to display file sizes in a visually appealing way. pretty-bytes is designed for developers who want a straightforward solution without the overhead of additional features. Its minimalistic approach makes it a good fit for projects that prioritize simplicity and clarity.

To see how bytes compares with filesize, humanize-bytes, and pretty-bytes, check out the comparison: Comparing bytes vs filesize vs humanize-bytes vs pretty-bytes.

Similar Npm Packages to filesize

filesize is a popular npm package that allows developers to format file sizes in a human-readable way. It converts byte values into more understandable units such as KB, MB, GB, etc., and can also handle decimal precision and suffixes. This makes it easier for users to comprehend file sizes, especially when dealing with large data sets or file uploads in web applications. The package is lightweight and straightforward to use, making it a go-to choice for many developers.

While filesize is a great option, there are alternatives available that also provide similar functionality. Here are a couple of noteworthy alternatives:

  • bytes is a simple utility for converting between byte values and human-readable formats. It supports both converting from bytes to string representations and vice versa. The API is minimalistic, making it easy to integrate into any project. If you need a straightforward solution for byte conversions without additional overhead, bytes is a solid choice.
  • pretty-bytes is another library that focuses on formatting byte values into human-readable strings. It provides a simple API and allows for customization, such as changing the decimal precision. pretty-bytes is particularly useful for developers who want a quick and easy way to display file sizes in a more appealing format.

To see how filesize compares with bytes and pretty-bytes, check out the comparison: Comparing bytes vs filesize vs pretty-bytes.

Similar Npm Packages to humanize-bytes

humanize-bytes is a simple and effective npm package that converts byte values into human-readable formats. This library is particularly useful for applications that need to display file sizes or data transfer amounts in a way that is easy for users to understand. By converting raw byte values into more digestible units like KB, MB, or GB, humanize-bytes enhances user experience and clarity in data representation.

While humanize-bytes is a great choice for converting byte sizes, there are alternative libraries that offer similar functionality. Here are a couple of notable alternatives:

  • filesize is a popular library that provides a comprehensive solution for formatting file sizes. It supports a wide range of options, including custom suffixes, rounding, and even binary or decimal formatting. filesize is particularly useful for applications that require more control over how file sizes are displayed. Its flexibility and extensive features make it a strong alternative to humanize-bytes, especially for developers looking for a more customizable solution.
  • pretty-bytes is another lightweight library that focuses on converting byte values into human-readable formats. It provides a simple API and is designed to be easy to use, making it a good choice for projects that need quick and straightforward byte size conversions. While it may not have as many features as filesize, pretty-bytes is perfect for developers who want a minimalistic approach without sacrificing readability.

To explore how humanize-bytes compares with filesize and pretty-bytes, check out the comparison: Comparing filesize vs humanize-bytes vs pretty-bytes.

README for pretty-bytes

pretty-bytes

Convert bytes to a human readable string: 1337 β†’ 1.34 kB

Useful for displaying file sizes for humans.

Note that it uses base-10 (e.g. kilobyte). Read about the difference between kilobyte and kibibyte.

Install

npm install pretty-bytes

Usage

import prettyBytes from 'pretty-bytes';

prettyBytes(1337);
//=> '1.34 kB'

prettyBytes(100);
//=> '100 B'

// Display with units of bits
prettyBytes(1337, {bits: true});
//=> '1.34 kbit'

// Display file size differences
prettyBytes(42, {signed: true});
//=> '+42 B'

// Localized output using German locale
prettyBytes(1337, {locale: 'de'});
//=> '1,34 kB'

// Fixed width for alignment (useful for progress bars and tables)
prettyBytes(1337, {fixedWidth: 8});
//=> ' 1.34 kB'

API

prettyBytes(number, options?)

number

Type: number | bigint

The number to format.

options

Type: object

signed

Type: boolean
Default: false

Include plus sign for positive numbers. If the difference is exactly zero a space character will be prepended instead for better alignment.

bits

Type: boolean
Default: false

Format the number as bits instead of bytes. This can be useful when, for example, referring to bit rate.

import prettyBytes from 'pretty-bytes';

prettyBytes(1337, {bits: true});
//=> '1.34 kbit'
binary

Type: boolean
Default: false

Format the number using the Binary Prefix instead of the SI Prefix. This can be useful for presenting memory amounts. However, this should not be used for presenting file sizes.

import prettyBytes from 'pretty-bytes';

prettyBytes(1000, {binary: true});
//=> '1000 B'

prettyBytes(1024, {binary: true});
//=> '1 KiB'
locale

Type: boolean | string | string[]
Default: false

  • If false: Output won't be localized.
  • If true: Localize the output using the system/browser locale.
  • If string: Expects a BCP 47 language tag (For example: en, de, …)
  • If string[]: Expects a list of BCP 47 language tags (For example: en, de, …)

[!IMPORTANT] Only the number and decimal separator are localized. The unit title is not and will not be localized.

minimumFractionDigits

Type: number
Default: undefined

The minimum number of fraction digits to display.

If neither minimumFractionDigits nor maximumFractionDigits is set, the default behavior is to round to 3 significant digits.

[!NOTE] When minimumFractionDigits or maximumFractionDigits is specified, values are truncated instead of rounded to provide more intuitive results for file sizes.

import prettyBytes from 'pretty-bytes';

// Show the number with at least 3 fractional digits
prettyBytes(1900, {minimumFractionDigits: 3});
//=> '1.900 kB'

prettyBytes(1900);
//=> '1.9 kB'
maximumFractionDigits

Type: number
Default: undefined

The maximum number of fraction digits to display.

If neither minimumFractionDigits nor maximumFractionDigits is set, the default behavior is to round to 3 significant digits.

[!NOTE] When minimumFractionDigits or maximumFractionDigits is specified, values are truncated instead of rounded to provide more intuitive results for file sizes.

import prettyBytes from 'pretty-bytes';

// Show the number with at most 1 fractional digit
prettyBytes(1920, {maximumFractionDigits: 1});
//=> '1.9 kB'

prettyBytes(1920);
//=> '1.92 kB'
space

Type: boolean
Default: true

Put a space between the number and unit.

import prettyBytes from 'pretty-bytes';

prettyBytes(1920, {space: false});
//=> '1.92kB'

prettyBytes(1920);
//=> '1.92 kB'
nonBreakingSpace

Type: boolean
Default: false

Use a non-breaking space instead of a regular space to prevent the unit from wrapping to a new line.

Has no effect when space is false.

fixedWidth

Type: number
Default: undefined

Pad the output to a fixed width by right-aligning it.

Useful for creating aligned columns in tables or progress bars.

If the output is longer than the specified width, no padding is applied.

Must be a non-negative integer. Throws a TypeError for invalid values.

import prettyBytes from 'pretty-bytes';

prettyBytes(1337, {fixedWidth: 10});
//=> '   1.34 kB'

prettyBytes(100_000, {fixedWidth: 10});
//=> '  100 kB'

// Useful for progress bars and tables
[1000, 10_000, 100_000].map(bytes => prettyBytes(bytes, {fixedWidth: 8}));
//=> ['   1 kB', '  10 kB', ' 100 kB']

FAQ

Why kB and not KB?

k is the standardized SI prefix for kilo.

Related

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc, the official website for the npm registry. Note that npm is a registered trademark of npm, Inc. For more details, please refer to our Terms & Privacy.