Image → Base64 <img> / CSS

Drop an image to embed it directly in your HTML, CSS or Markdown — no separate image file or extra HTTP request needed. Best for small images like icons and logos.

Runs 100% in your browser — nothing is uploaded

Drop a file here or browse

APNG, AVIF, GIF, JPEG, PNG, SVG, WebP, BMP or ICO

Example

Here's a tiny image embedded in an HTML page using a Base64 data URI:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Base64 Example</title>
  </head>
  <body>
    <h1>Base64 Image Example</h1>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
  </body>
</html>

When should I inline images?

Good for: small icons, logos, email templates and single-file HTML documents where you can't reference external files.
Avoid for: large photos. Base64 adds ~33% to the size, and inlined images can't be cached separately by the browser.