When should I use Base64 encoding instead of a regular image URL?

Base64 is the right choice for small UI assets - favicon-sized icons, loading spinners, and decorative SVG dividers - where eliminating one HTTP request genuinely improves performance. It is also required for embedding images in HTML email (many email clients block external URLs), in single-file HTML documents, and in REST or GraphQL API payloads that transport image data as JSON strings. Avoid Base64 for photographs or any image larger than 10KB, because the 33% size overhead negates the request savings.

What is the difference between a data URI and raw Base64?

A data URI includes a complete MIME type prefix: data:image/png;base64, followed by the encoded string. This format is ready to paste directly into an HTML src attribute or CSS url() value. Raw Base64 is the encoded string without any prefix. Use data URI for HTML and CSS contexts; use raw Base64 when your target system - an API, a database field, or a configuration file - adds its own MIME type metadata separately.

How much larger does a file get when Base64 encoded?

Base64 encoding increases file size by exactly 33%. This is a fixed property of the Base64 algorithm defined in RFC 4648: every 3 bytes of binary data are encoded as 4 ASCII characters, producing a 4/3 size ratio. A 100KB PNG image produces a 133KB Base64 string. This overhead is why Base64 encoding is appropriate for small images only - icons and UI elements under 10KB - where the HTTP request eliminated outweighs the size increase.

Can I embed a Base64 image in CSS?

Yes. CSS accepts data URIs directly in the url() function used for background-image. The syntax is: background-image: url('data:image/png;base64,YOUR_ENCODED_STRING'). This technique is standard for CSS sprites, loading spinners, and small decorative icons. Build tools like Webpack, Vite, and esbuild automatically inline images below a configurable size threshold - typically 4-8KB - using this exact mechanism. For SVG files, URL-encoding the SVG markup (instead of Base64 encoding it) often produces a shorter string.

Which image formats can be converted to Base64?

This tool encodes all common raster and vector formats: JPEG (.jpg, .jpeg), PNG (.png), WebP (.webp), GIF (.gif), BMP (.bmp), ICO (.ico), and SVG (.svg). The encoding preserves the original binary data exactly - no re-encoding or quality loss occurs. The MIME type in the data URI prefix reflects the original format (data:image/webp;base64,... for WebP files). To change the image format before encoding, use the Image Converter tool first.

Image to Base64

Upload any image to instantly convert it to a Base64-encoded data URI or raw Base64 string.

Choose image(s) to encode

Any image format. Up to 10 MB per file. Max 50 files.

Runs locally in your browser. Nothing is uploaded or sent to a server.

Upload any image to instantly convert it to a Base64-encoded data URI or raw Base64 string. Copy the output directly into your CSS background-image, HTML img src, or API payload. Batch mode encodes multiple images at once and exports all strings as a single .txt file.

Updated November 3, 2026

image-tools

Base64 to Image

Decode Base64 locally, preview the image, and download its original bytes without re-encoding.

developer-tools

Base64 Encode / Decode

Convert text or files, repair Base64 padding, choose charsets, and process separate lines locally.

image-tools

Image Compressor

Compress images to 100KB, 200KB or 1MB in your browser. Cap width and height, convert JPEG, PNG, WebP, AVIF, strip EXIF. No upload, no sign-up.

What Is Base64 Image Encoding and Why Does It Matter?

Base64 is a binary-to-text encoding scheme that represents binary data using only 64 printable ASCII characters. When an image is Base64-encoded, every 3 bytes of raw binary image data are mapped to 4 printable characters drawn from A–Z, a–z, 0–9, +, and /. The result is a continuous string of text that can be safely embedded inside HTML, CSS, JSON, XML, and virtually any text-based format without corruption.

Base64 image encoding remains a core technique for frontend developers. It is the standard way to inline images into CSS stylesheets so they load with zero additional HTTP requests, to embed images in single-file HTML documents and email HTML, and to transmit image data through REST or GraphQL APIs that operate on JSON payloads. Any runtime that handles text - including JavaScript, Python, Ruby, PHP, and Go - can decode Base64 back to binary using a single standard library call.

How Does the Browser Convert an Image to Base64?

