Convert any image to Base64 instantly. Shows the raw base64 string, full data URI, CSS background-image snippet, and HTML img src snippet. Displays original and encoded file sizes. No upload — everything runs in your browser.
Click or drag any PNG, JPG, WebP, GIF, or SVG image onto the upload area. The image is read using the FileReader API directly in your browser. Files are not uploaded to any server.
Four formats are shown: Raw Base64 (just the encoded data), Data URI (data:image/png;base64,...), CSS snippet (background-image: url(...)), and HTML snippet (<img src="data:...">). Click Copy next to any format.
Paste the Data URI directly into HTML img src attributes, CSS background properties, or JSON configs. The tool shows original file size vs encoded size (Base64 adds ~33%). Use for images under 5KB for best performance.
Binary data uses all 256 byte values (0–255). Base64 only uses 64 safe ASCII characters (A-Z, a-z, 0-9, +, /). To represent 3 binary bytes (24 bits), Base64 needs 4 characters (24 bits ÷ 6 bits per character = 4). So every 3 bytes becomes 4 bytes, a 33.3% increase. Additionally, = padding characters are added to make the length a multiple of 4.
Use Base64 for: icons and small images under 5KB (eliminates HTTP request, saves round-trip time), inline SVGs in HTML, images in email HTML (some clients block external images), and JSON APIs that must include images. Avoid Base64 for: large images (the 33% size overhead and inability to cache separately makes them expensive), images used on multiple pages (they cannot be cached as a shared resource), and anything over 5-10KB.
No. Base64-encoded images embedded in HTML or CSS cannot be independently cached by the browser. They are part of the HTML/CSS resource which is cached as a whole. If the same image is used on multiple pages encoded as Base64, it is downloaded fresh each time with each page. Separate image files can be cached indefinitely and shared across pages.
PNG (image/png), JPEG/JPG (image/jpeg), GIF (image/gif), WebP (image/webp), SVG (image/svg+xml), BMP (image/bmp), ICO (image/x-icon). The MIME type is detected from the file extension and embedded in the data URI automatically.
Use it as a background-image property: .element { background-image: url("data:image/png;base64,iVBORw0KGgo..."); background-size: cover; }. This is especially useful for CSS pseudo-elements (::before and ::after) and small decorative icons that would otherwise require a separate HTTP request.
The tool handles images up to about 10MB. Larger files may cause browser memory issues. Note that Base64-encoding a 1MB image produces approximately 1.37MB of text. Pasting very large Base64 strings into HTML attributes can make your page source extremely large, slowing down page parsing.
