445 Bytes to Render a World Map: Pushing deflate Compression and Native Browser APIs to Their Limits

Generating a World Map in 445 Bytes

In an era obsessed with ever-growing data volumes, one project has turned heads in the tech community by going in the opposite direction. Developer Iwo Kadziela (with assistance from Codex) generated a surprisingly convincing ASCII world map using just 445 bytes of data. The entire map is rendered with black asterisk (*) characters — pure text, yet with clearly recognizable continental outlines and an unexpectedly high degree of accuracy.

The value of this project isn't in solving any real business problem — it's in demonstrating an extreme engineering mindset: when you make "minimizing data size" your sole objective, just how much information density can you squeeze out? 445 bytes is roughly the length of a short paragraph of text, yet it encodes the spatial distribution of every landmass on Earth. Worth noting: 445 bytes is the final size after base64 encoding — base64 introduces roughly 33% size overhead (every 3 raw bytes become 4 ASCII characters), meaning the actual compressed binary data is only around 333 bytes, making the information density even more remarkable.

deflate Compression: The Core Technology

The key to achieving this is the clever use of the deflate compression algorithm. Designed by Phil Katz in 1989 and formally specified in RFC 1951, deflate is one of the most widely deployed lossless compression algorithms in internet infrastructure — PNG images, HTTP/1.1 gzip transfer encoding, and ZIP files all use it at their core. It combines two classic techniques: LZ77 sliding window compression (which eliminates repeated byte sequences via back-references) and Huffman coding (which replaces fixed-length bytes with variable-length bit strings, giving shorter codes to more frequent symbols). This project uses the deflate-raw variant — a pure compressed stream with the zlib wrapper header stripped — which the browser's DecompressionStream API supports as a dedicated option.

Why ASCII Art Is Especially Compressible

Compression is fundamentally about eliminating redundancy. In an ASCII map, ocean regions are vast stretches of whitespace, and coastline edges contain large amounts of repeated patterns. deflate's LZ77 phase can precisely identify these repetitions and replace lengthy raw sequences with very short back-references; the Huffman coding phase then further compresses high-frequency characters (like the pervasive space character). Combined, these techniques allow a map that's visually rich in information to shrink down to a few hundred bytes.

The original uncompressed text might be several thousand bytes. After deflate processing followed by base64 encoding (the standard scheme defined in RFC 4648 for converting arbitrary binary data into printable ASCII characters), the entire data payload becomes compact enough to inline directly into a JavaScript snippet. While base64 encoding incurs roughly one-third size overhead, it buys the convenience of embedding data directly in a string — no binary file loading required.

An Elegant Browser-Side Decompression Approach

What makes this project most eye-catching is how it handles decompression in the browser. The entire decompression and rendering logic is condensed into a small, clean JavaScript snippet:

fetch('data:;base64,1ZpLsgIxCEXnrM...==').then(
  r => r.body.pipeThrough(new DecompressionStream('deflate-raw'))
).then(
  s => new Response(s).text()
).then(
  t => b.innerHTML = '<pre style=font-size:.65vw>' + t
)

Three Technical Details Worth Digging Into

First: using fetch() to request a data: URI. Even seasoned developer Simon Willison admitted he didn't know this was possible. data: URIs were defined by RFC 2397 in 1998, with the format data:[<mediatype>][;base64],<data>, originally designed to embed small images inline in HTML to avoid extra HTTP requests. Using fetch() to consume one directly is a little-known technique — the browser treats it as a synchronously available "virtual response," returning a standard Response object that plugs seamlessly into the Streams API pipeline. This lets you embed base64-encoded compressed data directly in the URI with no real network request, keeping the data fully inline in the code.

Second: DecompressionStream for native decompression. This is a modern browser built-in API based on the WHATWG Compression Streams specification, part of the Web Streams API ecosystem — which brings a Node.js-style streaming model to the browser, centered on ReadableStream, WritableStream, and TransformStream. DecompressionStream is essentially a built-in TransformStream supporting deflate, deflate-raw, and gzip formats, with native support in Chrome 80+, Firefox 113+, and Safari 16.4+. Before this, browser-side decompression typically required pulling in a third-party library like pako (weighing in at ~50KB+). By piping the response body through pipeThrough(new DecompressionStream('deflate-raw')), the whole thing runs with zero dependencies and near-zero runtime overhead.

Third: the elegant chained pipeline of the Streams API. From the fetch response, through pipeThrough for decompression, then new Response(s).text() to convert the decompressed stream back to text, and finally writing to the DOM — the entire process is a clean Promise chain that showcases the composability of modern browser Streams APIs.

What This Project Teaches Us

Native Browser Capabilities Have Come a Long Way

The deepest lesson from this 445-byte world map is how capable the modern Web platform's native APIs have become. DecompressionStream, fetch's support for data: URIs, the Streams API pipeline mechanism — features that once required importing tens of kilobytes of third-party libraries are now built right into the browser. Developers can accomplish inline compressed data delivery and decompression rendering in just a few lines of code. This is a reminder to check the platform's native API catalog before reaching for a new dependency — the answer may already be built in.

AI Assistance Is Enabling a New Paradigm of "Engineering Toys"

It's worth noting that this project was completed with assistance from Codex — OpenAI's GPT-based language model fine-tuned specifically for code generation, and the early technical foundation behind GitHub Copilot. In this project, Codex's value wasn't just generating boilerplate code; it was in exploring unconventional API combinations. These kinds of edge-case usages are often scattered across specification documents and technical blogs, difficult for human developers to recall on demand — but language models have absorbed large amounts of this material during pretraining. This collaborative pattern of "humans define extreme constraints, AI explores the solution space" reflects an interesting creative paradigm. These "engineering toys" may have no direct commercial value, but they're excellent vehicles for sparking creativity and probing the boundaries of platforms — and they're increasingly taking shape as a new form of creative expression in the tech community.

The Aesthetic of Constraint-Driven Engineering

From a broader perspective, this project invites us to reconsider the relationship between data size and information value. In an era where storage and bandwidth grow ever cheaper, few people sweat over a few hundred bytes. But this kind of constraint-driven thinking tends to produce the most elegant solutions — when limits are strict enough, engineers are forced back to the essence of a problem, hunting down every last source of redundancy to eliminate. The deflate algorithm itself is a product of this spirit: born in the late 1980s when storage was prohibitively expensive, an obsessive reverence for every byte gave rise to a compression standard that's still in active use more than thirty years later.

Conclusion

Drawing a recognizable world map in 445 bytes is, at its core, a comprehensive demonstration of compression algorithms, encoding techniques, and native browser capabilities. It doesn't solve a grand problem — but it reveals, in the most minimal way, the elegant details hiding in the Web technology stack that are so often overlooked. For developers, this project leaves behind a few immediately actionable insights: fetch() can directly consume a data: URI and return a standard Response object; DecompressionStream makes browser-side deflate decompression accessible and dependency-free; and base64's 33% size overhead buys the ability to inline binary data as a string. Sometimes, the smallest projects teach us the most.

Key Takeaways