Home Tools Blog About

Create Black and White WebP

In short

Convert image to true B&W WebP (threshold / Floyd-Steinberg / Bayer) or grayscale. Quality slider. Free, client-side.

  • Runs in your browser
  • Nothing uploaded
  • Free, no sign-up

Convert any image into true 1-bit black-and-white WebP (threshold, Floyd-Steinberg dither, Bayer dither) or smooth grayscale. WebP output by default; falls back to PNG on browsers without WebP encoder support.

Original / B&W WebP output

Original Original
Output B&W WebP output
Drop an image to begin.
🛡
100% PrivateNo server uploads, ever
InstantRuns in your browser
💧
No WatermarksClean output, always
🆓
Free ForeverNo accounts, no limits

How to Use Create Black and White WebP

  1. Drop any image (JPG, PNG, WebP, GIF). The tool decodes via the browser's native image decoder.
  2. Pick mode. Threshold = true 1-bit B&W (best WebP compression). Grayscale = smooth gradient. Floyd-Steinberg = error-diffusion 1-bit dither (newspaper look). Bayer = ordered 1-bit dither (retro crosshatch).
  3. For threshold mode, adjust the slider 0-255 to set the black/white cutoff.
  4. Pick luminance formula. Rec 601 (NTSC, default) or Rec 709 (sRGB).
  5. Set WebP quality 0-1 (0.92 default). For pure 1-bit threshold/dither modes, quality matters less; for grayscale, lower quality = smaller file with visible compression artefacts.
  6. Compare side by side and check the size comparison in the stats line.

Frequently Asked Questions

What’s the difference between B&W and grayscale?

Strictly, black and white means only two pixel values: pure black (0) and pure white (255). Grayscale means a continuous spectrum. This tool offers both – labelled honestly. Threshold and dither modes produce true 1-bit B&W; grayscale mode produces a luminance gradient.

Will my output actually be WebP?

On Chrome, Firefox, Edge, Opera, and Safari 14+ (≈99% of browsers as of 2026), yes – your output is WebP. The tool detects encoder support at page load and shows a banner. On rare browsers without WebP encode (pre-Safari-14), it falls back to PNG and notifies you in the toast.

How small will the WebP be vs the original?

Honest answer: it depends. WebP threshold/dither output is typically smaller than the same image as JPEG or color PNG, often by 30-70% – but PNG-1bit can sometimes beat it on stark 1-bit content. Grayscale WebP typically beats JPEG by 25-35% at equivalent quality. The stats line shows your actual before/after numbers. Don’t trust generic “X% smaller” claims without measurement.

Why does threshold mode look harsh on photos?

Threshold throws away all gray information – every pixel becomes either pure black or pure white. On photos this loses detail in skin tones and gradients. For photos, try Floyd-Steinberg or Bayer dither instead – they’re still 1-bit but use patterns to simulate gray.

What’s Floyd-Steinberg dithering?

Error-diffusion algorithm from Floyd & Steinberg (1976). When a pixel becomes black or white, the rounding error is distributed to neighbouring pixels. Result: 1-bit output that visually approximates the gradient via tiny patterns. The classic newspaper / laser-printer look.

What’s Bayer dithering?

Ordered dither using a fixed 4×4 threshold matrix. Faster than Floyd-Steinberg and gives a characteristic crosshatch pattern – recognisable from Game Boy graphics and Mac System 1/2 displays. Deterministic: same input → same output.

Which luminance formula?

Rec 709 for modern sRGB photos (matches your monitor’s primaries). Rec 601 for legacy SDR / NTSC content (it’s the historical default and what older tools used). Simple average for non-photographic content (screenshots, diagrams).

Does transparency survive?

Yes. WebP supports alpha. Transparent pixels in the source stay transparent in the output. Only RGB channels get B&W’d.

Is anything uploaded?

No. Canvas API runs in the browser. Your image never touches any server.

What’s the file size limit?

10 MB. Larger images work in principle but the main-thread canvas processing gets slow on big files.

Keep going

Related Tools

All Webp tools →
Share

Embed this tool

Add this free tool to your website. Copy and paste the code: