Image to Base64 Encoder / Decoder

For developers. Turn an image into a base64 string you can paste directly into HTML or CSS — or decode one back to a file.

No uploadEncode & DecodeCopy instantly

Drop your image here

JPG, PNG, WebP, SVG — we'll convert it to a base64 data URL.

How to encode an image to base64

Drop your image

Drag in any JPG, PNG or WebP. Or switch to the decode tab and paste a base64 string instead.

Copy the base64 output

The full data URI is shown immediately — ready to paste into your code.

Use it

Paste the data URI into an img src attribute, a CSS background-image, or wherever you need it in your code.

Or decode

Paste a base64 string into the decode tab and get the image back as a downloadable file.

Base64 images: when they help and when they hurt

Base64 encoding is a tradeoff. You eliminate an HTTP request — the browser does not need to fetch a separate file — but the encoded string is about 33% larger than the original binary. For small images like a 2KB icon or a 5KB logo, that is a good deal. You save a round-trip to the server and the added size is negligible.

For large images it flips. A 200KB photo becomes a 266KB base64 string, and that string sits inside your HTML or CSS file. The browser has to parse the entire HTML document before it can start rendering anything, so embedding large images this way delays first paint.

The rule of thumb: base64 for small, frequently-used assets (icons, logos, small decorative elements). URL references for anything bigger, especially above-the-fold hero images where load speed matters most.

Using the output

The encoder gives you a complete data URI, which starts with data:, then the image type, then the base64 text. Where it goes depends on the job.

In HTML, put the whole data URI in the src attribute of an img tag, exactly where a file path would normally go.
In CSS, wrap it in url() as the value of a background image.
In JSON or an API payload, store it as an ordinary string. The receiving side can decode it back into a file.
In an email template, avoid it. Several major mail clients block data URI images, so link to a hosted file instead.

Why the text is bigger than the image

Base64 turns every 3 bytes of the file into 4 characters, so the encoded text is about 33 percent larger than the image itself, plus the short prefix. That sounds costly, and for storage it is. Over the web it matters much less, because servers compress text before sending it, and base64 text compresses well.

We measured exactly how much of that 33 percent survives compression, and why caching is the real cost of inlining images, in our guide to base64 images.

When decoding fails

If a pasted string will not turn back into an image, one of these is almost always the reason.

Symptom	Likely cause
Nothing decodes at all	The string was cut short when it was copied. Long strings are easy to truncate in chat apps and spreadsheets.
It fails near the end	The = or == padding at the end was removed. It is part of the data, not decoration.
It decodes as the wrong type	The prefix names a different format from the data. Paste the raw base64 without the prefix and the type is detected from the data itself.
It works here but not on your site	A Content Security Policy is blocking data URIs. It needs img-src data: to allow them.

Spaces and line breaks are removed automatically before decoding, since strings copied out of code editors and emails often pick them up along the way.

Also useful

Convert Image →Compress Image →EXIF Data →

FAQ

What is base64?+

It is a way to represent binary data, like images, as plain text. Instead of a file, you get a long string of characters that encodes the same data. The string uses only letters, numbers and a few symbols, making it safe to embed in HTML, CSS, JSON and other text formats.

When should I use base64 images?+

For small images like icons, logos and UI elements that you want to embed directly in HTML or CSS to avoid an extra HTTP request. Not a good idea for large images — the base64 string is about 33% larger than the original file, and large strings slow down HTML parsing.

What is a data URI?+

It looks like data:image/png;base64,iVBOR... and includes the MIME type alongside the base64 data. You can paste this directly into an img src attribute or a CSS background-image value and it works just like a URL.

Is there a size limit?+

Technically no — the tool can encode any size image. But large images produce very long strings that can slow down your HTML file and make it harder to work with in your editor. Keep base64 usage to images under 10KB for best results.

Why is the base64 text longer than my image file?+

Base64 turns every 3 bytes into 4 characters, so the text is about 33 percent larger than the image. Web servers compress text before sending it, which recovers most of that difference in transfer.

What file type does a decoded image download as?+

The type is detected from the data itself, so a JPEG downloads as .jpg, a PNG as .png, and so on, rather than every file being named .png.

Does the decoder handle line breaks in the string?+

Yes. Spaces and line breaks are stripped before decoding, since copied strings often pick them up.

Is my image uploaded to encode it?+

No. Encoding and decoding both happen in your browser. The image and the text never leave your device.