Paper 02: Dithered Graphics in Low-Bandwidth EnvironmentsAuthor: Engineering Team, Binary & Bus, Sys.
Published: 24th July, 2026
Status: Research Paper
Abstract: As web media has trended toward uncompressed high-resolution imagery and multi-megabyte hero assets, visual rendering efficiency has degraded on constrained networks even as average connection speeds have risen. This paper examines 1-bit error-diffusion and ordered dithering as a deliberate visual compression strategy, presents the mathematical basis for the Floyd-Steinberg, Atkinson, and 4x4 Bayer algorithms, and reports payload and rendering measurements from production use across client engagements. Full implementation code and matrix definitions are maintained in our 1-Bit Graphic & Dithering Research lab notes.
1. Introduction
A 24-bit RGB photograph at typical hero-image dimensions (1600x900) frequently exceeds 400 KB even after JPEG compression, and considerably more for the increasingly common WebP-at-high-quality or uncompressed PNG cases we encounter during client audits. For sites operating under a strict payload budget, or serving audiences on constrained connections, this single asset class can dominate total page weight many times over. Dithering offers an alternative: rather than compressing a full-colour image and accepting the resulting artefacts, it discards colour and luminance precision deliberately and up front, converting an image to pure black and white while preserving perceived structure, depth, and in most cases legibility of the subject.
This is not a novel technique. Error-diffusion dithering was developed for early digital typesetting and low-bit-depth display hardware in the 1970s and 1980s, when monochrome or limited-palette displays made it a necessity rather than a stylistic choice. Its revival here is driven by a different constraint: not hardware limitation, but network and payload economy, and it produces, as a side effect, the high-contrast visual language associated with our brutalist design direction.
2. Methodology
We evaluated three dithering algorithms for suitability in a static-site production pipeline: Floyd-Steinberg error diffusion, Atkinson error diffusion, and 4x4 Bayer ordered dithering. Each algorithm was implemented and benchmarked against the same 512x512 greyscale test corpus (40 images spanning photography, line art, and UI screenshots) to measure execution time, and against a further sample of 24 client hero images to measure real-world payload reduction when converted from source JPEG or PNG to 1-bit indexed PNG output. Full algorithm definitions and reference implementations in Python and C are provided in our lab notes; the mathematical basis for each is summarised below.
Floyd-Steinberg distributes 100% of quantisation error to four neighbouring pixels using the weights 7/16, 3/16, 5/16, and 1/16, visited in raster order. Atkinson, developed by Bill Atkinson at Apple in 1982, distributes only 6/8 of the error across six neighbours, discarding the remaining 25%, which produces a higher-contrast result with less mid-tone smearing. 4x4 Bayer ordered dithering instead compares each pixel against a fixed, tiled threshold matrix rather than propagating error from neighbouring pixels, trading gradient smoothness for a roughly six-fold reduction in computation.
3. Results
Execution time on the 512x512 test corpus and payload outcomes on the 24-image client sample are summarised below.
Algorithm Execution Time Client Image Payload Reduction --------------------------------------------------------------------- Floyd-Steinberg 18 ms 91% median (24-bit JPEG -> 1-bit PNG) Atkinson 14 ms 93% median Bayer 4x4 3 ms 89% median Source (unmodified) - 0% (baseline)
Across the 24-image client sample, median source file size was 340 KB; median dithered output was 24 KB, a 93% reduction consistent with the case-study figures reported elsewhere on this site. Payload reduction was highest for Atkinson dithering on photographic subjects and lowest, though still substantial, on already-compressed UI screenshots with large flat colour regions, where the source JPEG was smaller to begin with.
4. Discussion
Error-diffusion methods (Floyd-Steinberg, Atkinson) consistently outperform ordered dithering on subjective visual quality for photographic content, because propagating error across the whole image preserves gradient information that a fixed threshold matrix cannot represent. Ordered dithering, however, is roughly five to six times faster to compute and produces a regular, predictable geometric pattern that some clients specifically request for its distinct visual texture; we treat the choice between the two as an aesthetic decision as much as a technical one, and we default to Atkinson unless a client specifies otherwise.
We also note a rendering-speed benefit independent of file size: because the output is a 1-bit indexed image with a two-colour palette, browser and hardware decode cost is negligible even on constrained devices, whereas high-resolution JPEG or WebP decoding is measurably CPU-intensive on lower-spec mobile hardware regardless of file size on disk.
5. Conclusion
For systems operating under strict bandwidth, memory, or payload-budget constraints, dithered graphics represent, in our measured experience, the most effective available balance between high visual communication and near-zero asset overhead. We apply Atkinson dithering as our default image pipeline for client hero and portfolio imagery via our dither-pass.sh utility, documented in our Developer Utility Scripts, and recommend Floyd-Steinberg for technical diagrams and Bayer ordered dithering only where execution speed or a specific geometric texture is the priority.