📚 Step-by-Step Guide

Master Base64
Image Encoding

Learn how to convert and use base64 images like a pro

📚 Table of Contents

  1. Why Base64 Encoding?
  2. Supported Image Formats
  3. How to Convert Images
  4. Use Base64 as Image Sources
  5. Use Base64 as CSS Background

1. Why Base64 Encoding?

Base64 encoded images can be embedded directly into your HTML or CSS using <img> tags or background-image properties. This eliminates the need for additional HTTP requests, which can significantly speed up load times for smaller images.

Perfect for: Single-file mockups, demo pages, HTML email signatures (no "show images" warnings!), and reducing HTTP requests for small icons and graphics.

2. Supported Image Formats

Base64 Image supports all common image formats:

.jpeg
.png
.gif
.webp
.svg
.bmp

3. How to Convert Images

Converting images to base64 is simple and fast. Visit the home page and either:

Once uploaded, each file will show a status indicator:

Batch Processing: You can upload up to 20 files at once!

4. Use Base64 as Image Sources

You can use the base64 encoded string directly in your HTML <img> tag's src attribute using the data:image/... format.

To get the code, click the copy image button and it will be automatically copied to your clipboard.

Example HTML:

<img src="data:image/jpeg;base64,/9j/4RiDRXhpZgAATU0AKgA..."
     width="100"
     height="50"
     alt="base64 test">
View Live Demo on CodePen

5. Use Base64 as CSS Background

Base64 encoded images also work perfectly as CSS background images. Simply use the url() function with the data:image/... format.

Click the copy CSS button to get the CSS code copied to your clipboard.

Example CSS:

.my-class {
    background: url('data:image/jpeg;base64,/9j/4RiDRXhpZgAATU0AKgA...');
    background-size: cover;
    background-position: center;
}
View Live Demo on CodePen