Image to Base64

Convert image to Base64 string.

Image to Base64

Our Image to Base64 String Converter is a web tool designed to convert images into Base64-encoded strings. It also automatically generates a Data URI (Uniform Resource Identifier) from the resulting Base64 string. This Data URI allows direct embedding of the image into HTML, CSS, or JavaScript code.

What is Base64?

Base64 is a binary-to-text encoding scheme that represents binary data in an ASCII string format. It is commonly used for encoding images, documents, and other binary data in text-based formats such as HTML, CSS, and JSON. Each group of three binary bytes is converted into four ASCII characters, making it a space-efficient way to represent binary data as text.

What is Data URI?

A Data URI is a scheme defined in RFC2397 that allows the inclusion of small data items in-line in web documents as if they were external resources. It starts with the data: scheme, followed by the media type and the data itself: 

data:[<mediatype>][;base64],<data>

Here, <media type> represents the Internet media type, and it can take various forms. Most common image media types used in Data URIs are:

  • image/jpeg: JPEG images.
  • image/png: PNG images.
  • image/gif: GIF images.
  • image/svg+xml: SVG images.

For the full list see the image type registry at IANA.

The ;base64 flag in the Data URI indicates that the data is Base64-encoded, which is common for binary data like images. If the data is plain text or HTML, the ;base64 flag is not required.

How to use Data URI?

Data URIs provide a means to embed images directly into HTML documents or JavaScript code, eliminating the need for separate image files. Below are examples demonstrating the use of a Data URI for a small 5px x 5px image:

HTML Image Embedding:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAARSURBVBhXY/jPgIIo4zMwAAD9fBjoMLN1hgAAAABJRU5ErkJggg==" alt="red square">

CSS Background Image:

<style>
div {background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAARSURBVBhXY/jPgIIo4zMwAAD9fBjoMLN1hgAAAABJRU5ErkJggg==');}
</style>

JavaScript Image Loading:

<script>
var img = new Image();
img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAARSURBVBhXY/jPgIIo4zMwAAD9fBjoMLN1hgAAAABJRU5ErkJggg==';
document.body.appendChild(img);
</script>

Related Tools

RGB to Hex

Convert RGB colors to Hex codes.

Hex to RGB

Convert Hex colors to RGB.

Unix Time Converter

Convert to & from UNIX timestamps.

Text to Hex

Convert / Encode text to Hex.

Hex to Text

Convert Hex to text.

Text to Base64

Encode text into Base64.

Markdown to HTML

Convert Markdown format to HTML.

HTML to Markdown

Convert HTML documents to Markdown.

CSV to JSON

Convert CSV to JSON format

JSON to CSV

Convert JSON to CSV format

ROT13 Encoder

Simple ROT13 text converter

ROT13 Decoder

ROT13 text transformation

Unicode to Punycode

Convert domains from Unicode to Punycode.

Punycode to Unicode

Convert domains from Punycode to Unicode.

JPEG to PNG

Convert JPEG images to PNG format.

JPEG to WEBP

Convert JPEG images to WEBP format.

PNG to JPEG

Convert PNG images to JPEG format.

PNG to WEBP

Convert PNG images to WEBP format.

WEBP to JPEG

Convert WEBP images to JPEG format.

WEBP to PNG

Convert WEBP images to PNG format.

Image Compressor

Compress JPEG or WEBP images.

Image Resizer

Resize any Image.

Memory / Storage Converter

Convert Between Memory / Storage Units

Contact

Missing something?

Feel free to request missing tools or give some feedback using our contact form.

Contact Us