11 posts tagged “data-urls”
Previously known as Data URIs before being renamed by WHATWG.
2026
Building a World Map with only 500 bytes (via) 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
)
2023
image-to-jpeg (via) 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.
The Page With No Code
(via)
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.
2020
Animating a commit based Sudoku game using Puppeteer (via) 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.
2010
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.
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.
2009
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.
2007
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.
Microformats Bookmarklet. Microformats bookmarklet, targetted at Safari. Uses jQuery CSS selectors for parsing, and generates .vcf vCard files using data: uris.
2005
Bumpspark Library-less Minigraphs (via) It’s that neat data:uri hack but for Ruby and without needing an external image library.
2003
Self-contained data: URI kitchen
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?
[... 94 words]