Skip to main content

Base64 image tool

Base64 image display​

How to Use Base64 Encoding to Display Images, tools are below:

Paste your Base64 encoded image data in the text area below and click "Display Image" to view the image.

Image to Base64​

📁

Click or drag image here

Supports JPG, PNG, GIF, WebP, etc.

Base64 Encoding​

What is Base64 Encoding?​

Base64 is a method for encoding binary data into a plain text format using a set of 64 different ASCII characters.

The Core Concept: Computers store data (like images, executables, or ZIP files) in a binary format (sequences of 0s and 1s). However, many systems and protocols (such as email, HTML, and CSS) were designed to reliably handle text, not raw binary. Base64 encoding solves this problem by converting the binary data into a string of safe, printable characters. This ensures the data remains intact without modification during transport through text-based systems.

How it Works:

  1. Input Binary Data: The process starts with a stream of binary data.
  2. Grouping: The binary data is divided into groups of 3 bytes (24 bits).
  3. Re-division: Each 24-bit group is then split into four chunks of 6 bits each.
  4. Mapping: Since 6 bits can represent 64 different values (0-63), each chunk is mapped to a corresponding character in the Base64 index table:
    • Values 0-25 map to A-Z
    • Values 26-51 map to a-z
    • Values 52-61 map to 0-9
    • Value 62 is +
    • Value 63 is /
  5. Padding: If the input isn't divisible by 3, pad characters (=) are added to the output to make it a multiple of 4 Base64 characters.

Why is it Needed?

  • Compatibility: To embed binary data (like images) directly into text-based documents like HTML, CSS, or XML, or to send it via text-only protocols like SMTP (email).
  • Reduce HTTP Requests: This is a key use in web development. Embedding small images directly into HTML or CSS files eliminates the need for the browser to make separate HTTP requests for each image, which can improve page load times.

How to Use Base64 Encoding to Display Images on a Web Page​

In web pages, we use a Data URL (or Data URI) to embed Base64-encoded image data directly.

The Data URL Syntax:

data:[<mediatype>][;base64],<data>
  • data:: The protocol header.
  • <mediatype>: The MIME type of the data (e.g., image/png, image/jpeg, image/svg+xml).
  • ;base64: The separator that indicates the data is Base64-encoded.
  • <data>: The actual Base64-encoded string.

Method 1: In an HTML <img> Tag​

You can use the Data URL directly in the src attribute of an <img> tag.

<!DOCTYPE html>
<html>
<head>
    <title>Base64 Image Example</title>
</head>
<body>
    <h2>An Embedded Base64 Image</h2>
    <!-- Example of a tiny 1x1 red PNG image -->
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==" alt="Red Pixel">
</body>
</html>

Method 2: In CSS​

You can use the Data URL as a value for properties that require an image, like background-image.

<!DOCTYPE html>
<html>
<head>
    <title>Base64 CSS Background</title>
    <style>
        .icon {
            width: 20px;
            height: 20px;
            background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZD0iTTEwIDBjLTIuMjEgMC00IDEuNzktNCA0czEuNzkgNCA0IDQgNC0xLjc5IDQtNC0xLjc5LTQtNC00eiIvPjwvc3ZnPg==');
            /* The above is a Base64-encoded SVG dot */
        }
    </style>
</head>
<body>
    <div class="icon"></div>
</body>
</html>

Pros, Cons, and Best Practices​

Advantages:

  1. Reduced HTTP Requests: The primary advantage for web performance. It's excellent for eliminating multiple round trips to the server.
  2. Offline Availability: The image data is self-contained within the document, so it will display even without an internet connection.

Disadvantages:

  1. Increased Size: Base64-encoded data is approximately 33% larger than the original binary file.
  2. No Caching: The browser caches the entire HTML or CSS file, but cannot cache the individual image separately. If the same Base64 image is used on multiple pages, it must be downloaded each time.
  3. Processing Overhead: The browser must decode the string, which consumes a small amount of CPU resources.
  4. Poor Readability and Maintainability: Long, cryptic strings make your source code harder to read and edit.

Best Practices:

  • Use for Small Images: Ideal for images under 10KB (e.g., small icons, UI elements, CSS sprites).
  • For Infrequently Changed Images: Best for assets that are static and won't need updating often.
  • CSS Sprites: Combine many small icons into a single sprite sheet and then encode it to Base64 for a highly efficient single HTTP request.
  • Avoid for Large Images: Never use Base64 for large photos or complex graphics. The significant size increase and lack of caching make it a poor choice.

How to Convert an Image to Base64​

There are several ways to get the Base64 string of an image:

  1. Online Converters: above.
  2. JavaScript (in the browser): 
    // Assuming an <input type="file" id="fileInput"> element
    const fileInput = document.getElementById('fileInput');
    fileInput.addEventListener('change', function(event) {
        const file = event.target.files[0];
        const reader = new FileReader();
        
        reader.onload = function(e) {
            const base64String = e.target.result; // This is the full Data URL
            console.log(base64String);
        };
        
        reader.readAsDataURL(file); // Start reading the file
    });
  3. Command Line (e.g., on Linux/macOS): 
    base64 -i input.png -o output.txt
    Then, you would prepend data:image/png;base64, to the content of the output.txt file.