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

1

Drop your image

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

2

Copy the base64 output

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

3

Use it

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

4

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.

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.