Storing Images on NFC Tags

In my previous post on NFC Sculptures, I mentioned that it was possible to store images on NFC tags.

Turns out this is true, but tricky!

My previous NFC sculptures all used stored URLs to make the magic happen.

For example, with my Pokeball sculpture, I stored the URL https://ragman.net/pokemon on the tag. When you tap it with your phone, your phone’s browser opens up that URL, and you see the Pokemon page.

This all works great, but I wanted to create an NFC project that had no external dependencies.

No web server, no app on your phone, nada!

I had the idea of sticking an NFC tag behind this collage that a friend of mine and I made (shout out to Ahmed):

And what better to store on that tag than a picture of Salt Bae, who sadly wasn’t available to add to our collage at the time?

The NFC tags I bought only have 492 bytes of writable memory, and that picture above is 23 kilo-bytes, approx. 53 times larger.

But with some time spent mangling the image in https://squoosh.app/ (making it monochrome, converting to webp, resizing, and deleting some odd pixels) I ended up with this 346 byte image, which is still mostly legible!

Now to figure out how to store it on the NFC tag!

I first reached for my trusty NFC Tools app, which is what I’ve been using up to this point.

Unfortunately, it doesn’t seem to have a way to upload binary file records.

It does have a “Data” record type, which allows you to enter a MIME type and a Data string:

But I couldn’t figure out how to upload a string representation of my webp image that worked (I did try base64, no luck).

NFC Tools seemed to be a bust, but storing an image file should be possible according to the NDEF spec.

This is where I would normally link the spec, but the spec itself isn’t public. NFC Forum keeps it behind lock-and-key, and charges $500 USD for their PDF 😠

So instead of proof, I’ll link to the Android NdefRecord docs which show that MIME types are an option, and also point out that you can probably find that PDF on Google.

At this point, I figured my only option might be to write an Android app that sent the correctly formatted data to the NFC tag.

I think the main implementation would’ve only been a few lines of Java, but I’ve never made an Android app before, don’t have Android Studio installed, etc. etc. etc.

Fortunately, I discovered that there’s an experimental Web NFC API, meaning I could make a website instead of an Android app!

https://developer.mozilla.org/en-US/docs/Web/API/Web_NFC_API

The API is still in the early stages of development – it’s functional, but the JS documentation is sparse and it’s only implemented in Android’s Chrome and Samsung Galaxy browsers (no Firefox or iPhones yet).

The Web-NFC spec itself seems to have been in draft mode since 2015 (based on the Git commits). I’m super curious to learn the history of the proposal!

I used this API to create a little webpage that allows you to store images and URLs on an NFC tag, and read them back!

Check it out at /webnfc!

All the code is client-side, and embedded in the HTML file, so give it the ’ol “View Source” if you want to see how it works!

To be honest, I don’t think that storing an image on a tag is really the most useful thing. Odds are anybody using your tag is also going to need these tools to read them.

(Although, some images do show up on the deafult Android “Tags” app!)

The low memory of the NFC tags is also pretty limiting, your files have to be really small.

Fortunately, I did find that a whole lot of OG Pokemon sprites are < 500 bytes!

Still, I’m happy I made these web tools, and now I can have Salt Bae in my collage!

Thanks for reading! If any of you decide to mess around with NFC tags after reading this, I’d love to see what you make! :)