Drag & drop image here, or browse file
Supports PNG, JPG, WebP, SVG, GIF, ICO, AVIF. You can also press Ctrl + V to paste an image directly from your clipboard.
Everything You Need to Know About Base64 Data URIs
An exhaustive developer guide covering RFC 2397 Data URLs, binary-to-text encoding mechanics, 33% overhead mathematics, and web performance best practices.
What is a Base64 Data URI?
Defined in RFC 2397, a Data URL allows inline inclusion of small image files directly within HTML, CSS, or JSON documents without requiring secondary HTTP network roundtrips.
The 33.3% Overhead Calculation
Base64 maps every 3 binary bytes (24 bits) into 4 printable ASCII characters (6 bits each). This creates an inevitable ~33.3% increase in payload size compared to raw binary transfer.
100% Client-Side Privacy
All image encoding, decoding, and byte parsing run entirely inside your browser using the HTML5 FileReader and Web APIs. No images or logs are ever transmitted to any remote server.
Data URI Anatomy (RFC 2397)
image/png or image/svg+xml.;base64 signifies that the data string follows standard Radix-64 encoding.- •Small Icons & Badges (< 2 KB): Inlining saves an HTTP connection setup without bloating payload.
- •HTML Email Templates: Many email clients block remote image URLs by default; inline data URIs render reliably.
- •Self-Contained Bundles: Single-file web distributions, PDF export templates, and Web Components.
- •Large Photos (> 10 KB): The 33% size penalty causes significant HTML/CSS download bloat.
- •Cacheable Assets: Images embedded in HTML cannot be individually cached by browsers or CDNs.
- •Responsive Art Direction: High-resolution photos cannot use
srcsetresolution switching efficiently when inlined.