About

Accurate monochrome conversion requires more than desaturation. A naive average of RGB channels produces muddy results because the human eye perceives green as roughly 2× brighter than red and 6× brighter than blue. This tool applies the ITU-R BT.601 luminance model: Y = 0.299R + 0.587G + 0.114B. For true 1-bit black and white output, threshold binarization alone creates harsh banding in smooth gradients. Floyd-Steinberg error diffusion distributes quantization error to neighboring pixels, producing a halftone illusion of tonal range using only two values. All processing runs client-side on the Canvas API. No image data leaves your browser.

Output is encoded as WebP, which achieves 25 - 35% smaller files than equivalent-quality JPEG for photographic content (Google, 2023). Note: WebP encoding quality parameter has no effect in lossless mode. For monochrome line art and dithered images, lossless mode typically produces smaller files than lossy at high quality settings. This tool approximates perceptual luminance; it does not apply ICC color profile corrections from the source image.

Formulas

Perceptual luminance from RGB channels (ITU-R BT.601):

Y = 0.299 ⋅ R + 0.587 ⋅ G + 0.114 ⋅ B

Where Y is the resulting luminance value (0 - 255), R, G, B are the red, green, and blue channel values of each pixel.

Threshold binarization for pure black and white:

P = {

255 if Y ≥ T0 if Y < T

Where P is the output pixel value and T is the user-defined threshold (0 - 255).

Floyd-Steinberg error diffusion distributes the quantization error e = Y − P to four neighboring pixels:

pixel(x+1, y) += e ⋅ 716
pixel(x−1, y+1) += e ⋅ 316
pixel(x, y+1) += e ⋅ 516
pixel(x+1, y+1) += e ⋅ 116

The 4×4 Bayer ordered dither matrix:

M = 116 0821012414631119157135

Each pixel is compared against the corresponding matrix cell value (scaled to 0 - 255). If the luminance exceeds the matrix threshold, the pixel becomes white; otherwise black.

Reference Data

Mode	Output Colors	Algorithm	Best For	File Size	Detail Preservation
Grayscale	256 shades	BT.601 Luminance	Photography, portraits	Medium	Excellent
Threshold B&W	2 (black/white)	Binary threshold	Text, logos, line art	Very small	Low (banding)
Floyd-Steinberg Dither	2 (black/white)	Error diffusion	Photos needing 1-bit output	Small	Good (halftone)
Ordered Dither (Bayer)	2 (black/white)	4×4 threshold matrix	Retro/pixel art aesthetic	Small	Moderate (patterned)
WebP Lossy	-	VP8 compression	Photos, gradients	Smallest	Configurable
WebP Lossless	-	Predictive coding	Line art, dithered	Small - medium	Perfect

Luminance Coefficient	Channel	Standard	Value
Y_R	Red	ITU-R BT.601	0.299
Y_G	Green	ITU-R BT.601	0.587
Y_B	Blue	ITU-R BT.601	0.114
Y_R	Red	ITU-R BT.709 (sRGB)	0.2126
Y_G	Green	ITU-R BT.709 (sRGB)	0.7152
Y_B	Blue	ITU-R BT.709 (sRGB)	0.0722

Format	Lossy	Lossless	Transparency	Animation	Browser Support
WebP	✓	✓	✓	✓	97%
JPEG	✓	✗	✗	✗	100%
PNG	✗	✓	✓	✗	100%
AVIF	✓	✓	✓	✓	92%

Frequently Asked Questions

Simple threshold binarization maps every pixel independently: above the cutoff becomes white, below becomes black. This destroys all gradient information, producing harsh banding in smooth tonal transitions. Floyd-Steinberg error diffusion carries the quantization error forward to neighboring pixels, effectively distributing the "lost" information spatially. The human visual system integrates these scattered black and white dots into perceived gray tones at normal viewing distances, preserving apparent tonal range with only 2 output values.

The human eye has unequal sensitivity to different wavelengths. Green cones dominate luminance perception (approximately 59% contribution), while blue contributes only about 11%. A simple average (R+G+B)/3 assigns equal weight to all channels, which overestimates blue brightness and underestimates green. The ITU-R BT.601 coefficients (0.299, 0.587, 0.114) model this perceptual weighting. Using the wrong formula produces images where blue skies appear too bright and green foliage appears too dark.

For dithered and threshold images containing only pure black and white pixels, lossless WebP typically produces smaller files than lossy at high quality settings. Lossy compression introduces ringing artifacts around sharp edges, which are abundant in dithered output. For grayscale images with smooth gradients, lossy WebP at quality 80-90 provides significant size reduction with minimal visible degradation. Test both: this tool lets you compare by adjusting the quality slider.

The optimal threshold depends on image content. For well-exposed photographs, 128 (the midpoint) is a reasonable starting value. For scanned documents with white backgrounds, values between 160-200 help eliminate paper texture noise. For dark images or low-key photography, lower thresholds (80-110) preserve more detail. The live preview in this tool lets you adjust in real time. Otsu's method (automatic threshold) finds the value that minimizes intra-class variance, but manual control often produces better artistic results.

Yes. This tool processes at the full original resolution of the input image, up to a maximum canvas dimension of 8192×8192 pixels. No downscaling is applied. The pixel dimensions of the output WebP match the input exactly. Note that canvas memory consumption scales with pixel count: a 4000×3000 image requires approximately 48 MB of canvas memory (width × height × 4 bytes per RGBA pixel).

Ordered dithering with a Bayer matrix produces a regular, grid-like dot pattern rather than the organic noise of error diffusion. This is preferred for retro or pixel-art aesthetics, for output destined for screen printing or low-resolution displays, and when processing speed matters (ordered dithering is a per-pixel lookup with no error propagation, making it significantly faster on large images). Floyd-Steinberg is superior for photographic reproduction where naturalism matters.