How to Convert an Image to Base64 (Data URLs): When It Helps and When It Hurts

A data URL lets you embed a file's contents directly in your HTML or CSS instead of linking to a separate file. Images encoded as Base64 are the classic example. It can save a network request, but it also has real downsides, so it pays to know when to use it.

What a data URL looks like

data:[<media type>];base64,<encoded data>

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

.logo { background-image: url("data:image/svg+xml;base64,PHN2Zy..."); }

How to convert an image

1Choose the image and convert it to a Base64 data URL with a browser-based tool.
2Copy the full string, including the data:image/...;base64, prefix.
3Paste it into the src attribute of an <img> tag or a CSS url().
4Load the page and check the image displays correctly.

When it helps

Tiny images such as small icons, where saving a request outweighs the size increase.
Self-contained HTML files, such as emails or single-file reports that must work without external assets.
Placeholders: a blurred low-resolution preview embedded until the full image loads.

When it hurts

Base64 adds about 33% to the size, because 3 bytes become 4 characters.
The image can't be cached separately; it is re-downloaded every time the HTML or CSS changes.
Large data URLs bloat your HTML or CSS, delaying rendering.
Editing is harder; the image is buried in code.

Prefer SVG for simple icons: SVG can be inlined as plain text without Base64, which is smaller and easy to style.

Frequently asked questions

+How do I convert an image to Base64?

Use a converter to encode the file and produce a data URL, then paste that string into an img src or a CSS url().

+Does Base64 make images bigger?

Yes, about 33% larger than the original binary file.

+Are Base64 images bad for performance?

For small images they can save a request, but for larger ones they slow pages and can't be cached separately.

+Can I embed SVG without Base64?

Yes. SVG is text, so you can inline it directly or use a URL-encoded data URL, which is often smaller.

Image to Base64

Free, runs in your browser — nothing you enter is uploaded.

Open tool →