How to Use an Image Data URL in HTML

An image data URL can keep a small graphic inside an HTML file, so the file does not need a separate image path. The common mistake is pasting only the Base64 characters into src. An image source needs the complete URL, including its type, encoding marker and comma.

This guide uses the Image to Base64 Converter to create that value, put it in an image element and decide when a regular image URL is easier to maintain.

Know which part belongs in the image source

A Base64-encoded PNG data URL has this structure:

data:image/png;base64,ENCODED_IMAGE_BYTES

data: starts the URL, image/png identifies the image type, ;base64 describes the encoding, and the comma separates the header from the payload. ENCODED_IMAGE_BYTES is a placeholder here. Keep all four header parts when copying a real result. See MDN’s data URL syntax.

A bare Base64 payload starts after that comma. It can be useful when a receiving system specifically asks for encoded bytes, but it is not the complete image URL. The tool labels its first output Base64 data URI; that field includes the prefix. Do not add another prefix in front of it.

Convert a small image and choose the HTML output

1. Open the converter and use Choose an image to select your file. The interface lists JPG, PNG, GIF, WebP and SVG, with a 20 MB file limit.
2. Check the preview and filename to confirm you selected the intended image.
3. Read the original size, encoded size, size growth and source format. The input limit is a tool limit, not a recommendation to embed a file that large.
4. For an existing image element, select Copy data URI and replace its entire src value. For a new element, select Copy img tag.
5. Edit the generated empty alt attribute to match the image’s purpose, then preview the page in its actual destination.

The current converter offers a data URI, an HTML image tag and a CSS background rule. It has no bare-payload switch or download button. For this task, use one of the two HTML-related copy buttons.

A measured PNG example

In our October 11, 2026 check, we selected a synthetic 320 by 200 pixel PNG containing a blue rectangle and transparency. It was a test graphic, not a photograph or a benchmark for other images.

Both copied outputs matched their displayed fields. The copied image tag included the complete data:image/png;base64, source and alt="". Encoding made this representation longer; it did not compress the PNG.

Put the complete value inside a quoted src attribute

This is an HTML template for the tested graphic. Replace PASTE_COMPLETE_DATA_URL_HERE with the entire first output from the converter; the placeholder itself will not load an image.

<img decoding="async"
     src="PASTE_COMPLETE_DATA_URL_HERE"
     width="320" height="200"
     alt="Blue rectangle with a transparent border">

When using Copy img tag, paste the whole tag into your HTML source. Do not put that tag inside another element’s src quotes. Use your own image dimensions and an appropriate description. Keep alt="" for an image that is purely decorative. Width and height can reserve space while the image loads. MDN’s image element reference explains these attributes.

Fix copying errors before changing the image

The source starts with iVBOR instead of data:

For the tested PNG, iVBOR was the beginning of the encoded payload. A source beginning there has lost the URL header. Copy the full data URI field again rather than guessing which characters were removed.

The header appears twice, or the comma is missing

A result such as data:image/png;base64,data:image/png;base64,... has been prefixed twice. A header without its separating comma is also malformed. Replace the entire source value with a fresh copy.

The editor shows the tag as text

A paragraph or code-example block may treat pasted HTML as text. Use the editor’s HTML insertion feature when your goal is to render the image. If your goal is to show the example itself, follow our guide to displaying HTML code as text.

The copied value has been shortened

Keep the full output, including any trailing equals signs. An ellipsis in an explanatory example means omitted characters; it is not part of a usable image source. Compare the saved HTML with the original output if an editor or transfer step may have truncated it.

Choose a normal image URL when reuse matters

A data URL can be convenient for a small graphic in a self-contained HTML demo. A normal image URL is usually easier to manage for a logo reused across pages, a frequently updated image or a large picture. You can change the asset without replacing a long string in every document, and offer different image files for different display sizes.

An external image response can have its own caching policy. An inline data URL is part of the document that contains it, so it does not receive separate HTTP cache headers. The containing document may still be cached. MDN’s HTTP caching guide explains how stored responses can be reused according to their freshness and cache controls.

There is no single file-size cutoff that guarantees a faster page. Compare the two versions in your real page if performance is the reason for embedding. Before finishing, check the saved source, the visible result and the image’s alternative text together.