Building a World Map with only 500 bytes

2026-07-04 · Source: Simon Willison's Weblog · Field: Technology & Digital — Software Development & Engineering, Emerging Technologies & Innovation · Depth: Intermediate, quick

Summary

Iwo Kadziela, with assistance from Codex, devised a novel method to generate a credible ASCII world map using an exceptionally small footprint of just 445 bytes of data. This technique primarily relies on deflate compression, which is seamlessly integrated through a compact JavaScript snippet. The implementation cleverly employs `fetch()` with `data:` URIs to retrieve the compressed data, subsequently piping it through a `DecompressionStream('deflate-raw')`. This process efficiently decompresses the data, allowing it to be rendered as an ASCII map. The approach showcases an ingenious application of web APIs for highly efficient data representation and display, yielding a visually effective world map from minimal data.

Key takeaway

For web developers focused on optimizing asset delivery or creating highly compact visualizations, you should explore using deflate compression with `data:` URIs and `DecompressionStream`. This technique allows for embedding significant content, like a detailed ASCII map, using only hundreds of bytes, drastically reducing network payload and improving initial page load performance. Consider this approach for small, static assets or dynamic content that benefits from extreme size reduction.

Key insights

Deflate compression combined with `fetch()` and `DecompressionStream` enables highly compact ASCII map generation.

Principles

• Data compression minimizes payload size.
• Browser APIs can decompress data streams.

Method

Compress map data using deflate. Embed compressed data in a `data:` URI. Fetch URI, pipe through `DecompressionStream('deflate-raw')`, then render the resulting text as ASCII.

In practice

• Embed small assets via `data:` URIs.
• Use `DecompressionStream` for client-side decompression.
• Generate compact visual representations.

Topics

• Deflate Compression
• JavaScript
• Web APIs
• Data URIs
• ASCII Art
• Frontend Optimization

Best for: Software Engineer, Creative Technologist

Related on AIssential

• How Does a URL Shortener Work? — Building a URL shortener reveals core distributed systems challenges in ID generation, caching, and database scaling.
• Unfreezing The Data Lake: The Future-Proof File Format — F3 is a future-proof file format using flexible layouts and embedded WebAssembly for efficient, extensible data handling.
• Building Your First Streamlit App: Uploads, Charts, and Filters (Part 2) — Streamlit enables rapid development of interactive data apps with uploads, visualizations, filtering, and export.
• Building a Production ready RAG API — Production RAG APIs require robust backend engineering to handle ingestion, streaming, rate limits, memory, and caching at scale.
• Semantic Caching for LLMs: FastAPI, Redis, and Embeddings — Semantic caching reduces LLM costs and latency by reusing responses for semantically similar queries via a layered approach.
• MesonGS++: Post-training Compression of 3D Gaussian Splatting with Hyperparameter Searching — MesonGS++ compresses 3DGS models over 34x by optimizing hyperparameter search for target storage budgets.

Open in AIssential →

Editorial summary, takeaway, and curation by AIssential. Original article published by Simon Willison's Weblog.