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

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

Rule of thumb

Inline only very small images (a few kilobytes at most). For anything larger, a normal file on a CDN with caching will be faster.

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.

Try it: Image to Base64 — free, runs in your browser, nothing is uploaded.

Originally published at ilovekit.app.