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

A data URL allows you to embed a file's contents directly in HTML or CSS, rather than linking to a separate file. Images encoded as Base64 are a common example. This can save a network request, but there are also downsides, so it's important to know when to use it.

A data URL looks like data:[media type];base64,encoded data. For instance, an image might be embedded with img src= data:image/png;base64,iVBORw0KGgo... alt=Icon. You can also define CSS backgrounds with background-image: url(data:image/svg+xml;base64,PHN2Zy...);.

To convert an image to a Base64 data URL, choose the image and use a browser-based tool to convert it. Copy the full string, including the data:image/...;base64, prefix, and paste it into the src attribute of an img tag or a CSS url(). After loading the page, verify that the image displays correctly.

Using Base64 helps with tiny images, such as small icons, where saving a network request outweighs the size increase. It's also useful for self-contained HTML files, like emails or single-file reports that must function without external assets. Embedding a placeholder, such as a blurred low-resolution preview, can be beneficial until the full image loads.

However, there are downsides to using Base64. The image size increases by about 33% because 3 bytes become 4 characters. The image cannot be cached separately and is downloaded again every time the HTML or CSS changes. Large data URLs can bloat your HTML or CSS, delaying rendering. Additionally, editing is harder since the image is embedded within the code.

As a rule of thumb, only inline very small images (a few kilobytes at most). For larger images, a normal file on a CDN with caching is faster. Prefer SVG for simple icons, as it can be inlined as plain text without Base64, making it smaller and easier to style.