This tool uses the FileReader API with its readAsDataURL() method to perform the encoding entirely inside your browser. When you upload an image, FileReader reads the raw binary file from your device's memory and runs it through the Base64 algorithm without any server involvement. The result is returned as a complete data URI string that begins with data:[mime-type];base64, followed by the encoded payload.

Encoding is synchronous and extremely fast - a 1MB JPEG typically encodes in under 50 milliseconds on modern hardware. For the Raw Base64 output option, the tool strips the data:[mime-type];base64, prefix and returns only the encoded string, which is the format expected by most backend APIs. In both cases, the original file is never modified, and nothing is transmitted over the network.

How Does Batch Encoding Work?

Batch mode accepts multiple image files in a single selection. Each file is encoded independently using the same FileReader.readAsDataURL() pipeline as single-file encoding. Because Base64 encoding is a CPU-bound operation that runs synchronously on the binary data, processing a batch of 20 icons completes in well under one second on modern hardware - the limiting factor is file size, not file count.

The batch export produces a plain text file with one encoded string per line. Each line is prefixed with the original filename as a comment (e.g., /* icon-home.png */) so you can identify which string belongs to which image. This format is designed for direct copy-paste into CSS files or for scripted processing - a build script can split on the comment markers to map filenames to their encoded values.

When Should You Use Base64 Encoding for Images?

Base64 inline images are the right choice in specific, well-defined scenarios. Use Base64 for small UI assets - favicon-sized icons, loading spinners, decorative SVG dividers, and inline logos - where eliminating an extra HTTP request genuinely improves performance. Google's PageSpeed guidelines identify eliminating render-blocking resources as a top-tier optimization, and inlining critical small images is one proven method.

Avoid Base64 for photographs, hero images, or anything larger than 10KB. Because Base64 encoding inflates file size by exactly 33% (as defined in RFC 4648's 4/3 byte mapping), a 200KB product photograph encoded as Base64 adds roughly 267KB to your HTML or CSS file. This prevents the browser from caching the image independently and eliminates the performance benefit of parallel HTTP downloads. A practical threshold: if the image binary exceeds the HTTP overhead saved by removing one request (typically 200-400 bytes), Base64 hurts more than it helps.

What Are the Data URI Syntax Rules?

A data URI follows a precise RFC 2397 specification. The full structure is: data:[<mediatype>][;base64],<data>. For a PNG image the complete prefix is data:image/png;base64,. JPEG uses data:image/jpeg;base64,. WebP uses data:image/webp;base64,. SVG files can use either data:image/svg+xml;base64, (Base64 encoded) or data:image/svg+xml, followed by URL-encoded SVG markup - the URL-encoded form is usually shorter for text-heavy SVGs.

Browser support for data URIs is universal: every major browser has supported them since Internet Explorer 8. The maximum data URI length varies by context: Chrome and Firefox accept data URIs of any practical length in CSS and JavaScript. Internet Explorer had a 32KB limit, but IE support is no longer a concern. For HTML src attributes, all modern browsers accept data URIs without any documented size restriction beyond available memory.

How Is Encoding Different from Compression?

Base64 encoding and image compression are fundamentally different operations. Compression (JPEG, WebP, PNG deflate) reduces the amount of data needed to represent an image, often by discarding imperceptible visual details or finding patterns in pixel data. Encoding converts existing binary data into a different textual representation without changing the underlying content. Base64 encoding a PNG file does not compress it - it makes the same data 33% larger in string form.

For optimal inline image embedding, compress the image first using the Image Compressor to reduce its binary size, then encode the compressed result to Base64. Starting with a well-optimized image minimizes the Base64 string length and reduces the impact on your HTML or CSS file size.

How to Use Image to Base64

Upload your image or images

Click the upload area or drag and drop one or more image files. JPEG, PNG, WebP, GIF, SVG, BMP, and ICO formats are all supported. For batch encoding, drop multiple files at once.
Choose output format

Select either Data URI (includes the MIME type prefix, e.g. data:image/png;base64,...) or Raw Base64 (the encoded string only). Data URI is ready for direct use in HTML and CSS; Raw Base64 is for APIs, JSON payloads, and systems that handle MIME type metadata separately.
Copy or export

For a single image, click Copy to copy the encoded string directly to your clipboard. For batch mode, click Export .txt to download all encoded strings in a single text file, one per line, labeled by filename.