Image to Base64
NewConvert images to Base64 data URIs for CSS, HTML, and SVG embedding with reverse decoder.
Drop an image here or click to browse
Related Tools
Embed this tool
Add this tool to your website or blog with a single iframe snippet.
<iframe src="https://dukotools.com/tools/image-to-base64?embed=1" width="100%" height="600" frameborder="0" allow="clipboard-write" loading="lazy" title="image-to-base64 tool"></iframe>
About Image to Base64
Image to Base64 converts any image file into a Base64-encoded string and presents it in four ready-to-use formats: the raw data URI, the CSS background-image property value, an embedded HTML img tag, and the pure Base64 string. Upload a JPEG, PNG, WEBP, GIF, SVG, or ICO file up to 2MB via drag-and-drop. The tool shows the original file size, the encoded size, and the exact size increase percentage. Base64 encoding increases file size by approximately 33 percent because it represents 3 bytes of binary data as 4 ASCII characters. The reverse converter section accepts a Base64 string or data URI, decodes it, shows the image preview, and offers a download button for the decoded image file.
Key Features
Four Output Formats
Data URI, CSS background-image property, HTML img tag, and raw Base64 string.
Size Statistics
Shows original size, encoded size, and percentage size increase.
Individual Copy Buttons
Copy button for each output format separately.
Reverse Decoder
Paste a Base64 string or data URI to decode and preview the original image.
Multiple File Types
Supports JPEG, PNG, WEBP, GIF, SVG, and ICO files up to 2MB.
Download Encoded String
Download the Base64 string as a .txt file.
How to Use
- 1
Upload an image
Drag and drop or click to select a JPEG, PNG, WEBP, GIF, SVG, or ICO file.
- 2
Select your format tab
Choose Data URI, CSS, HTML img tag, or Raw Base64 tab.
- 3
Copy the output
Click the Copy button for your chosen format.
- 4
Decode a Base64 string (optional)
Scroll to the reverse section, paste a Base64 string, click Decode, and download the image.
Real-World Use Cases
Email Development
An email developer converts a logo PNG to Base64 and embeds it in the HTML email to ensure the logo appears even when the email client blocks external images.
CSS Sprite Alternative
A developer embeds small UI icons as Base64 data URIs in a CSS file to eliminate multiple image HTTP requests.
API Image Storage
A developer decodes Base64 image strings from a legacy API response to download and view the actual image files.
Frequently Asked Questions
Related Free Tools
Explore these tools that work great alongside Image to Base64: