How to Embed Base64 Images in HTML

Embedding a Base64 image in HTML means using a data URI as the src of an <img> tag instead of a file path or external URL. This is useful for small icons, HTML email templates, and self-contained HTML snippets.

Basic img tag with data URI

Replace YOUR_BASE64_STRING with the encoded output from our Image to Base64 tool.

<img
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg=="
  alt="Red pixel placeholder"
  width="1"
  height="1"
/>

Generate the HTML automatically

After uploading an image to our encoder, switch to the HTML output tab. The tool generates a ready-to-paste <img> tag with the correct MIME type and Base64 string.

Best practices

Use Base64 inline images only for small assets (icons under ~10 KB). Large Base64 strings increase HTML size and slow page load.

Always include a meaningful alt attribute for accessibility.

For production websites, prefer regular image files or CDN URLs. Reserve inline Base64 for email templates, PDF exports, and tiny UI icons.

HTML email clients widely support data URI images — a common use case for this technique.