Image to Base64
Drop an image to get its Base64 data URI, with copy-ready HTML and CSS snippets.
Drop an image here, or click to choose a file
Any file type works — images are the usual case
Processed on your device — nothing is sent anywhere.
How it works
- Drop an image onto the box or click it to pick a file — small files of any type work too.
- The Base64 data URI appears immediately, along with its encoded size and ready-made HTML and CSS snippets.
- Click Copy next to the version you need and paste it straight into your code.
Frequently asked questions
- What is a Base64 data URI and when should I use one?
- A data URI embeds a file directly inside HTML or CSS as text, so the browser needs no extra network request to load it. It is a good fit for tiny assets like icons, placeholders or single-use images in emails. For anything larger, a normal file reference is usually the better choice.
- Why is the Base64 output larger than my original file?
- Base64 represents every 3 bytes of binary data as 4 ASCII characters, so the encoded text is roughly 33% larger than the source file. That overhead is the price of making binary data safe to paste into text formats. Compressing the image before converting keeps the final snippet small.
- Is there a size limit, and is my image uploaded anywhere?
- The file is read entirely on your device with the browser’s FileReader — nothing is uploaded. There is no hard limit, but files over a few megabytes produce unwieldy strings that slow down editors and pages. As a rule of thumb, keep inlined assets under about 100 KB.
- How do I use a Base64 image in HTML or CSS?
- In HTML, put the data URI in an img tag’s src attribute; in CSS, use it as the url() value of a background-image property. This tool generates both snippets for you, ready to paste. The image renders exactly like a normal file reference — browsers treat the data URI as the image itself.
- Does converting to Base64 change or compress the image?
- No. Base64 is an encoding, not a compression or conversion — the original bytes are preserved exactly and the decoded image is pixel-identical to your file. If you need a smaller result, compress or resize the image first, then convert it; the Base64 string shrinks in proportion to the file.
About this tool
This converter turns any image into a Base64 data URI — a text representation of the file that can be embedded directly in code. Drop in a PNG, JPG, SVG, WebP, or GIF and you immediately get the full data URI, its encoded size, and two copy-ready snippets: an HTML img tag and a CSS background-image rule. Small files of any other type can be converted too, since Base64 does not care what the bytes represent.
The encoding happens on your device using the browser’s FileReader API, which reads the file and produces the Base64 string in one step. Nothing is uploaded to any server — relevant when the image is an unreleased design, an internal document scan, or anything else private. Base64 maps every three bytes of the file to four text characters, which is why the displayed encoded size is about a third larger than the original file.
Data URIs are most useful where extra network requests are expensive or impossible: small icons and logos inlined into a stylesheet, images embedded in HTML emails where linked files are often blocked or clipped, self-contained HTML files that must work without a server, placeholders baked into a page for instant rendering, and quick prototypes where setting up asset hosting is not worth the trouble. They also appear in configuration files and JSON payloads that can only carry text.
Use them judiciously in production. An inlined image cannot be cached separately from the page, so a data URI repeated across pages is downloaded again every time, while a normal file is fetched once. The sweet spot is small, single-use assets — a good rule of thumb is to inline files under roughly 100 KB and reference anything larger conventionally. If the string is too long, compress or resize the source image first; the Base64 output shrinks proportionally.