Base64 Image Not Showing in HTML or CSS? 8 Causes and Fixes

The short answer

A Base64 image that will not display almost always fails for one of a few reasons: the data:image/...;base64, prefix is missing, the MIME type does not match the file, the string was cut off or broken across lines, quotes in your HTML or CSS are clashing, or the site's Content Security Policy blocks data: images. Re-generate the code with the Image to Base64 converter, copy the output that matches where you are pasting it, and work through the checks below.

Know which output you copied

The converter gives four outputs for every image you choose. Picking the wrong one is the most common cause of a broken image.

Output	Looks like	Use it for
Data URL	data:image/png;base64,iVBOR...	The src of an img tag, or inside CSS url()
Base64 string only	iVBOR...	APIs, JSON fields, or code that adds the prefix itself
CSS background-image	background-image: url('data:image/png;base64,...');	Pasting straight into a CSS rule
HTML img tag	<img src="data:image/png;base64,..." alt="file.png" />	Pasting straight into HTML

Each box shows only the first 200 characters on screen, followed by an ellipsis, but the Copy button copies the full value. Do not select the visible text with your mouse and copy that; you will get a truncated string.

Cause 1: the data: prefix is missing

<img src="iVBORw0KGgo..."> will not work. The browser treats the string as a relative file path and looks for a file with that name. The src needs the full data URL:

<img src="data:image/png;base64,iVBORw0KGgo...">

Fix: use the Data URL or HTML img tag output, not "Base64 string only".

Cause 2: the MIME type does not match the file

The prefix tells the browser what kind of file it is decoding. The converter takes the type from the file you upload, so its output is consistent. Problems start when people edit the prefix by hand, for example changing image/png to image/jpeg on a PNG, or pasting a Base64 string from somewhere else under a prefix they typed themselves.

Fix: regenerate from the original file. If you must type the prefix, use the real type: image/png, image/jpeg, image/gif, image/webp or image/svg+xml.

Cause 3: the string was cut off

Long strings get truncated by:

• copying the preview text instead of using the Copy button,
• database columns with a length limit,
• form fields or CMS editors with a maximum length,
• email clients and chat apps that shorten long messages.

A truncated Base64 image usually shows as a broken icon, or as an image with its bottom part missing or grey.

Fix: copy with the button and check the length. If you are storing it, make sure the column type can hold the whole thing (in most databases a TEXT type rather than a short VARCHAR).

Cause 4: line breaks or spaces inside the string

Some editors, tools and email systems wrap long lines. A data URL with a line break or a space in the middle may fail to decode, depending on the browser and context.

Fix: paste into an editor with line wrapping turned off, search for spaces or new lines inside the string and remove them. Generate the code fresh rather than retyping it.

Cause 5: quote clashes in HTML or CSS

Base64 itself only uses letters, digits, +, / and =, so it never contains quotes. The clash comes from the code around it. Examples:

• An HTML attribute opened with a double quote but closed with a single quote.
• Pasting the CSS output (which uses single quotes inside url()) into a JavaScript string that is also wrapped in single quotes.
• Pasting the whole CSS line, including background-image:, into a place that only expects the url() value.

Fix: check the characters just before data: and just after the last = or letter of the string. They should be a matching pair of quotes, or a closing bracket in CSS.

Cause 6: the site's Content Security Policy blocks data: images

If the image displays when you open a local HTML file but not on your live site, check the browser console. A message about Content Security Policy and img-src means the server sends a policy that only allows images from listed sources.

Fix: add data: to the img-src directive (for example img-src 'self' data:), or stop embedding and serve the image as a normal file. If you do not control the server headers, ask whoever does.

Cause 7: the file was not a supported image

The converter accepts files the browser reports as images. If you encode a format the browser cannot display, such as a HEIC photo from an iPhone in many desktop browsers, the data URL will be valid but will not render.

Fix: convert the photo first, for example with a HEIC to JPG converter, then encode the JPG.

Cause 8: it works, but the page is slow or the email is clipped

Base64 is about 33% larger than the file because it stores every 3 bytes as 4 characters. The converter shows this in its "Size increase" box.

Original file	Approximate Base64 size
10 KB	about 13.3 KB
30 KB	about 40 KB
100 KB	about 133 KB

Large data URIs make HTML and CSS files heavy, cannot be cached separately from the page, and can push HTML emails past size limits where some email apps cut off the message. The tool's own tip is to keep embedded images under about 10 KB. For anything bigger, compress the image first or link to it as a normal file.

A quick checklist

Did you copy with the Copy button, not by selecting the preview?

Does the src or url() start with data:image/ and contain ;base64,?

Does the type after data: match the real file type?

Is the string one unbroken line with no spaces?

Are the quotes around it a matching pair?

Does the console show a Content Security Policy error?

Is the file a format the browser can display?

Encoded in your browser

The converter reads your file with the browser's FileReader and builds all four outputs locally; the image is not uploaded. For background on when embedding is worth it at all, see image to Base64: when to use data URIs. If you are decoding someone else's Base64 text and getting errors, this guide to Base64 decode errors covers padding and URL-safe variants.