Base64 Encoder
Convert an image to a Base64 string with ready-to-use CSS, HTML, and data URI snippets. Or paste a Base64 string to decode it back into an image.
300+ images encoded
Drag & drop a file here, Ctrl+V to paste, oror
4 Output Formats
Raw Base64 string, Data URI, CSS background-image snippet, and HTML img tag — ready to paste into your code.
Encode & Decode
Upload an image to encode, or paste a Base64 string to decode it back into a downloadable image file.
100% Private
Encoding and decoding happen entirely in your browser via the FileReader API. No server upload, no storage, no tracking.
What is Base64 encoding?
Base64 is an encoding scheme that converts binary data (like images) into ASCII text using 64 characters (A-Z, a-z, 0-9, +, /). This lets you embed images directly in HTML, CSS, JSON, or emails without separate file requests. The tradeoff is a roughly 33% size increase, so it's best suited for small images like icons, logos, and thumbnails. For compressing images before encoding, use the Image Compressor. To convert between formats first, try the Format Converter.
CSS and HTML embed snippets
The tool generates four ready-to-use outputs: the raw Base64 string, the complete Data URI (with MIME type prefix), a CSS background-image property, and an HTML img tag. Copy any of them directly into your code. Data URIs start with data:image/png;base64, followed by the encoded string — browsers decode and render them inline without an HTTP request. To resize images to icon sizes before encoding, use the Image Resizer.
Decoding Base64 back to images
Paste any Base64 string or Data URI into the decode section and the tool reconstructs the image. It auto-detects the image format from the MIME type header or the first bytes of the Base64 data. The decoded image can be previewed and downloaded as a file. This is useful for extracting embedded images from HTML source code, API responses, or email templates. For batch processing, check the Batch Processor.
When to use Base64 vs file references
Base64 embedding is ideal for small images (under 10KB) like icons, favicons, and UI elements — it eliminates HTTP requests and improves initial page load. For larger images, file references are better because Base64 adds 33% overhead, cannot be cached separately, and increases HTML/CSS file size. The size info above the output shows the exact overhead for your image. For generating favicons optimized for embedding, use the Favicon Generator. Explore all 88 image tools.
Base64 encoding solves a specific problem: embedding binary image data in text-only contexts. HTML email is the most practical example — many email clients block external images by default, but Base64-encoded images embedded directly in the HTML body render immediately without the recipient clicking "show images." Single-file web applications, offline documentation generators, and data URIs in CSS also benefit from inline embedding. If you build Open Graph previews or social sharing cards, the OG Image Previewer shows exactly how your images will appear on each platform.
The performance tradeoff is straightforward: Base64 strings are roughly 33% larger than the original binary file, they cannot be cached separately by the browser, and they increase the parse time of the HTML or CSS document they are embedded in. For images above 10-15KB, external files served through a CDN with proper cache headers will always outperform inline Base64. The sweet spot is small UI elements — icons, logos, loading spinners, and button graphics — where eliminating an HTTP request matters more than the size overhead.
A practical workflow: crop your image to the exact region you need with the Image Cropper, ensure it meets quality requirements with the Quality Analyzer, then encode here. For splitting a sprite sheet into individual icons before encoding, use the Image Splitter. Read our Base64 encoding guide for tips, examples, and best practices.