About

Data URIs encode binary image data directly into text using Base64, eliminating external file dependencies. The format follows RFC 2397: data:mediatype;base64,data. Embedding images this way reduces HTTP requests but increases payload size by approximately 33% due to Base64 overhead. Critical consideration: browsers enforce URI length limits - Chrome caps at 2MB for CSS backgrounds, IE8 at 32KB. BMP files lack native browser Data URI support; this tool re-encodes them through Canvas to PNG or JPEG. Incorrect MIME types cause rendering failures. This converter validates magic bytes against declared extensions to prevent silent corruption.

Production use cases: inline CSS backgrounds avoiding CORS, email templates requiring self-contained images, single-file HTML exports, reducing latency for critical above-fold icons. Trade-off analysis required: Base64 defeats gzip compression efficiency and bloats cache size. For images exceeding 10KB, external files with HTTP/2 multiplexing typically outperform Data URIs.

Formulas

Base64 encoding transforms binary octets into ASCII characters from a 64-symbol alphabet. Each group of 3 bytes (24 bits) maps to 4 Base64 characters (6 bits each).

Output Size = 4 × ceil(Input Bytes3)

The overhead ratio approaches 43 ≈ 1.33 for large inputs. Including the Data URI prefix adds constant overhead:

Total Length = len("data:") + len(mimeType) + len(";base64,") + Base64 Length

where mimeType is the IANA-registered media type (e.g., image/png). Padding characters (=) appear when input length ≠ 0 mod 3.

Reference Data

Format	MIME Type	Magic Bytes (Hex)	Native Data URI	Transparency	Compression	Typical Use
BMP	image/bmp	42 4D	Limited	No	None/RLE	Windows legacy
PNG	image/png	89 50 4E 47	Yes	Yes (Alpha)	Lossless	Icons, screenshots
JPEG	image/jpeg	FF D8 FF	Yes	No	Lossy	Photos
GIF	image/gif	47 49 46 38	Yes	Yes (1-bit)	Lossless (LZW)	Simple animations
WebP	image/webp	52 49 46 46	Yes	Yes (Alpha)	Both	Web optimization
ICO	image/x-icon	00 00 01 00	Yes	Yes	None	Favicons
SVG	image/svg+xml	3C 73 76 67 or 3C 3F 78 6D 6C	Yes	Yes	Text (gzip)	Vector graphics
AVIF	image/avif	00 00 00 * 66 74 79 70	Yes	Yes	Lossy/Lossless	Next-gen photos
TIFF	image/tiff	49 49 2A 00 or 4D 4D 00 2A	No	Yes	Various	Print/archival
HEIC	image/heic	00 00 00 * 66 74 79 70	No	Yes	Lossy	Apple photos

Frequently Asked Questions

Browsers inconsistently support BMP in Data URIs. The converter re-encodes BMP through Canvas API, outputting PNG (lossless, smaller) or JPEG (lossy, configurable quality). Original BMP data would exceed practical size limits and may fail rendering in CSS backgrounds.

Limits vary: Chrome supports approximately 2MB for CSS url() values, Firefox around 64KB for CSS (unlimited in HTML img src), IE8 caps at 32KB total. For production, keep Data URIs under 10KB for optimal performance. Images exceeding 50KB should use external files with HTTP/2.

Base64 adds 33% to file size and defeats binary-optimized compression (gzip achieves ~85% on images vs ~5% on Base64). A 30KB PNG becomes 40KB Base64, then compresses to ~38KB vs original 5KB gzipped. Use Data URIs only for small, critical-path images under 5KB.

Yes, direct conversion preserves animation frames. The FileReader extracts the complete GIF binary including animation tables. However, Canvas re-encoding (quality adjustment) flattens to single frame. Use "Original Format" output for animated GIFs.

This converter reads magic bytes - the file signature in the first 4-16 bytes - to determine true format. Renamed files (image.jpg actually being PNG) are detected correctly. MIME mismatch causes browser rendering failures; the detected type should be used.

For CSS: background-image: url(data:image/png;base64,...); For HTML: <img src="data:image/png;base64,...">. CSS has stricter length limits. Both require proper escaping of special characters in SVG Data URIs (use encodeURIComponent or Base64 for SVG).