How do I convert an image to Base64?

Choose the image file in the box above. The tool reads it with your browser's FileReader and shows it as a data URI, which you can copy as it is or as HTML, CSS or Markdown. The file is never uploaded.

Why is the Base64 text about 33% bigger than the image?

Base64 uses four characters to write every three bytes, so the text is four-thirds the length, plus a little padding. The data URI prefix adds another 22 characters or so. That is why small images grow by a larger percentage.

How do I use a Base64 image in HTML or CSS?

Use the data URI as an image source, , or in a stylesheet as background-image: url("data:image/png;base64,…"). The HTML and CSS outputs are already wrapped that way. Always write alt text for an image that carries meaning.

How do I convert Base64 back to an image?

Switch to Base64 → image and paste the data URI, the img tag or the bare Base64. You will see a preview with its type, size and dimensions, and a button to download it as an image file.

Is it a good idea to inline images as Base64?

For a few kilobytes at most. A data URI cannot be cached on its own, grows the page by a third, and blocks a stylesheet that contains it. Link to larger images, where the browser can cache and load them in parallel.

Does the conversion change or compress the image?

No. Base64 is only a way of writing the same bytes as text, so decoding returns the original file exactly. To shrink an image, resize or compress it before you encode it.

Is my image uploaded anywhere?

No. The file is read from your disk into your browser's memory and encoded there, and nothing is sent to CitationEasy or anywhere else.

Image to Base64 Converter

Choose an image and get it back as a data URI, bare Base64, an HTML img tag, a CSS background or a Markdown image, with the file size, the Base64 length and the exact overhead shown. Paste a data URI, an img tag or plain Base64 and get the image back to preview and download, with its real type checked against its bytes. The conversion uses your browser's FileReader: the file is read from your disk into memory and never uploaded. Free, no sign-up.

Direction

Image → Base64Base64 → image

Choose an image file

or drop one onto this box. The file is read in your browser and never uploaded.

Choose an image to convert it.

How to Use the Image to Base64 Converter

1. Choose a direction. Image → Base64 encodes a file; Base64 → image decodes text back into a picture.
2. Give it an image. Pick a file or drop one onto the box. PNG, JPEG, GIF, WebP, SVG, AVIF, BMP and ICO files up to 10 MB work, and Use a small example image loads a 16 × 16 PNG so you can see the numbers first.
3. Pick the output. A data URI is ready for an src or a url(). The other choices wrap it in an HTML img tag (with alt text you type), a CSS declaration, or Markdown. The sizes shown are exact.
4. Copy or download. For a very long result, the box shows the first part, while Copy and Download use all of it.

What a Data URI Is

A data URI puts a file's bytes inside the address instead of linking to them: data: then the type, then ;base64, then a comma and the Base64 text. Base64 is an encoding, not compression: it writes every three bytes as four characters from a 64-letter alphabet, so any file becomes plain text that can sit in HTML, CSS, JSON or an email. The file is unchanged, and decoding gives back exactly the same bytes.

How Much Bigger It Gets

Four characters for three bytes means Base64 text is about a third longer than the file, and the data:image/png;base64, prefix adds a fixed 22 characters. For a small file, the prefix matters; for a large one the third does. The example image shows it: 140 bytes become 188 Base64 characters, and with the prefix a 210-character data URI, 50% longer than the file.

PNG file	Base64 characters	Data URI characters	Longer than the file by
140 bytes	188	210	50.0%
1 KB (1,024 bytes)	1,368	1,390	35.7%
10 KB	13,656	13,678	33.6%
100 KB	136,536	136,558	33.4%
1 MB	1,398,104	1,398,126	33.3%

When Inlining an Image Pays Off

Inlining saves one request, which helps for a handful of tiny images: icons, a loading placeholder, a one-pixel tracking-free spacer. It costs more elsewhere. The image is no longer a file the browser can cache and reuse across pages, a CSS file that holds a big data URI delays rendering until it has downloaded, and the page's size grows by a third. As a rule of thumb, inline images of a few kilobytes and link to anything larger. If your site sets a Content Security Policy, it must allow data: in img-src, which some policies deliberately do not.

Output Formats

Output	What you get	Use it for
Data URI	`data:image/png;base64,…`	An `src` or `href`, a CSS `url()`, a JSON field.
Base64 only	The bare encoded text	APIs and forms that ask for Base64 and add the prefix themselves.
HTML img tag	`<img src="data:…" alt="…" width="…" height="…">`	Pasting into HTML, with the image's size set so the page does not jump.
CSS background-image	`background-image: url("data:…");`	A rule in a stylesheet.
Markdown image	`![alt](data:…)`	Markdown renderers that allow data URIs.
SVG as URL-encoded text	`data:image/svg+xml,%3Csvg…`	SVG files: shorter than Base64 and still readable.

SVG is text, so it does not need Base64 at all. The tool offers it URL-encoded instead, with double quotes turned into single quotes and only the characters that need it escaped, which is usually shorter.

From Base64 Back to an Image

Paste a data URI, an img tag or CSS rule that contains one, or just the Base64 (line breaks are fine). The tool decodes it, previews it, and shows its size and dimensions. The type is taken from the bytes, not from the label: if the data URI says JPEG and the bytes are a PNG, the PNG is what you get, and you are told. It recognises PNG, JPEG, GIF, WebP, BMP, ICO, TIFF, AVIF, HEIC and SVG, and a PDF can be downloaded but not previewed.

What the tool does not do

It does not compress, resize or re-encode: the bytes you give are the bytes you get back. To make an image smaller, shrink it before encoding it. Files over 10 MB are refused, and an image the browser cannot draw (for example an HEIC file in a browser without support) still encodes correctly but has no preview or dimensions.

Frequently Asked Questions

How do I convert an image to Base64?: Choose the image file in the box above. The tool reads it with your browser's FileReader and shows it as a data URI, which you can copy as it is or as HTML, CSS or Markdown. The file is never uploaded.
Why is the Base64 text about 33% bigger than the image?: Base64 uses four characters to write every three bytes, so the text is four-thirds the length, plus a little padding. The data URI prefix adds another 22 characters or so. That is why small images grow by a larger percentage.
How do I use a Base64 image in HTML or CSS?: Use the data URI as an image source, <img src="data:image/png;base64,…" alt="…">, or in a stylesheet as background-image: url("data:image/png;base64,…"). The HTML and CSS outputs are already wrapped that way. Always write alt text for an image that carries meaning.
How do I convert Base64 back to an image?: Switch to Base64 → image and paste the data URI, the img tag or the bare Base64. You will see a preview with its type, size and dimensions, and a button to download it as an image file.
Is it a good idea to inline images as Base64?: For a few kilobytes at most. A data URI cannot be cached on its own, grows the page by a third, and blocks a stylesheet that contains it. Link to larger images, where the browser can cache and load them in parallel.
Does the conversion change or compress the image?: No. Base64 is only a way of writing the same bytes as text, so decoding returns the original file exactly. To shrink an image, resize or compress it before you encode it.
Is my image uploaded anywhere?: No. The file is read from your disk into your browser's memory and encoded there, and nothing is sent to CitationEasy or anywhere else.

More in Data, Markup & Code

See all Data, Markup & Code