Utilities · Generator

Image to Base64

Convert images (jpg, png, gif, svg, webp) to Base64 strings and CSS background-image snippets.

Drop image here or click to browse

JPG, PNG, GIF, SVG, WebP

Image Preview

No image uploaded

Base64 Output

Base64 string will appear here…

100%

Free, no
sign-up needed

Code written
by hand

85+

CSS tools
in one place

<1s

Copy-ready
CSS instantly

What is this

What is the Image to Base64 Converter?

Convert images to Base64 data URIs for embedding directly in CSS as background-image values. No external file dependencies.

Everything runs locally in your browser. Adjust the controls above, preview instantly, and copy clean, production-ready CSS — no account, no upload.

How to use

Using the Image to Base64 Converter

Everything lives in the panel at the top of this page. There is nothing to install — it all runs right here in your browser.

Upload or paste image

Drag and drop an image file or click to browse. SVG, PNG, JPG, GIF, and WebP are supported.

Choose encoding

SVG files: use URL encoding (smaller output). Raster images: use Base64 encoding (required for binary data).

Copy the data URI

Click Copy to get the full data:image/... URI ready to paste into a CSS background-image value.

The output

What the generated code looks like

Clean, production-ready CSS — no vendor bloat, no unnecessary declarations.

embedded.css

.icon-check {
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8l4 4 8-8' stroke='%230071e3' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

SVG images embedded as data URIs should be URL-encoded, not Base64-encoded. URL-encoded SVG is smaller than Base64. Raster images (PNG, JPG) should use Base64 encoding.

Common mistakes & fixes

Common mistakes & how to fix them

A few habits trip people up. Here is what to watch for — and the exact fix.

Embedding large raster images as Base64

A 50KB PNG becomes approximately 67KB as Base64 (33% overhead). If many images are embedded, the CSS file bloats significantly.

Fix: Only embed small images (icons below 2KB) as data URIs. Larger images load faster as separate files that can be cached independently by the browser.

Pro tips

Pro tips for better results

★

Use SVG data URIs for icons, not icon fonts

SVG data URIs are self-contained, do not require a font loading step, render crisply at any size, and can be coloured with CSS currentColor when embedded inline. They are smaller than equivalent icon font subsets for small icon sets.

FAQ

Frequently asked questions

Yes. data:image/png;base64,... works as an img src value. This is useful for programmatically generated images where no server-side file exists.

Small data URIs (below 2KB) are often faster because they save an HTTP request. Large data URIs are slower because they increase the HTML/CSS payload size and cannot be cached separately. The break-even point depends on HTTP/2 multiplexing and cache behaviour.