What is a base64 image and when should I use it?

A base64 image is a text representation of binary image data. It can be embedded directly in HTML, CSS, or JSON without a separate file request. This is useful for critical above-the-fold images (avoids one HTTP round-trip), email HTML (many clients block external images), and small icons or data URIs in CSS.

Why is the base64 string larger than the original file?

Base64 encoding converts every 3 bytes of binary data into 4 ASCII characters, resulting in a ~33% size increase. This is a fundamental property of the encoding format, not a tool limitation.

Should I use base64 for large images?

Generally no. Large base64 strings embedded in HTML or CSS increase document size, cannot be cached separately by the browser, and block rendering. For images over 10–20 KB, hosting the file and referencing it by URL is almost always better for performance.

Can I use this for images in React or JSX?

Yes. Copy the Data URL output and paste it as the src value of an tag or as a background-image in a style prop. The data URL is a valid image source anywhere a URL is accepted.

Are my images uploaded anywhere?

No. All encoding and decoding happens entirely in your browser using the FileReader API and standard JavaScript. Your images never leave your device.

Image to Base64 Converter — Encode & Decode

Convert any image to a Base64 data URL for embedding directly in HTML, CSS, or JSON — no external file needed. Or paste a base64 string to decode it back into a downloadable image.

Outputs are formatted for immediate use: a raw data URL, a CSS background-image rule, an HTML <img> tag, or a plain base64 string for API payloads.

Drop your image here

or click to browse

JPGPNGWebPAVIFGIFHEICSVGTIFFTGAHDRPDF

⌘Vpaste·Enterbrowse

When to use base64 inline images

Critical inline assets: Small icons, loading spinners, or above-the-fold images embedded as data URLs eliminate one HTTP request, which can shave 50–150 ms off perceived load time on cold connections.

Email HTML: Most email clients (Gmail, Outlook) block external image requests by default. Embedding images as base64 data URLs ensures they always display without requiring the recipient to click “show images”.

API payloads: Many vision APIs (Claude, GPT-4o, Google Vision) accept images as plain base64 strings in JSON request bodies. Use the JSON output tab to get just the string without the data URL prefix.

Performance tradeoff: Base64 strings are ~33% larger than the binary original and cannot be cached independently by the browser. For files over 20 KB, a hosted URL almost always performs better.

Also try

Favicon Generator — create a complete favicon package from any image →

Frequently Asked Questions

What is a base64 image and when should I use it?: A base64 image is a text representation of binary image data. It can be embedded directly in HTML, CSS, or JSON without a separate file request. This is useful for critical above-the-fold images (avoids one HTTP round-trip), email HTML (many clients block external images), and small icons or data URIs in CSS.
Why is the base64 string larger than the original file?: Base64 encoding converts every 3 bytes of binary data into 4 ASCII characters, resulting in a ~33% size increase. This is a fundamental property of the encoding format, not a tool limitation.
Should I use base64 for large images?: Generally no. Large base64 strings embedded in HTML or CSS increase document size, cannot be cached separately by the browser, and block rendering. For images over 10–20 KB, hosting the file and referencing it by URL is almost always better for performance.
Can I use this for images in React or JSX?: Yes. Copy the Data URL output and paste it as the src value of an <img> tag or as a background-image in a style prop. The data URL is a valid image source anywhere a URL is accepted.
Are my images uploaded anywhere?: No. All encoding and decoding happens entirely in your browser using the FileReader API and standard JavaScript. Your images never leave your device.