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