What is the correct syntax for a Base64 image in HTML?

Use a data URI as the src of an img tag: img src="data:image/png;base64,iVBORw0KGgo..." where image/png matches the real file type and everything after the comma is the Base64 text. The prefix has four parts: the data: scheme, the MIME type, the word base64, and a comma. If any part is missing or misspelled, the browser shows a broken image.

Can I use a Base64 image as a CSS background?

Yes. Write background-image: url("data:image/png;base64,..."); and keep the quotes around the URI. Quotes are optional for pure Base64 because it contains no spaces or parentheses, but they are required for URL-encoded SVG data URIs and they make the rule safer to edit.

Why is my Base64 image not showing up?

The usual causes are a wrong MIME type (an SVG labelled as image/png does not render), a missing or extra character from copy and paste such as a line break in the middle of the string, and a Content Security Policy that blocks data: in img-src. Paste the full URI into the address bar to test it on its own.

Does a Base64 image work in a srcset or picture element?

Yes. Data URIs are valid anywhere a normal image URL is valid, including srcset, source elements inside picture, CSS image-set and the poster attribute of video. The catch is that each candidate repeats its own Base64 text, so the HTML grows quickly if you list several sizes.

Is it better to use Base64 or a normal image file?

For tiny images under a few kilobytes, such as a small icon or a loading spinner, Base64 saves a request and is convenient. For anything larger, a normal file is better because the browser can cache it separately and the HTML stays small and readable.

How to Use a Base64 Image in HTML and CSS

Published October 5, 2026

A code window showing an img tag whose src is a data URI, next to the picture it renders

A Base64 image is a normal picture turned into text, so you can paste it straight into your HTML or CSS instead of linking to a file. It is a neat trick when you need a single self-contained file — a demo page, a code snippet for a forum, a tiny icon inside a stylesheet. It is also a trick with sharp edges: one missing character and the image silently disappears.

This guide gives you working, copy-paste examples for every place a Base64 image can live, and then walks through the mistakes that cause most “my data URI is not showing” problems. If you only need the concept, our beginner guide to converting an image to Base64 covers what the encoding is; this one is about using the result.

Get the string — already wrapped for HTML or CSS

Drop in an image and choose the HTML img tag or CSS background wrap format. Copy, paste, done. It runs in your browser; nothing is uploaded.

Open the Image to Base64 Converter →

The anatomy of a data URI

Every embedded image uses the same four-part pattern, called a data URI:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...

data: tells the browser the content is inline, not a web address.
image/png is the MIME type — the kind of file. Use image/jpeg for JPG, image/webp for WebP, image/gif for GIF and image/svg+xml for SVG.
;base64 says the data that follows is Base64 encoded.
The comma separates the header from the data. Everything after it is the image itself.

Once you understand those four parts, every example below is the same string dropped into a different slot.

In an HTML img tag

<img alt="Company logo" width="64" height="64"
     src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...">

This is the simplest case. Always keep the alt text, and set width and height so the page does not jump while it loads — the browser cannot know the dimensions of an image it has not decoded yet. The Base64 text can be on one very long line or split across several; browsers ignore whitespace inside the attribute value, but some editors and templating tools do not, so one line is safer.

As a CSS background image

.badge {
  background-image: url("data:image/png;base64,iVBORw0KGgo...");
  background-repeat: no-repeat;
  background-size: contain;
}

Keep the quotes around the URI. They are optional for plain Base64, but they stop a stray character from ending the url() early, and they are mandatory for the un-encoded SVG form below. A stylesheet-embedded image has one real advantage over an HTML one: the browser caches it together with the stylesheet, so repeat visits do not pay for it again.

As a favicon

<link rel="icon" href="data:image/png;base64,iVBORw0KGgo...">

A data URI favicon removes the extra request browsers make for /favicon.ico, and it is how many small sites ship a single-file page. Keep the source at 32×32 or 48×48 pixels so the string stays short. If you need a full icon set instead, use the favicon generator.

Inline SVG without Base64

SVG is already text, so you do not have to Base64 it. A URL-encoded SVG is usually smaller:

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23ff6600'/%3E%3C/svg%3E");

Two details matter here: use single quotes inside the SVG so they do not clash with the double quotes around url(), and replace # with %23 — an unescaped hash is read as the start of a URL fragment and cuts your colour off. If you would rather not escape anything, Base64-encoding the SVG works too; it is just about a third larger.

In JavaScript

const img = new Image();
img.src = "data:image/png;base64,iVBORw0KGgo...";
document.body.appendChild(img);

Data URIs also work as a canvas source and inside fetch(), which can turn one back into a file — handy when you want to go the other way, as covered in how to decode a Base64 string into an image file.

How to get a ready-to-paste string

Open the Image to Base64 converter and drop in your PNG, JPG, WebP, GIF or SVG.
Choose Full data URI as the output so the data:image/...;base64, prefix is included. (Choose Raw Base64 only if an API or template adds the prefix itself.)
Pick the Wrap as format: plain string, CSS background-image rule or complete HTML <img> tag.
Click Copy and paste it into your file.
Paste the same data URI into a browser address bar to confirm the image renders on its own before you debug anything else.

Why a data URI fails (and how to fix it)

Symptom	Likely cause	Fix
Broken image icon	Truncated or modified string	Re-copy the full string; check that no line break or space crept in
Works in address bar, not on the page	Content Security Policy blocks `data:`	Add `data:` to `img-src` in your CSP header
SVG shows nothing	MIME type says `image/png`	Use `image/svg+xml`
CSS rule ignored	Missing quotes or unescaped `)`	Wrap the URI in double quotes
Colours missing in SVG	Unescaped `#`	Use `%23`
Image blurry	Source too small for the display size	Encode a larger source, or a 2× version for sharp screens

Keep the string short

Every byte of the image becomes about 1.33 bytes of text that sits inside your HTML or CSS, so a 200 KB photo adds roughly 270 KB of unreadable text to the file. Shrink the image before you encode it — run it through the image compressor and the image resizer first. A 2 KB icon is a good candidate for embedding; a 400 KB hero photo is not. We explain exactly where that line falls in Base64 images are 33% bigger.

One last warning: if you are building an HTML email, a data URI is the wrong tool entirely — Gmail and several Outlook versions refuse to show them. See why Base64 images do not show in Gmail and Outlook before you ship.