DukoTools

Image to Base64

New

Convert images to Base64 data URIs for CSS, HTML, and SVG embedding with reverse decoder.

Free Forever
No Signup Required
No Files Stored

Drop an image here or click to browse

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. 1

    Upload an image

    Drag and drop or click to select a JPEG, PNG, WEBP, GIF, SVG, or ICO file.

  2. 2

    Select your format tab

    Choose Data URI, CSS, HTML img tag, or Raw Base64 tab.

  3. 3

    Copy the output

    Click the Copy button for your chosen format.

  4. 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