What image formats are supported?

PNG, JPG, GIF, WebP, SVG, and BMP. The output Data URL includes the correct MIME type for each format.

Why does Base64 make the file bigger?

Base64 encoding maps every 3 bytes to 4 ASCII characters — a 33% size increase. A 100 KB image becomes ~133 KB as Base64.

What is the difference between Data URL and Raw Base64?

A Data URL includes the MIME type prefix (data:image/png;base64,...). Raw Base64 is the encoded string only, without the prefix. Use Raw Base64 when an API or database expects the plain string.

Should I use Base64 images on my website?

Only for small assets (icons, favicons, email images). Base64 increases file size by 33% and prevents separate browser caching. For regular website images, use external file references with caching headers.

Can I use the CSS output directly in a stylesheet?

Yes. The CSS output is formatted as a complete background-image declaration. Copy and paste into your CSS rule. Works in all modern browsers.

Is there a file size limit?

No hard limit — the tool uses your browser's memory. Very large images (10+ MB) may produce extremely long Base64 strings. For web use cases, Base64 is most practical for images under 100 KB.

Image to Base64

Convert images to Base64 strings and Data URLs — free, instant, browser-based

Upload Image

Drag & drop or click to upload

PNG, JPG, GIF, SVG, WebP, BMP

Data URL (full)

Includes MIME type prefix — use directly in HTML/CSS src

Upload an image to see the Base64 output…

Raw Base64

String only, no prefix — use in code that adds the header

Upload an image to see the Base64 output…

CSS background-image

Ready to paste into a CSS stylesheet rule

Upload an image to see the Base64 output…

HTML <img> tag

Copy directly into HTML markup

Upload an image to see the Base64 output…

Free Image to Base64 Converter — Convert Any Image to a Base64 Data URL Instantly

Base64 is a way of encoding binary data — like an image file — into a string of printable ASCII characters. This is useful in many web development and programming scenarios where you need to embed image data directly into code, rather than linking to a separate file. The OmniWebKit Image to Base64 converter does this in your browser, instantly, without any server upload or file size limit.

Upload any image (PNG, JPG, WebP, GIF, SVG, BMP), and the tool immediately produces four ready-to-use output formats: the full Data URL (with MIME type prefix), the raw Base64 string, a CSS background-image declaration, and an HTML <img> tag with the Base64 value embedded. Copy any format with one click.

The tool also works in reverse: switch to "Base64 → Image" mode, paste any Base64 string or Data URL, and the tool decodes it back into a visible image preview that you can save as a file. This is useful for debugging email templates, API responses, or any system that stores images as Base64 strings.

What is Base64 Encoding?

Base64 is an encoding scheme that converts binary data into a text format. Computers store images as binary data — sequences of 1s and 0s — which cannot be reliably transmitted through all text-based protocols. Base64 solves this by mapping every 3 bytes of binary data to 4 printable ASCII characters using a fixed alphabet of 64 characters (A–Z, a–z, 0–9, +, /, and sometimes =).

The resulting string can be safely included in HTML attributes, CSS style rules, JSON objects, XML documents, email bodies, and any other text-based format — without worrying about character encoding, binary corruption during transfer, or file path dependencies.

Base64 Size Penalty

Base64 encoding increases file size by approximately 33%. A 100 KB image becomes roughly 133 KB as a Base64 string. This is the trade-off for embedding the image directly in text. For large images used repeatedly across a website, external files (referenced by URL) are more efficient. Base64 is best used for small images — icons, logos, data URIs — where the HTTP request overhead would be higher than the 33% size penalty.

When to Use Base64 for Images — Real-World Use Cases

Email Templates and Newsletters+

Email clients like Gmail, Outlook, and Apple Mail are notorious for blocking externally hosted images. Many corporate email servers strip image links for security reasons. Embedding images as Base64 Data URLs directly in the email HTML ensures the image is always displayed, regardless of whether the recipient's server allows external requests. This is especially useful for logos, headers, and signature images in HTML email templates.

CSS Inline Icons and Small UI Graphics+

Small icons and decorative graphics can be embedded directly in a CSS file as Base64 Data URLs using the background-image property. This eliminates separate HTTP requests for icon files. For website critical path assets — like a loading spinner or a small logo that appears on every page — embedding as Base64 can improve page load time by removing one or more round-trip server requests, especially for HTTP/1.1 connections.

