Developer guide

Base64 Image in HTML, CSS, and JavaScript

Practical examples for embedding Base64 image data in front-end code, with notes on performance and file size.

Copy-paste examples HTML, CSS, and JS Performance notes

4.8 / 5 124 ratings

What Is a Base64 Image Data URI?

A data URI combines the MIME type and Base64 content in one string. A common format looks like data:image/png;base64,iVBORw0KGgo...

You use a data image base64 value when you want to reference an image without a separate file URL. The browser reads the text and renders the image directly.

Note: searches for html to base64 usually refer to encoding an HTML file itself. This guide focuses on putting Base64 image data inside HTML, CSS, and JavaScript.

Base64 Image in an HTML Img Tag

Use a data URI in the src attribute when you need a self-contained HTML snippet with a base64 img tag pattern.

Basic img tag base64 example

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==" alt="1x1 pixel" />

Replace the sample value with output from the Image to Base64 converter.

Base64 Background Image in CSS

Use encoded images for small icons, placeholders, and decorative backgrounds with a background image base64 pattern.

CSS background-image

.icon { width: 24px; height: 24px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg=="); background-size: cover; }

Keep CSS data URIs small so your stylesheet stays fast to parse and download.

Convert Image to Base64 with JavaScript

Generate Base64 in the browser when you need to convert image to base64 javascript workflows for uploads, previews, or API calls.

FileReader example

function fileToDataUrl(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(reader.result); reader.onerror = reject; reader.readAsDataURL(file); }); }

The result includes the data URI prefix and encoded content. This is a common image to base64 javascript approach.

Canvas example

const dataUrl = canvas.toDataURL('image/png'); const base64 = dataUrl.split(',')[1];

Use canvas output when you already draw the image on a canvas element.

Base64 Image Examples

PNG and GIF Base64 strings are common for tiny UI assets such as icons, placeholders, and loading dots.

JPEG Base64 often starts with /9j/ when you view only the encoded characters without the prefix.

When docs mention an image to base64 string, they usually mean either the raw encoded characters or the full data URI. Both formats appear in real projects.

Use our converter pages to create a base64 image example or image base64 example from your own files instead of relying on placeholder text.

Related Converters

Image to Base64 PNG to Base64 JPG to Base64 SVG to Base64

Pros and Cons of Base64 Images

Pros

You reduce separate file requests for tiny assets, move images through JSON easily, and copy one string into multiple places.

Cons

Base64 image encode output is larger than the source file, harder to cache as a standalone asset, and a poor fit for large photos.

Frequently Asked Questions

Paste the full data URI into the src attribute of an img tag. You can copy a ready-made snippet from the Image to Base64 converter.

Use Base64 in CSS for very small assets such as icons. Avoid large background image base64 values because they increase stylesheet size.

Base64 can help with tiny files, but it usually hurts performance for large images because the encoded string is bigger and harder to cache separately.

Use FileReader with readAsDataURL for uploads or canvas.toDataURL when the image is already drawn on a canvas. Both methods return a string you can split or paste directly.