Image to Base64 Converter

Choose an image and get its Base64 data URI, a CSS background-image line and an HTML img tag, encoded in your browser without uploading the file.

Runs in your browserFree, no sign-upLast reviewed October 8, 2026

Fill in the settings to see your result here.

Your result appears here instantly — nothing is uploaded.

Quick answers

How do I convert an image to a Base64 string?: Choose the file in the Image field. The Data URI panel shows the result straight away. If you need only the raw Base64 without the data: prefix, copy everything after the first comma.
How much bigger is a Base64 image than the original file?: About 33%. Base64 turns every 3 bytes into 4 characters, so the length is 4 times the file's byte count divided by 3, rounded up to a multiple of 4. A 100 KB image becomes 136,536 characters, roughly 133 KB.
What does a Base64 image data URI look like?: data:image/png;base64,iVBORw0KGgo... The part before the comma names the MIME type and the encoding, and the part after it is the image's bytes in Base64. Browsers accept the whole string wherever an image URL is allowed.
How do I use a Base64 image in an HTML img tag?: Put the full data URI in the src attribute: <img src="data:image/png;base64,..." alt="Logo">. The tool's HTML <img> tag panel builds this for you with an empty alt attribute, which you should fill in unless the image is decorative.
How do I use a Base64 image as a CSS background?: Wrap the data URI in url(): background-image: url("data:image/png;base64,..."); The CSS background-image panel outputs that exact declaration, ready to paste inside a rule.
Is my image uploaded to a server?: No. The file is read with the browser's FileReader API and encoded on your device. Nothing is sent over the network, so the tool is safe for unreleased artwork and client assets.

About Image to Base64 Converter

Pick an image file and the tool reads its bytes locally and returns a complete data URI: the text data:, the file's MIME type, ;base64, and then the encoded bytes. You get three copyable versions, the bare data URI, a CSS background-image declaration and an HTML img tag, plus the original size, the Base64 length in characters and the encoded size. The file limit is 10 MB. Base64 writes every 3 bytes as 4 characters, so the output is always about 33% larger than the file; a 10 KB icon becomes 13,656 characters. That overhead is why embedding suits small icons and logos more than photographs.

Base64 image size chart: file size to encoded length

Base64 length is exact for the byte count shown. Encoded size is what the tool reports for a PNG: the Base64 characters plus the 22-character data:image/png;base64, prefix.

Original file	Bytes	Base64 length (characters)	Encoded size
1 KB	1,024	1,368	1.4 KB
2 KB	2,048	2,732	2.7 KB
5 KB	5,120	6,828	6.7 KB
10 KB	10,240	13,656	13.4 KB
50 KB	51,200	68,268	66.7 KB
100 KB	102,400	136,536	133.4 KB
500 KB	512,000	682,668	666.7 KB
1 MB	1,048,576	1,398,104	1.33 MB
5 MB	5,242,880	6,990,508	6.67 MB
10 MB (limit)	10,485,760	13,981,016	13.33 MB

Sizes use 1 KB = 1,024 bytes, as the tool does. Gzip or brotli on the containing CSS or HTML file recovers part of the overhead, but the text still has to be parsed.

Formula for Base64 length

Base64 characters = 4 x ceil(bytes / 3)

Base64 takes the file three bytes (24 bits) at a time and writes each group as four characters of 6 bits each, drawn from A to Z, a to z, 0 to 9, + and /. If the last group has only one or two bytes, the output is padded with == or = so the total is always a multiple of four. A 42-byte file therefore gives 4 x 14 = 56 characters, and a 1,024-byte file gives 4 x 342 = 1,368. The data URI adds its prefix on top: 22 characters for PNG, 23 for JPEG and 26 for SVG.

Data URI prefix and first characters for each image format

The MIME type comes from what your browser reports for the file. The opening Base64 characters are fixed by each format's file signature, which makes them a handy way to recognise an encoded image.

