How to display Base64 images in HTML ?

To display Base64-encoded images in HTML, you can use the <img> tag with a Data URI (Uniform Resource Identifier) that includes the Base64 string. Below is a detailed guide with examples and explanations:

1. Basic Syntax for Base64 Images

The src attribute of the <img> tag uses the following format:

<img src="data:image/[format];base64,[Base64String]" alt="Description">

[format]: The image format (e.g., png, jpeg, gif, svg+xml).
[Base64String]: The Base64-encoded image data.

2. Examples for Different Image Formats

PNG Image

<img 
  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...etc" 
  alt="Sample PNG"
>

JPEG Image

<img 
  src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA...etc" 
  alt="Sample JPEG"
>

SVG Image

<img 
  src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDov...etc" 
  alt="Sample SVG"
>

GIF Image

<img 
  src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAAC...etc" 
  alt="Sample GIF"
>

3. How to Convert an Image to Base64

Using JavaScript (Client-Side)

// Convert an image file to Base64
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.onload = (event) => {
    const base64 = event.target.result;
    document.getElementById('preview').src = base64;
  };

  reader.readAsDataURL(file);
});

HTML:

<input type="file" id="fileInput">
<img id="preview" alt="Preview">

Using Node.js (Server-Side)

const fs = require('fs');
const imageBuffer = fs.readFileSync('image.jpg');
const base64 = imageBuffer.toString('base64');
console.log(`data:image/jpeg;base64,${base64}`);

4. Full Example Workflow

Step 1: Encode an Image to Base64

Use an online tool or code to convert an image file (e.g., logo.png) to Base64.

Step 2: Embed in HTML

<!DOCTYPE html>
<html>
<head>
  <title>Base64 Image Demo</title>
</head>
<body>
  <h1>Company Logo</h1>
  <img 
    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...etc" 
    alt="Company Logo"
    width="200"
  >
</body>
</html>

5. Pros and Cons of Base64 Images

Pros	Cons
Reduce HTTP requests for small images	Larger HTML/CSS file size
Embed images directly in code	No browser caching (re-downloaded every time)
Useful for dynamic images (e.g., generated charts)	Not ideal for large images (>2KB)

6. Common Use Cases

Small Icons: Embedding tiny icons directly in CSS/HTML.
Dynamic Content: Generating QR codes/charts on the fly.
Offline Apps: Storing images in localStorage or IndexedDB.

7. Security Considerations

Sanitization: Ensure Base64 strings are from trusted sources to avoid XSS attacks.
Malware: Base64 can encode malicious content—validate inputs.

8. Edge Cases

Broken Images

If the Base64 string is invalid:

<img src="data:image/png;base64,INVALID_BASE64" alt="Broken Image">

The browser will display a broken image icon.

Data URI Length Limits

Most modern browsers support Data URIs up to 32KB–2MB, but older IE versions have a 32KB limit.

Summary

Use the data:image/[format];base64,[string] syntax in <img> tags.
Convert images to Base64 using online tools, JavaScript, or server-side code.
Optimize for small images to avoid bloating your HTML/CSS.