Single-File HTML Documents+

Sometimes you need to send a complete, self-contained HTML file that includes all assets — no external files, no server. This is common for documentation, reports, offline tools, and quick prototypes. Embedding images as Base64 Data URLs means the entire web page, including all images, is contained in a single .html file that works locally in any browser without any internet connection.

API Payloads and JSON Data+

REST APIs and JSON-based data formats cannot contain raw binary data. When an API needs to accept or return image data — for example, a document scanning API or an AI image generation endpoint — Base64 is the standard way to transmit image data in a JSON body. Many APIs (including Google's Vision API and OpenAI's image APIs) accept images as Base64-encoded strings in their request payloads.

Database Storage+

Some database schemas store image data as text strings rather than binary BLOBs. This is common in NoSQL databases like MongoDB (when images are stored in document fields) and in SQLite applications. Base64 encoding allows image binary data to be stored safely in VARCHAR or TEXT columns.

Canvas and Dynamic Image Generation+

When working with the HTML5 Canvas API, the toDataURL() method returns a Base64-encoded PNG or JPEG string representing the current canvas state. You will also encounter Base64 strings when working with image capture via the getUserMedia API, when processing images with JavaScript libraries, or when passing image data between Web Workers.

Base64 Output Formats Explained

Data URL

data:image/png;base64,iVBORw0KGgo...

The complete Data URL includes the MIME type prefix (data:image/png;base64, or data:image/jpeg;base64, etc.). This is the most complete and portable format. You can use it directly as the src attribute value in an HTML <img> tag, as a CSS background-image value, or wherever a URL is expected. The MIME type tells the browser what kind of binary data follows.

Raw Base64 String

iVBORw0KGgo...

The raw Base64 string is the encoded data without the data: prefix. Use this format when you are passing the image to an API that expects raw Base64 (not a Data URL), when constructing your own data URI in code, or when storing in a database field that handles its own type metadata.

CSS background-image

background-image: url("data:image/png;base64,...");

Ready to paste directly into a CSS rule. Copy this output and paste it into your stylesheet — the image is embedded without any separate file. This is the standard way to embed icons and small graphics directly in CSS. Works in all modern browsers.

HTML <img> tag

<img src="data:image/png;base64,..." alt="image" />

A complete, ready-to-use HTML image element with the Base64 Data URL as the src. Copy and paste this directly into any HTML file. The image will render in any browser that supports Data URLs (all modern browsers, and most legacy ones too).

Frequently Asked Questions

Is my image uploaded to a server?+

No. All encoding and decoding runs entirely in your browser using the FileReader API and JavaScript. Your images never leave your device and are never stored anywhere.

What image formats can I convert to Base64?+

You can upload PNG, JPG, GIF, SVG, WebP, and BMP images. The output Data URL will include the correct MIME type for each format (e.g. data:image/png;base64,... or data:image/jpeg;base64,...).

Why is the Base64 string so much longer than the original file?+

Base64 encoding increases file size by approximately 33% because it maps every 3 bytes of binary data to 4 ASCII characters. A 100 KB image produces roughly a 133 KB Base64 string.

Can I use the Base64 output directly in an HTML file?+

Yes. Use the "HTML <img> tag" output format — it generates a complete <img> element with the Base64 Data URL as the src. Copy and paste it into any HTML file. No external files are needed.

Can I decode a Base64 string back to an image?+

Yes. Switch to "Base64 → Image" mode, paste your Base64 string (with or without the data:image/ prefix), and click Decode. The image is displayed as a preview and can be downloaded as a file.

What is a Data URL?+

A Data URL (also called a data URI) is a URL scheme that allows embedding small files directly in web pages as inline data rather than as external file references. Image data URLs have the format: data:[mime-type];base64,[base64-data].

Should I use Base64 for large images on my website?+

No. Base64 encoding increases file size by 33% and is not cached separately by the browser. For large images used on websites, external file references (with proper caching headers) are significantly more efficient. Use Base64 only for small assets like icons, favicons, and email template images.

What does the "Raw Base64" format mean vs the full Data URL?+

The Data URL includes the MIME type prefix (data:image/png;base64,). The Raw Base64 is only the encoded data string without the prefix. Some APIs and databases expect the raw string without the prefix — use the Raw Base64 format in those cases.