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 →