Image to Base64 Converter

What Is Base64 Encoding?

Base64 is a binary-to-text encoding scheme that represents binary data as an ASCII string, enabling images to be embedded directly in code.

Base64 encoding converts binary data — like the raw bytes of an image file — into a string of printable ASCII characters. The encoding uses a 64-character alphabet consisting of uppercase letters (A-Z), lowercase letters (a-z), digits (0-9), plus (+), and forward slash (/), with equals signs (=) used as padding. Every 3 bytes of binary input produce 4 characters of Base64 output, making the encoded string approximately 33% larger than the original binary data.

The name "Base64" comes from the fact that it uses 64 distinct characters to represent data. This encoding was originally designed for transmitting binary data through systems that only support text, such as email (MIME encoding) and older text-based protocols. Today, Base64 is most commonly used in web development to embed images directly in HTML, CSS, and JavaScript without requiring separate file requests.

How Base64 Encoding Works

The Base64 encoding process works by taking every group of 3 bytes (24 bits) from the input binary data and splitting them into 4 groups of 6 bits each. Each 6-bit group maps to one of the 64 characters in the Base64 alphabet. If the input length is not divisible by 3, the output is padded with one or two equals signs (=) to maintain the 4-character output block alignment.

For example, the ASCII text "Hi" (2 bytes: 01001000 01101001) is split into three 6-bit groups: 010010, 000110, 100100. These map to the Base64 characters S, G, k. Since the input was only 2 bytes instead of 3, one padding character is added, producing the Base64 string "SGk=".

Data URIs: Embedding Images in Code

A data URI (also called a data URL) is a scheme that allows Base64-encoded content to be included directly in web pages. The format is: data:[mediatype];base64,[data]. For a PNG image, this would look like: data:image/png;base64,iVBORw0KGgo.... Data URIs can be used anywhere a regular URL is expected — in HTML img tags, CSS background-image properties, JavaScript image objects, and more.

Why Convert Images to Base64?

Converting images to Base64 enables embedding images directly in code, reducing HTTP requests and simplifying deployment.

Image to Base64 Converter Features

A fast, secure, feature-rich tool for converting any image to Base64 directly in your browser.

How to Use Base64 Images in Code

Once you have the Base64 string, here's how to use it in HTML, CSS, JavaScript, and other contexts.

HTML Image Tag

Use the data URI directly in the src attribute of an img tag:

CSS Background Image

Embed the image as a CSS background using the url() function with a data URI:

JavaScript Image Object

Create an Image object and set the source to the data URI:

React / JSX

Use the data URI in JSX just like a regular image URL:

JSON API Payload

Include the raw Base64 string (without the data URI prefix) in JSON:

Base64 Encoding Size Impact

Base64 encoding increases file size by approximately 33%. Here's when the tradeoff makes sense.

The 33% size increase from Base64 encoding is a direct consequence of the encoding algorithm: 3 bytes of binary become 4 bytes of text. For small images (icons, thumbnails, logos under 10KB), the saved HTTP request typically outweighs the size increase. For larger images, the Base64 string bloats HTML/CSS files and is not cacheable separately, making external files the better choice. The sweet spot for Base64 embedding is generally images under 10KB.

Best Practices for Base64 Images

Follow these guidelines to use Base64-encoded images effectively without hurting performance.

Keep Base64 Images Small

The general rule is to only Base64-encode images under 10KB. Beyond that size, the encoded string significantly bloats your HTML or CSS file, increases parse time, and prevents the browser from caching the image independently. For images larger than 10KB, serve them as external files and let the browser cache them normally.

Optimize Before Encoding

Always optimize your image before converting to Base64. Run it through an image compressor (TinyPNG, ImageOptim, or WebP conversion) to reduce file size first. A smaller source image means a shorter Base64 string. Converting an unoptimized 50KB PNG to Base64 when a 5KB optimized WebP would work is a common mistake that results in unnecessarily bloated code.

Use Data URIs in CSS for UI Icons

Small UI icons (checkmarks, arrows, close buttons, loading spinners) are perfect candidates for Base64 data URIs in CSS. They're small, used on many pages, and eliminating their HTTP requests speeds up initial rendering. Place them in your main stylesheet so they're cached with the CSS file itself.

Avoid Base64 for Responsive Images

Base64-encoded images can't take advantage of responsive image features like srcset and sizes attributes. If you need images to adapt to different screen sizes and resolutions, serve them as external files with proper responsive markup instead of embedding them as Base64 data URIs.

Consider Gzip Compression

Base64-encoded images in HTML and CSS benefit from gzip/brotli compression during HTTP transfer. The actual transfer size of Base64 content is typically smaller than the raw string because text compression algorithms handle the repetitive patterns in Base64 strings efficiently. This means the 33% size overhead is partially offset when your server uses compression.

Frequently Asked Questions