Inlining a tiny icon
A 500-byte icon costs more as a request than as characters. Inlining removes a round trip on the critical path.
Image to Base64
Convert an image into a data URI you can paste into CSS or HTML.
Drop an image here, or choose a file
PNG, JPEG, WebP, GIF or SVG. The file stays on your device.
Options
Images are decoded in memory and re-encoded with the browser's canvas. Nothing is uploaded.
What is Image to Base64?
Image to Base64 reads a local image file and returns a data URI — the file's bytes encoded as Base64 with a MIME prefix. Embedding an image this way removes an HTTP request, which is useful for tiny icons, email templates and single-file prototypes.
How to use it
- 1Select or drop an image file.
- 2Choose whether you want the raw data URI, a CSS rule or an img tag.
- 3Check the encoded size — it will be about a third larger than the file.
- 4Copy the output into your stylesheet, template or email.
Features
- Data URI, CSS and HTML output formats
- Works with PNG, JPEG, WebP, GIF and SVG
- Shows original and encoded byte sizes so you can judge whether inlining is worth it
When people use it
Self-contained HTML email
Many mail clients block remote images. Inlining small logos means they render without the recipient allowing downloads.
Known limits
- Base64 adds roughly 33 percent to the payload and cannot be cached separately from the file that contains it. Keep inlining to assets under a few kilobytes.
Image to Base64 questions
Related tools
Image Compressor
Shrink JPEG, PNG and WebP files in your browser with a quality slider.
Color Converter
Convert colours between HEX, RGB and HSL notation.
Word Counter
Live word, character, sentence and reading-time counts.
Case Converter
Switch text between sentence, title, upper, lower, camel and snake case.
More for image tools
Hand-picked hubs, guides and companion tools related to this page.
Image toolsCategory3 browser-based image tools that never upload your files.Image CompressorToolShrink JPEG, PNG and WebP files in your browser with a quality slider.Color ConverterToolConvert colours between HEX, RGB and HSL notation.How to compress images without visibly losing qualityGuideA practical method for cutting image weight by 80–95% using format choice, sensible dimensions and a quality setting you can defend.What is Base64 encoding, and when should you actually use it?GuideBase64 turns binary into safe ASCII text. Here is how it works, why it is not encryption, and the three cases where it is the right tool.WebP vs JPEG vs PNG: which format to use and whenGuideA direct comparison of the three formats you will actually choose between, with the cases where each one wins.Using the toolsFAQInput limits, supported formats, browser requirements and what to do when a tool behaves unexpectedly.
Last reviewed 2026-07-29. Browse the full directory.