Inline images in HTML, CSS or Markdown by way of Base64. The ChrysoKit Image to Base64 tool turns any image into the exact snippet you want to paste, five output formats so you do not have to massage the result by hand.
Why use it
Five preset output formats cover the common cases without you remembering the prefix bytes. Local-only, so even sensitive images stay private.
How to use the Image to Base64 Converter
- Drop an image onto the page (PNG, JPG, WebP, SVG and more).
- Pick an output format: Data URI, Base64 only (no prefix), HTML <img> tag, CSS background-image, or Markdown image.
- Copy the result with one click.
- Paste it into your markup.
Features worth knowing
Five output formats
Data URI, Base64 only, HTML img tag, CSS background-image, Markdown image. One picker, the right snippet every time.
Size warning
Inline encoding makes files bigger. The tool shows the resulting size so you can decide whether inlining is worth it.
Local only
The image never leaves your browser. Safe for screenshots that contain anything sensitive.
Pro tips
- Inline images that are under 5 KB. Beyond that, the savings on requests are eaten by the page-size cost.
- Base64 is roughly 33% larger than the original binary. Plan your budget accordingly.
- For SVGs, consider inlining the SVG markup directly instead of as a data URI. It is smaller and easier to style.
Privacy first. The Image to Base64 Converter runs entirely in your browser. Nothing is uploaded.
Use it for icons, favicons, small UI elements, or anywhere you want fewer HTTP requests on a page.
Open the tool: Image to Base64 →
The email signature problem, solved properly
The marketing team wants the logo in everyone's email signature. The IT reality: email clients treat images in three incompatible ways. Linked remote images get blocked by default in most clients ("show images?" is your logo failing to appear). Attached images appear as awkward paperclips on every message. Embedded Base64 images render immediately with no external request... in some clients, while others, notably several Outlook versions, refuse data URIs entirely.
This is the technique's character in miniature: embedding is the most reliable option in contexts you control and the least reliable across contexts you do not. The working compromise most organisations land on: a small optimised logo (under 10 KB... at signature size, roughly 150 px wide, that is achievable with aggressive compression), embedded for the clients that honour it, with sensible alt text for the ones that do not. Anything larger bloats every single sent message; a 100 KB logo in a signature adds gigabytes to a company's annual mail volume for nothing.
The same decision framework... do I control the rendering context?... settles most Base64 questions. Self-contained HTML report opened from disk: embed freely, that is the technique's home turf. Public webpage: link and cache. Email: embed small, expect imperfection, and test in the actual clients your recipients use rather than the one that renders everything beautifully.