When should I use data URIs versus separate image files?

Data URIs work well for small images under five kilobytes — icons, decorative gradients, the kind of asset where saving an HTTP request matters more than caching the file. Larger images belong in their own files because the browser can cache them once and reuse them everywhere, while inlined images get re-downloaded inside every HTML or CSS request that references them.

How much larger is Base64 than the original binary?

Encoding adds about 33 percent overhead, so a 100KB PNG balloons to roughly 133KB after encoding. HTTP compression (gzip or brotli) trims that overhead a bit on the wire but it never disappears entirely. For small images, the cost is acceptable; for large images, you'll feel it.

Which image formats can I encode?

Any of them. PNG, JPEG, WebP, GIF, SVG, BMP, and ICO all encode the same way because Base64 doesn't care what's inside the bytes. The output begins with a data URI prefix like data:image/png;base64, that tells the browser how to interpret the rest, and from there decoding and rendering proceeds normally.

How do I use the Base64 result in CSS?

Drop it into background-image as a data URI: background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...'). Some CSS preprocessors include mixins to make this cleaner, and modern bundlers like webpack or Vite can inline small images automatically based on a configurable size threshold.

Can I encode SVG this way?

You can, but text-based encoding is usually a better fit for SVG because it avoids the 33 percent Base64 overhead. Reach for background-image: url('data:image/svg+xml, ') instead, and only fall back to Base64 when special characters in the SVG cause trouble for the text encoding path.

Are there file size limits to worry about?

Browsers handle data URIs up to about 32KB cleanly, and most modern browsers stretch to 2-4MB before they start refusing to render. The bigger practical issue is that large data URIs balloon your HTML and CSS files, so anything substantial belongs in a separate file.

Is the image sent to a server?

No. Encoding happens entirely in your browser, which is exactly what you want when you're converting private images for inline use without trusting them to a third-party uploader.

Image to Base64

Convert images to Base64 encoded strings online. Free image to Base64 encoder for embedding images directly in HTML, CSS, or JSON.

Image Tools Encoding / Decoding

Instant results

Upload Image

Drag and drop an image here, or

Browse Files

Supports PNG, JPG, GIF, WebP, SVG

Output

About Image to Base64

Convert images to Base64 encoded strings that can be embedded directly in HTML, CSS, or JavaScript. This eliminates the need for separate image files and reduces HTTP requests.

Note: Base64 encoding increases file size by approximately 33%. It's best for small images like icons and logos.

How to Use Image to Base64

Upload image

Drag and drop the image, or click to browse. PNG, JPEG, WebP, GIF, and SVG all encode through the same path, so format isn't a concern at upload time.

View Base64 output

The encoded result appears with a complete data URI prefix like data:image/png;base64, ready to drop into CSS or a JSON payload without any further wrangling.

Copy data URI

Click Copy to put the full data URI on your clipboard. From there it goes straight into a CSS background-image declaration, an HTML img src attribute, or any JSON field that expects a string.

Use in your project

Inline encoding is best reserved for small images like icons and gradients under five kilobytes. Larger images should stay as separate files because the browser can cache them between requests, which inlined data URIs cannot.

When to Use Image to Base64

Inlining small images in CSS

Tiny icons under five kilobytes become great candidates for inlining. Base64-encoding the file and dropping it into background-image as a data URI replaces a separate HTTP request with a few more bytes of CSS. The tradeoff is a slightly larger stylesheet, but on slow networks the round-trip you save more than makes up for it.

Embedding images in JSON or XML

Some older REST APIs and JSON-only schemas don't support multipart uploads at all. Base64-encoding the image lets you embed it in a normal text payload, and the receiver decodes it back to binary on the other side. It's a workaround, but a reliable one when you can't change the API contract.

Email HTML with embedded images

Email clients often block external images by default to protect the reader's privacy. Base64-embedded images travel inside the HTML itself so they always render, which is why marketing templates and transactional emails reach for the technique even though it bloats message size.

Storing images in databases as text

Some content management systems and older databases handle binary blobs awkwardly. Base64-encoding lets you stash a small image in an ordinary text column, which is useful for things like inline icons in CMS records or configuration files that ship with embedded thumbnails.

Image to Base64 Examples

Small PNG icon

Input

16x16 PNG (~500 bytes)

Output

iVBORw0KGgoAAAANSUhEUgAA... (~700 chars Base64)

A 500-byte icon expands to roughly 700 characters of Base64 because the encoding adds about a third in overhead. That's still small enough to embed in a stylesheet without bloating it noticeably, and the saved HTTP round-trip pays back the extra characters on first paint.

Data URI for CSS

Input

Logo PNG (5KB)

Output

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

This is the canonical inline form. CSS reads the data URI like any other URL, so the image is available immediately when the stylesheet loads. Save this technique for small images where killing an HTTP request matters more than the file-level caching you'd get with a separate asset.

JSON payload with image

Input

Profile photo upload

Output

{ "user": "alice", "photo": "data:image/jpeg;base64,/9j/4AAQSkZJRg..." }

Embedding the image directly in the JSON body keeps the request as a single text payload. The server decodes the Base64 portion back to binary on its side and writes the bytes wherever your storage layer expects them. It's the path of least resistance for profile photo APIs and document uploads that need to ride inside an existing JSON contract.

Tips & Best Practices for Image to Base64

1.Reserve inlining for genuinely small images, ideally under five kilobytes. Anything larger bloats your CSS or HTML and forfeits the caching benefits a separate asset would have given you.
2.For SVG, plain text encoding wins over Base64. SVGs are already text, so wrapping them in Base64 just adds 33 percent overhead. Reach for Base64 only when something in the text path can't handle special characters cleanly.
3.Webpack, Vite, and similar build tools have built-in inliners that swap small images for data URIs based on a configurable size threshold. Setting that ceiling to four to eight kilobytes is a sensible default in most projects.
4.Watch the cumulative effect on CSS file size. Each inlined image is small in isolation, but a stylesheet packed with them turns into a heavy first-paint blocker that defeats the original purpose.
5.With HTTP/2 the benefit of inlining shrinks because multiplexing handles many small requests cheaply. HTTP/1.1 traffic still gains a lot from inlining, so the right answer depends on which protocol your audience uses most.
6.Strip EXIF before encoding photos for public CSS. Camera files often carry location data, device identifiers, and timestamps you'd rather not bake into the source of every page on your site.

Frequently Asked Questions

Base64 turns the binary bytes of an image into an ASCII string, which makes the image embeddable in places that only accept text. The common use cases are inlining images in CSS as data URIs, attaching them to JSON or XML payloads, embedding them in HTML email templates, or storing them in database columns that don't support binary blobs cleanly.

Image to Base64

About Image to Base64

How to Use Image to Base64

Upload image

View Base64 output

Copy data URI

Use in your project

When to Use Image to Base64

Inlining small images in CSS

Embedding images in JSON or XML

Email HTML with embedded images

Storing images in databases as text

Image to Base64 Examples

Small PNG icon

Data URI for CSS

JSON payload with image

Tips & Best Practices for Image to Base64

Frequently Asked Questions

Related Tools

Base64 to Image

Image Format Converter

Image Resizer

Image Compressor

Image Cropper

Image Rotate & Flip