Convert Images to Base64 Data URIs

Q: How do I use a Base64 image in HTML?

Use: <img src="data:image/png;base64,iVBOR...">. Replace the Base64 string with your encoded image data.

Embed images directly in HTML and CSS without external files — using Base64 data URIs.

By CyberScryb 📅 Updated February 12, 2026 ⏱ 4 min read

⚡ Key Takeaways (TL;DR)

Data URIs embed images directly in HTML/CSS using the format data:[mediatype];base64,[data]. Use for images under 10KB (icons, bullets) to eliminate HTTP requests. Don't use for large images — the 33% size increase and lack of caching makes them slower.

Skip the guide — just use the tool: Open the free Base64 Encoder/Decoder and get started.

Open Base64 Encoder/Decoder →

What Are Data URIs?

A data URI embeds file content directly in HTML or CSS, eliminating an HTTP request. Format: data:[mediatype];base64,[data]. Ideal for small images like icons, logos, and UI elements.

When to Use Base64 Images

Small images under 10KB (icons, bullets, simple graphics)
Email HTML templates (images often get blocked — inline ones don't)
Single-page applications reducing HTTP requests
CSS background images that need to load instantly
Offline-capable web apps

When NOT to Use Base64 Images

Large images (photos, banners) should not be Base64 encoded. The 33% size increase plus lack of caching makes them slower than regular image files. Use Base64 only for images under 10KB.

Frequently Asked Questions

Does Base64 affect page load speed?

For small images it speeds things up (fewer HTTP requests). For large images it slows things down (increased HTML size, no caching).

How do I use a Base64 image in HTML?

Use: <img src="data:image/png;base64,iVBOR...">. Replace the Base64 string with your encoded image data.

Ready to get started? Open the free tool now — no signup, no limits.

Open Base64 Encoder/Decoder →