Base64 Encoder/Decoder

    Convert images to Base64 strings and decode Base64 data back to images. Supports PNG, JPG, GIF, WebP formats with instant preview and download options.

    Image preview will appear here

    How to Use

    Follow these simple steps to get the best results.

    1Pick your mode: 'Base64 to Image' to see what a string represents or 'Image to Base64' to turn a file into a digital string.
    2Encoding an image? Just drag and drop any PNG, JPG or SVG. We'll instantly generate the full Base64 string for you, prefix and all.
    3Decoding a string? Paste your Base64 here. We handle both raw strings and those long Data URL formats, rendering the image instantly.
    4Copy the string. It's ready to drop into your HTML img tags or JSON payloads without any extra tweaking.
    5Download the file. If you've got a Base64 string from a database, use this to recover the original high-res image.
    6Reset to start over. It's the fastest way to switch between multiple assets or strings.

    Frequently Asked Questions

    Base64 is a way to turn binary data, like the raw bytes of an image, into a string of text characters. It works by taking 3 bytes of data and representing them with 4 printable characters. The result is a text string that's roughly 33% larger than the original file, but it's much easier to move around. Since it's just text, you can safely embed it inside HTML or CSS without worrying about special characters breaking your code.

    We support all the big ones: PNG, JPG, GIF, WebP and SVG. Whether you're dealing with a lossless logo, a high-res photo or a tiny animated GIF, this tool has you covered. For decoding, you don't even have to tell us what the format is and the tool looks at the prefix and figures it out automatically.

    Think of a Data URL as a Base64 string with a proper ID. A raw string is just the encoded data, but a Data URL includes a prefix like 'data:image/png;base64,' to tell the browser what it's looking at. This tool gives you the full Data URL because you can drop it directly into an <img> tag or a CSS 'background-image' property and it just works.

    Mostly to save time and reduce headaches. By embedding a small icon as Base64, you eliminate an extra HTTP request, which can speed up your page load. It's also a lifesaver for HTML emails where external images are often blocked by default. Plus, if you're sending an image through a JSON API, encoding it as a string is often the only way to make it fit.

    There's no such thing as a free lunch. Encoding an image adds about 33-37% to the file size. A 100KB image becomes roughly 133KB once it's turned into text. This is why we recommend only doing this for tiny assets under 5KB. For big photos, stick to standard file hosting. With modern HTTP/2 connections, the benefit of 'saving a request' isn't worth the extra bulk for large images.

    Once you have the code, you can use it anywhere. In HTML, just paste it into the 'src' attribute of your <img> tag. In CSS, use it inside url() for a background image. In JavaScript, you can set 'img.src' to the string dynamically. It's incredibly flexible since the data literally travels with your code.

    The sweet spot is anything under 10MB. There's no hard limit because the work happens locally in your browser, but your RAM might disagree if you go too big. Small icons are instant. Anything over 5MB might take a second or two to process. If you're trying to encode a 50MB raw photo, expect your browser to lag. For stuff that big, you're probably better off using a dedicated optimization tool first.

    100% private. All the math happens right on your device. We don't upload your images to a server, we don't store them in a database and we definitely don't log them. Once you close the tab, the data is gone forever. It's the safest way to handle sensitive assets without worrying about where your data is actually going.

    How It Works

    Small Images, Big Strings: Master Base64 Encoding

    Sometimes you don't want to deal with image files. Sometimes you just need an image to be part of your code. That's where Base64 comes in. Our Base64 Image Encoder/Decoder is a free, browser-based tool that turns images (PNG, JPG, WebP, SVG) into text strings you can drop directly into HTML, CSS or JSON. It also works in reverse, turning those long strings of text back into viewable files.

    What is Base64 Image Encoding?

    Base64 is a way to turn binary data (the "guts" of an image) into a string of plain text characters. When you add a small prefix like data:image/png;base64,, it becomes a Data URL. You can use this URL anywhere you would normally use a file path.

    The big win? The image is now "baked into" the file. No extra network requests and no "broken image" icons because a file went missing.

    The "33% Tax": Understanding the Trade-off

    Base64 is convenient, but it isn't free. Because of how the math works, encoding an image increases its file size by roughly 33%. You are trading a bit of weight for a lot of convenience.

    Original File SizeEncoded SizeOur Recommendation
    Under 2KB~2.7KBPerfect for Base64 embedding.
    2KB to 10KBUp to 13.5KBGood choice for UI icons.
    10KB to 50KBUp to 67.5KBThink twice: standard files might be faster.
    Over 50KBOver 67.5KBUse a separate file and let the browser cache it.

    For tiny assets like a favicon or a "social media" icon, skipping that extra HTTP request is worth the extra bytes. For a high-res photo? Stick to a standard file.

    When You Should Use Base64

    Emails That Just Work: Most email clients (like Gmail or Outlook) block external images for privacy. This means your logo shows up as a "broken" box until the user clicks a button. If you embed your logo as a Base64 string, it shows up instantly every time.

    Cleaning Up Your CSS: Instead of managing fifty tiny icon files, you can embed them directly into your CSS as background images. This keeps your project folder clean and reduces the number of server calls your site has to make.

    JSON and APIs: JSON is a text format. It cannot "see" a binary image file. If you need to send a profile picture or a document scan through an API, you have to turn it into a Base64 string first.

    Offline Apps: If you are building a Progressive Web App (PWA) that needs to work in a tunnel or on a plane, embedding your core icons as Base64 ensures they load even without a signal.

    When You Need the Decoder

    If you are a developer looking at a weird 5,000-character string in a database or a server log, you probably want to know what it is. Just paste it here. We will "unmask" the string and let you see the image immediately. You can even download it as a standard file if you need to.

    How to Use the Code

    In HTML: Replace your image src with the Data URL:

    <img src="data:image/png;base64,iVBORw0KGgo..." alt="Logo" />

    In CSS: Use it as a background image:

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

    In JSON: Perfect for profile pictures or file uploads:

    {
  "username": "coder_99",
  "avatar": "data:image/jpeg;base64,/9j/4AAQSkZJRg..."
}

    Your Data Stays Yours

    Privacy is priority number one. All the encoding and decoding happens locally in your browser. We never upload your images to a server, we never store your strings and we certainly don't log what you are converting. It is safe for everything from personal photos to confidential business documents.

    Related Developer Tools

    JSON Formatter

    Beautify, validate and minify JSON data with syntax highlighting.

    SVG to React JSX

    Convert SVG markup into optimized React JSX components instantly.

    URL Encoder/Decoder

    Encode text to URL-safe format and decode URL-encoded strings.