What is a data URI in a tokenURI?

A data URI embeds the content directly in the string, e.g. data:application/json;base64,eyJu... instead of linking to IPFS or HTTPS. Fully on-chain NFTs return metadata this way.

How much bigger does Base64 make data?

Base64 uses 4 characters for every 3 bytes, so the output is about 33% larger than the input. That extra size costs gas when stored or returned on-chain.

What is URL-safe Base64?

A variant that uses - and _ instead of + and / and usually drops the = padding, so the result can be used in URLs and filenames.

NFT tokenURI Base64 Decoder & Data URI Encoder

Convert between Base64 and hex bytes, e.g. for on-chain token URIs and data URIs.

About Base64 Converter

Decode Base64 and data: URIs, such as the on-chain metadata returned by an NFT's tokenURI(), into JSON, text and hex, with a preview of embedded data:image URIs (SVGs are shown as images, so their scripts do not run). It also converts hex bytes to standard and URL-safe Base64, and builds a base64 data URI from JSON metadata or an SVG, optionally minified first.

Common uses

Read the JSON metadata and image of a fully on-chain NFT
Build the data:application/json;base64 string a tokenURI() function should return
Encode an SVG as a data:image/svg+xml;base64 URI for on-chain art
Convert hex bytes from a contract into Base64

FAQ

What is a data URI in a tokenURI?: A data URI embeds the content directly in the string, e.g. data:application/json;base64,eyJu... instead of linking to IPFS or HTTPS. Fully on-chain NFTs return metadata this way.
How much bigger does Base64 make data?: Base64 uses 4 characters for every 3 bytes, so the output is about 33% larger than the input. That extra size costs gas when stored or returned on-chain.
What is URL-safe Base64?: A variant that uses - and _ instead of + and / and usually drops the = padding, so the result can be used in URLs and filenames.