Simon Willison's Weblog: data-urls

Building a World Map with only 500 bytes

2026-07-04T23:09:02+00:00

Building a World Map with only 500 bytes

Iwo Kadziela (assisted by Codex) figured out a way to generate a credible ASCII world map using 445 bytes of data:

The key trick is to use deflate compression, which is then wired together using this neat snippet of JavaScript. I didn't know you could use fetch() with data: URIs like this:

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
)

Via Hacker News

Tags: ascii-art, data-urls, javascript

image-to-jpeg

2023-04-05T22:10:17+00:00

image-to-jpeg

I built a little JavaScript app that accepts an image, then displays that image as a JPEG with a slider to control the quality setting, plus a copy and paste textarea to copy out that image with a data-uri. I didn't actually write a single line of code for this: I got ChatGPT/GPT-4 to generate the entire thing with some prompts.

Here's the full transcript.

Via Drag-Drop Image Conversion

Tags: data-urls, projects, tools, ai, generative-ai, chatgpt, llms, ai-assisted-programming

The Page With No Code

2023-01-21T18:59:56+00:00

The Page With No Code

A fun demo by Dan Q, who created a web page with no HTML at all - but in Firefox it still renders content, thanks to a data URI base64 encoded stylesheet served in a link: header that uses html::before, html::after, body::before and body::after with content: properties to serve the content. It even has a background image, encoded as a base64 SVG nested inside another data URI.

Via I decoded it in this Gist

Tags: css, data-urls, html

Animating a commit based Sudoku game using Puppeteer

2020-10-09T22:28:53+00:00

Animating a commit based Sudoku game using Puppeteer

This is really clever. There’s a GitHub repo that tracks progress in a game of Sudoku: Anish Karandikar wrote code which iterates through the game board state commit by commit, uses that state to generate an HTML table, passes that table to Puppeteer using a data: URI, renders a PNG of each stage and then concatenates those PNGs together into an animated GIF using the gifencoder Node.js library.

Via @anishkny

Tags: data-urls, gifs, puppeteer

pdf.js

2010-06-17T19:39:00+00:00

pdf.js

A JavaScript library for creating simple PDF files. Works (flakily) in your browser using a data:URI hack, but is also compatible with server-side JavaScript implementations such as Node.js.

Tags: data-urls, javascript, nodejs, pdf, recovered

Smokescreen demo: a Flash player in JavaScript

2010-05-29T11:32:00+00:00

Smokescreen demo: a Flash player in JavaScript

Chris Smoak’s Smokescreen, “a Flash player written in JavaScript”, is an incredible piece of work. It runs entirely in the browser, reads in SWF binaries, unzips them (in native JS), extracts images and embedded audio and turns them in to base64 encoded data:uris, then stitches the vector graphics back together as animated SVG.

Open up the Chrome Web Inspector while the demo is running and you can see the SVG changing in real time. Smokescreen even implements its own ActionScript bytecode interpreter!

It’s stated intention is to allow Flash banner ads to execute on the iPad and iPhone, but there are plenty of other interesting applications (such as news site infographics).

The company behind it have announced plans to open source it in the near future. My one concern is performance—the library is 175 KB and over 8,000 lines of JavaScript which might cause problems on low powered mobile devices.

Tags: data-urls, flash, javascript, svg, recovered, chris-smoak, smokescreen

SPDY: The Web, Only Faster

2009-11-13T13:00:08+00:00

SPDY: The Web, Only Faster

Alex Russell explains the benefits of Google’s SPDF proposal (a protocol that upgrades HTTP)—including header compression, multiplexing, the ability to send additional resources such as images and stylesheets down without needing the data:uri hack and Comet support built in to the core assumptions of the protocol.

Tags: alex-russell, comet, compression, data-urls, google, http, spdy

Quoting Fredrik Lundh

2007-08-07T10:52:19+00:00

Inline images are stored as data URI:s in the intermediate format (and usually also in the source documents), but since not all browsers support this format, the renderer replaces the data URI:s with HTTP pointers to an image cache directory.

— Fredrik Lundh

Tags: data-urls, django, fredrik-lundh, http

Microformats Bookmarklet

2007-02-27T23:43:26+00:00

Microformats Bookmarklet

Microformats bookmarklet, targetted at Safari. Uses jQuery CSS selectors for parsing, and generates .vcf vCard files using data: uris.

Tags: bookmarklets, data-urls, jquery, microformats, safari, vcard

Bumpspark Library-less Minigraphs

2005-04-28T22:19:17+00:00

Bumpspark Library-less Minigraphs

It’s that neat data:uri hack but for Ruby and without needing an external image library.

Via RedHanded

Tags: data-urls

Self-contained data: URI kitchen

2003-08-11T16:53:36+00:00

I couldn't resist this. Hixie has released a new version of his data: URI kitchen, to celebrate the addition of data: URI support to the latest Opera beta. In the spirit of recursion, I present this reformulation of the data: URI kitchen that uses client side Javascript. What better way to deliver such a thing than as a data URI?

Self contained data: URI kitchen

Update (12th August 10:40am): I've changed the above to take in to account a bug report from Hixie in the comments.

Tags: data-urls