Base64 to Image & Image to Base64 Converter

Convert Base64 data strings into downloadable images, or encode PNG, JPG, SVG, and WebP images into Base64 data URIs, HTML img tags, and CSS background rules.

Conversion Mode

Base64 String Input
Asset Details
0.08 KB

MIME

image/png

Bytes

78 B

Overhead

+33.3%

Standard

RFC 4648

Decoded Graphic Canvas
Decoded Preview
HTML <img> Snippet
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAA...

Zero Server Upload Privacy

Graphic bytes are processed directly inside your browser memory using HTML5 Canvas & FileReader API.

RFC 4648 Base64 Encoding Mathematics & Data URI Structure

Base64 maps 3 binary bytes (24 bits) into 4 printable ASCII characters (6 bits each) across a 64-character alphabet:

1. Base64 3-to-4 Byte Expansion Ratio
Expansion Ratio =
4 ASCII Characters (24 bits)3 Binary Bytes (24 bits)
= 1.333 ⟹ +33.33% Size Overhead
2. RFC 2397 Data URI Specification
URI = "data:" + MIME + ";base64," + Data
Step-by-Step Base64 Decoding & Reconstruction Breakdown
Step 1: MIME Header Detection & Padding Validation
Inspect prefix for data:image/(png|jpeg|webp|svg+xml);base64, and strip whitespace.
Step 2: 6-Bit Word Unpacking & Binary Byte Reassembly
Convert every 4 ASCII indices into 3 octets: (C1 << 18) | (C2 << 12) | (C3 << 6) | C4.
Step 3: Binary Blob Creation & Graphic Canvas Render
Reconstructed Image=Rendered Bitmap / Vector Asset

Base64 Inlining vs External HTTP Asset Tradeoffs

MetricBase64 Inlined AssetExternal Image FileRecommended Decision
HTTP Roundtrips0 extra network requests1 separate HTTP GET requestInline small icons (<5 KB)
Payload Size+33.3% larger transfer sizeOriginal binary sizeUse external for large photos
Browser CachingTied to HTML / CSS cacheIndependently cached by URLUse external for recurring logos

Frequently Asked Questions

What is a Base64 Image Data URI?
A Base64 image data URI is a string representation of binary image data formatted as `data:image/[type];base64,[data]`. It allows developers to embed small graphics and UI icons directly into HTML or CSS without triggering separate HTTP roundtrips.
Does Base64 encoding increase file size?
Yes. Base64 encoding converts every 3 bytes of binary data into 4 ASCII characters, resulting in an exact 33.33% file size expansion.
Is this converter safe for sensitive documents and photos?
Yes. Decoding and encoding execute 100% locally in your browser using standard JavaScript FileReader and Canvas APIs. No image data is transmitted to external servers.
Which image formats are supported?
The tool supports all major web raster and vector formats: PNG, JPG/JPEG, WebP, SVG, GIF, ICO, and AVIF.

Related Tools