I’ve spent a lot of time thinking about this because of the Playable Quotes [0] project that I worked on with @rndmcnlly. First off, I love embedding data into

I’ve spent a lot of time thinking about this because of the Playable Quotes [0] project that I worked on with @rndmcnlly. First off, I love embedding data into images. It’s surprising how useful it is to do this! The main reason that I like embedding data into an image is because you get a “thumbnail” essentially for free. In the future, I hope to see a more widespread use of this technique, especially for images that are the output of a set of data. Imagine a chart with the source data embedded into it! Or an SVG embedded in a PNG. This is what we did for Playable Quotes, each quote is a PNG of the framebuffer at the time the quote was started. All of the data needed to play that moment in the game is embedded into the PNG. That said, there are at least three main approaches that can be used to embed data into a PNG. Each has various trade offs: The approaches are as follows: 1: Concatenate the PNG with a ZIP file 2: Use PNG chunks (this is what is done in the article) 3: Embed data using a stenography Here are the pros and cons of each approach: Option 1: Concatenate the PNG with a ZIP file This is a clever technique because (in short) PNGs have length information in them and zip software will attempt to read files from the end of the file if they can’t read from the start. Pros: - Super easy to do: “cat original.png file.zip > new.png” - Easy to work with. You can extract data by using the “zip” command or renaming the new.png to new.zip Cons: - The data is lost when sharing the image. Most image hosts and even some chat programs will strip out the zip data from the image. Option 2: Use PNG chunks (this is what is done in the article) This approach is nice and clean, as the PNG specification explicitly allows for this. In essence, a PNG is a little key/value database where the keys are four ASCII printable bytes. Pros: - Complies with the PNG standard - Data is usually maintained, but not always! Cons: - Requires special tooling to use. Standard PNG command line tools don’t offer easy ways to get chunk information out of PNGs - The extra chunks are SOMETIMES removed. Especially by services like Twitter which will try and optimize the images before hosting them Option 3: Embed data using a stenography This is the approach that PICO-8 uses for its game “cartridges” and what we ultimately used for Playable Quotes Pros: - The most durable way to keep the data attached to the image Cons: - The amount of data you can store is limited by the size of the image - Special tooling is needed to extract the data In general, my personal favorite is option 1, as it is the most useful. However, it’s sadly not a practical solution to use in a world where the tools we use to share images (Twitter, Imgur, etc) modify the images in transit. Footnotes: 0: https://tenmile.quote.games https://tenmile.quote.games