Image to Base64 Converter: Encode and Decode Images Online

Sometimes an image file just won’t do. You’re building an HTML email and the client’s inbox blocks external pictures. You’re sending a logo through an API that only accepts JSON. You need a tiny icon in a stylesheet and don’t want another file to manage. That’s when you convert an image to Base64. The tool above turns any picture into a string of text you can paste straight into your code, and it works the other way round too.

How to convert an image to Base64

It takes a few seconds, and nothing needs installing.

Add your image

Drag it onto the panel above, click to browse, or simply copy an image and press Ctrl+V on the page. PNG, JPG, WebP, GIF, SVG, ICO and AVIF all work. Add a whole folder of icons if you like, and each one gets its own result.

Pick the snippet

Choose what you want to paste. A data URI for an image tag or a CSS url, the bare Base64 string for an API, a ready made HTML img tag, a CSS background rule, or a JSON object with the name, size and type already filled in.

Copy it

Hit Copy and paste it wherever it needs to go. If you’ve converted a batch, Copy all grabs every result at once, neatly labelled.

What the code looks like

Here’s each snippet type, shortened so you can see the shape of it. The long string in the middle is the encoded image.

Data URI

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAw...

This is the format most people need. It works anywhere a browser expects an image address.

HTML image tag

<img src="data:image/png;base64,iVBORw0KGgo..." alt="company logo" width="48" height="48">

The width and height are filled in for you, which stops the page jumping about while it loads.

CSS background

.logo {
  background-image: url("data:image/png;base64,iVBORw0KGgo...");
}

JSON

{
  "name": "logo.png",
  "type": "image/png",
  "width": 48,
  "height": 48,
  "base64": "iVBORw0KGgoAAAANSUhEUgAAADAAAAAw..."
}

Handy for API requests, test fixtures and config files, since the type and size travel with the image.

Where Base64 images genuinely help

HTML emails

Many email clients hide linked images until the reader clicks a button. Small images embedded as Base64 can show up straight away, which is why email designers use them for logos, social icons and dividers. Gmail is the big exception, as it strips data URIs from emails, so always send yourself a test before a campaign goes out.

Small icons in CSS

A handful of tiny icons inside a stylesheet means fewer files to request and nothing to break if a path changes. Keep it to genuinely small images, though. A good rule is anything under about 5 KB.

APIs and databases

Plenty of APIs, including image recognition and AI services, expect pictures as Base64 inside a JSON body. It’s also common in older systems that store small images directly in a database field.

Single file pages and prototypes

Building a demo, an offline page or a quick prototype you want to send as one HTML file? Base64 images keep everything in that single file, so nothing goes missing when someone opens it.

How big will the string be?

Base64 always comes out about a third larger than the image itself. Here’s what that means in practice.

Image file size	Base64 length	Good idea to inline?
1 KB icon	About 1,400 characters	Yes
5 KB logo	About 6,800 characters	Usually
50 KB graphic	About 68,000 characters	Rarely
500 KB photo	About 683,000 characters	No, use a normal file

Once you’re past a few kilobytes, a regular image file nearly always loads faster, because the browser can cache it and download it alongside everything else. The tool flags anything over 100 KB so you don’t paste a monster string into your HTML by accident.

Make the string shorter before you encode

This is where most converters stop and this one keeps going. Switch Encode as from Original to WebP, JPG or PNG, then choose a smaller size, and the image is shrunk before it’s turned into text.

The difference can be huge. A 2000 pixel PNG logo might produce a string of several hundred thousand characters. Resized to 256 pixels and saved as WebP, the same logo can come out at a few thousand. The card shows you the length and the change as a percentage, so you can see the saving straight away.

One exception is worth knowing. Simple SVG files are already tiny, and turning them into WebP or PNG usually makes them bigger. The tool spots this and tells you to stay on Original.

SVG to Base64

SVG works well as Base64, and because SVG is text, it’s often a few hundred bytes to start with. Keep Encode as on Original so the vector stays a vector and stays sharp at every size.

Convert Base64 back to an image

Got a long string from an API response, a database or someone else’s code, and need to see what’s in it? Open the Base64 to Image tab and paste it in.

You don’t need to tidy it up first. The decoder accepts a full data URI, a bare string, text with line breaks in it, the URL safe variant that swaps plus and slash for dash and underscore, or even a whole CSS rule or img tag copied straight from your code. It reads the first few bytes of the file to work out what the image really is, so a PNG mislabelled as a JPEG still comes out as a proper PNG. Then you can save it as a normal image file.

Why a Base64 image won’t display

If you’ve pasted a Base64 image and the browser shows a broken icon, it’s almost always one of these.

The header is missing

A bare Base64 string isn’t an image address on its own. Inside an src attribute or a CSS url, it needs the data:image/png;base64, part in front. Choose Data URI as the snippet and it’s added for you.

The string got cut off

Some editors, chat apps and form fields quietly trim very long text. Paste the string into the Base64 to Image tab here. If it decodes fine, the problem is wherever you pasted it, not the string itself.

The type in the header is wrong

Most browsers are forgiving, but some strict systems reject an image if the header says JPEG and the data is really PNG. Decode it here to see the true format, then encode it again.

Gmail is stripping it

As mentioned above, Gmail removes data URI images from emails. For Gmail readers, host the image and link to it instead.

Your images stay on your computer

Unreleased logos, client artwork, screenshots full of private details. None of it should end up on a random server just because you needed a string of text. Everything here, both encoding and decoding, runs inside your browser tab. Nothing is sent anywhere, there’s nothing to delete afterwards, and the tool keeps working even if your connection drops once the page has loaded.

Tools that pair well with this one

• Image Compressor squeezes a picture down before you encode it, for an even shorter string.
• Image Resizer sets an exact pixel size for icons, avatars and logos.
• PNG to SVG turns a flat logo into a vector, which is often far smaller as Base64.
• Image Converter switches a picture between PNG, JPG and WebP.