Base64 Image Code

What Does Base64 Image Code Look Like?

Base64 image code is a text string that represents an image's binary bytes using 64 printable ASCII characters. Wrapped in a data: URI, it can replace a normal image src or url() reference — the browser decodes it inline instead of making a separate HTTP request. Below are ready-to-copy examples for the most common formats and embedding contexts.

Base64 Image Code for HTML

Paste a data URI directly into an <img> tag's src attribute. This example is a real, valid 1×1 pixel transparent PNG — copy it and it will render.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=" alt="Base64 PNG example">

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAABAAEDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAn/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABmX/9k=" alt="Base64 JPEG example">

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBTAA7" alt="Base64 GIF example">

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCI+PGNpcmNsZSBjeD0iNSIgY3k9IjUiIHI9IjUiIGZpbGw9IiUyMzY2N2VlYSIvPjwvc3ZnPg==" alt="Base64 SVG example">

Need to generate this code for your own image instead of the sample above? Use the Base64 embed code generator — upload an image and it produces the exact <img> tag for you.

Base64 Image Code for CSS

The same data URI works inside background-image: url(...). This is common for small icons, patterns, and sprites where an extra HTTP request isn't worth it.

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

Full guidance and more patterns (fonts, multiple backgrounds, browser support) are on the Base64 in CSS page.

Base64 Image Code for JSON / APIs

REST APIs commonly return image data as a Base64 string inside a JSON field, either as the raw string or as a full data URI. Both forms below are valid — check your API's documentation for which one it expects.

{
  "filename": "icon.png",
  "mimeType": "image/png",
  "data": "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII="
}

{
  "avatar": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII="
}

To decode a Base64 image string back into a viewable picture, use the Base64 image decoder. To turn your own image into a JSON-ready string, use the Base64 image encoder.

Data URI MIME Type Reference

See the full Base64 MIME type list for every format the browser understands.

When Should You Avoid Base64 Image Code?

Base64 encoding inflates file size by roughly 33%, and inline images can't be cached separately from the page or CSS file that contains them. Use it for small, frequently-reused icons and inline SVGs — not for photos or large hero images, which should stay as normal linked files. See Base64 vs binary for the full size/performance tradeoff.

Frequently Asked Questions