Format	Data URI prefix	Base64 starts with
PNG	data:image/png;base64,	iVBORw0KGgo
JPEG / JPG	data:image/jpeg;base64,	/9j/
GIF	data:image/gif;base64,	R0lGODlh (GIF89a) or R0lGODdh (GIF87a)
WebP	data:image/webp;base64,	UklGR
SVG	data:image/svg+xml;base64,	PHN2Z when the file starts with <svg, PD94bWwg when it starts with <?xml and a space
BMP	data:image/bmp;base64,	Qk
AVIF	data:image/avif;base64,	AAAA (the first bytes are a box length, not a fixed signature)

The browser decides the MIME type mainly from the file extension. A JPEG saved with a .png extension will be labelled image/png, so rename the file correctly before encoding.

Worked example: a 1x1 transparent GIF as Base64

The classic one-pixel transparent GIF is 42 bytes, small enough to show whole.

The data URI

A 42-byte GIF file, 1 pixel by 1 pixel, transparent

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

Details show Original size 42 B, Base64 length 56 characters and Encoded size 78 B (56 characters plus the 22-character prefix).

The same image as a CSS background

CSS background-image panel

background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");

The same image as an img element

HTML <img> tag panel

Inside JSON

The Data URI pasted as a string value

{"avatar":"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"}

Base64 uses no quotes or backslashes, so the string needs no escaping in JSON.

When to embed an image as Base64, and when to link the file

Embed small, frequently used assets such as icons, bullets and tiny logos, where saving a network request matters more than a few hundred extra bytes.
Embed when the destination accepts text only: a JSON payload, a single-file HTML report, an email signature or a field in a CMS.
Link the file for photographs and anything large. The 33% overhead grows with the file, and the encoded text delays the parsing of the CSS or HTML that carries it.
Link the file when the same image appears on many pages. A separate file is cached once and reused, while an embedded copy is downloaded again inside every document that contains it.
For SVG in CSS, a URL-encoded data URI (data:image/svg+xml, followed by the escaped markup) is usually shorter than Base64 and stays readable. This tool outputs the Base64 form only.
Check the target system's limits. Some email clients block or strip data URI images, so test before relying on them in a newsletter.

Step by step

1
Click the Image field and choose a file, such as a PNG, JPG, GIF, SVG or WebP, up to 10 MB.
2
Read the Details panel: Original size, Base64 length and Encoded size.
3
Copy the Data URI to use the string anywhere, or download it as a .txt file named after your image.
4
Copy CSS background-image to paste a finished declaration into a stylesheet.
5
Copy HTML <img> tag to paste a finished element into a page, then fill in the empty alt attribute.

Answers to common questions

What is the maximum image size I can convert?

10 MB. A larger file is rejected with a message stating its size. At the limit, the output is 13,981,016 characters, which is already far more than is practical to paste into a stylesheet or page.

Does converting to Base64 reduce image quality?

No. Base64 is a lossless text representation of the exact bytes in the file. Decoding the string gives back an identical file, with the same pixels, compression and metadata. The image is not resized or recompressed.

Can I get the Base64 without the data:image prefix?

The tool outputs the full data URI. For the raw string, which some APIs expect, copy the text after the comma that follows base64. The Base64 length figure in the Details panel already counts only that part.

Does it work with SVG, WebP, AVIF and ICO files?

Yes. Encoding works on raw bytes, so the format does not matter, and the file picker accepts any type your browser classes as an image. Whether the result displays depends on where you use it: the browser or app reading the data URI must support that format.

Can a Base64 image be cached by the browser?

Not on its own. It is cached only as part of the CSS, HTML or JavaScript file that contains it. When that file changes, the image is downloaded again with it, which is one reason to keep large or shared images as separate files.

Can this tool convert Base64 back to an image?

No, it works in one direction. To check a data URI, paste it into your browser's address bar and the image will display, or set it as the src of an img element.

Why does my Base64 string end with = or ==?

That is padding. Base64 works in groups of 3 bytes, and when the file length is not a multiple of 3 the final group is filled out with one or two = characters so that the total length is a multiple of 4.

Is there a length limit for data URIs in browsers?

Current browsers handle data URIs of many megabytes in img, CSS and fetch, so the practical limits are page weight and parse time, not a hard cap. Other software, such as some email clients, old proxies and form fields, can enforce much lower limits.