Data URL Encoder & Decoder Online

What is a Data URL?

A Data URL embeds data directly in a URL using the form data:[<media-type>][;base64],<data>. The media type is optional, and the payload can be base64 or percent-encoded.

Why use Data URLs?

Data URLs are useful for embedding small files directly in HTML, CSS, tests, and examples without a separate file request.

Data URL example

data:text/plain;charset=utf-8;base64,SGVsbG8= -> inline text
data:image/png;base64,... -> image preview

Data URL in JavaScript

// Encoding in the browser
const file = new File(['Hello'], 'hello.txt', { type: 'text/plain;charset=utf-8' });
const reader = new FileReader();

reader.addEventListener('load', () => {
	console.log(reader.result);
	// Output: data:text/plain;charset=utf-8;base64,SGVsbG8=
});
reader.readAsDataURL(file);

// Decoding in the browser
const response = await fetch('data:text/plain;charset=utf-8;base64,SGVsbG8=');
console.log(await response.text());
// Output: Hello

Data URL in Go

package main

import (
	"encoding/base64"
	"fmt"
	"strings"
)

func main() {
	mediaType := "text/plain;charset=utf-8"
	payload := base64.StdEncoding.EncodeToString([]byte("Hello"))
	dataURL := "data:" + mediaType + ";base64," + payload
	fmt.Println(dataURL)
	// Output: data:text/plain;charset=utf-8;base64,SGVsbG8=

	parts := strings.SplitN(dataURL, ",", 2)
	meta := strings.TrimPrefix(parts[0], "data:")
	isBase64 := strings.HasSuffix(meta, ";base64")
	mediaType = strings.TrimSuffix(meta, ";base64")

	var decoded []byte
	if isBase64 {
		decoded, _ = base64.StdEncoding.DecodeString(parts[1])
	}
	fmt.Println(mediaType, string(decoded))
	// Output: text/plain;charset=utf-8 Hello
}

Data URL in PHP

<?php
// Encoding
$mediaType = "text/plain;charset=utf-8";
$dataUrl = "data:" . $mediaType . ";base64," . base64_encode("Hello");
echo $dataUrl . "\n";
// Output: data:text/plain;charset=utf-8;base64,SGVsbG8=

// Decoding
[$meta, $payload] = explode(",", $dataUrl, 2);
$metadata = substr($meta, 5);
$isBase64 = str_ends_with($metadata, ";base64");
$mediaType = $isBase64 ? substr($metadata, 0, -7) : $metadata;
$decoded = $isBase64 ? base64_decode($payload) : rawurldecode($payload);

echo $mediaType . " " . $decoded . "\n";
// Output: text/plain;charset=utf-8 Hello

Decode Data URL

About Data URLs