or
What can it do?
With elmah.io's free image to Base64 encoder, it's easy to copy and paste markup or style for exactly your codebase. Simply drag and drop, upload, or provide an image URL in the controls above and the encoder will quickly generate a Base64 encoded version of that image. You don't even need to run the image through optimization before generating the data. Enable the Optimize image toggle and we will automatically optimize the image before encoding it.
Base64 is an encoding algorithm that converts any characters, binary data, and even images or sound files into a readable string, which can be saved or transported over the network without data loss. The characters generated from Base64 encoding consist of Latin letters, digits, plus, and slash. Base64 is most commonly used as a MIME (Multipurpose Internet Mail Extensions) transfer encoding for email.
Base64 images are primarily used to embed image data within other formats like HTML, CSS, or JSON. By including image data within an HTML document, the browser doesn't need to make an additional web request to fetch the file, since the image is already embedded in the HTML document. A Base64 representation of an image is larger than a separate image and the string gets very long for large images. You should primarily use Base64 for small images and always test both embedded and external images to see what works best.
Once converted to Base64, encoded image data will look similar to this (shortened for simplicity):
iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgwnLpRPAAA...
The string can be used instead of an URL in the src
attribute of the img
element in HTML:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAYAAAA9zQYyAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzA..." />
Or you can insert the string as a background-image
in CSS:
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0CAYAAAA9zQYyAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzA...");
Other file types like XML and JSON also supports Base64 encoded images. Start by uploading an image file above and play with the different possibilities.
Join our newsletter
Sign up for our newsletter and receive a free copy of our book .NET Web Application Logging Essentials
We monitor your websites
We monitor your websites for crashes and availability. This helps you get an overview of the quality of your applications and to spot trends in your releases.
We notify you
We notify you when errors starts happening using Slack, Microsoft Teams, mail or other forms of communication to help you react to errors before your users do.
We help you fix bugs
We help you fix bugs quickly by combining error diagnostic information with innovative quick fixes and answers from Stack Overflow and social media.
Free Trial
Reduce bugs with monitoring & notifications
elmah.io is the easy error logging and uptime monitoring service for .NET. Take back control of your errors with support for all .NET web and logging frameworks.