How to convert image to base64

A virtual teacher who reveals to you the great secrets of Base64

How to convert image to Base64 online

Additional image encoders

The Image to Base64 converter generates ready-made examples, depending on the selected output format. It automatically detects the content type of the uploaded image, so that you simply copy the complete result. If you need to encode specific image formats, please follow the links below.

Output formats

If you do not know what output format you need, check the following examples to see how will look the result of the same Base64-encoded image formatted in each of the available formats (as an example image I use a one-pixel red dot GIF file):

• Plain text:• Data URI:• CSS Background Image:• HTML Favicon:• HTML Hyperlink:• HTML Image:• HTML Iframe:• JavaScript Image:• JavaScript Popup:• JSON:• XML:

If I missed an important output format for Base64-encoded images, please let me know — I would love to implement it.

Comments (32)

I hope you enjoy this discussion. In any case, I ask you to join it.

Hi David,
Perhaps you can give me some direction!
I want to extract from javascript (using btoa method?) a base64 code contained in a xml se:InlineContent element. It looks like:

your plain text output

I wonder:
— did I locate correctly your plain text output?
— is the plain text the value of the encoding attribute?
— how can I take the plain text output and bring it to a varaible in javascript? I have done this but it doesnt work: const stringFromBase64 = inlineContent.$[‘encoding’]

Base64 Image Encoder

Convert any image file or URL to Base64 online

Like this tool? Share it with your network 🙌

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):

The string can be used instead of an URL in the src attribute of the img element in HTML:

Or you can insert the string as a background-image in CSS:

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.

A virtual teacher who reveals to you the great secrets of Base64

How to convert PNG to Base64 online

About PNG

Output formats

If you do not know what output format you need, check the following examples to see how will look the result of the same Base64-encoded PNG image formatted in each of the available formats (as an example image I use a one-pixel red dot PNG file):

• Plain text:• Data URI:• CSS Background Image:• HTML Favicon:• HTML Hyperlink:• HTML Image:• HTML Iframe:• JavaScript Image:• JavaScript Popup:• JSON:• XML:

If I missed an important output format for Base64-encoded PNG images, please let me know — I would love to implement it.

Comments (2)

I hope you enjoy this discussion. In any case, I ask you to join it.

I want to send emails from excel with a macro using an outlook account. I want to put one Base64 image on my email but. It’s impossible. Instead of the image into the email there is a square with a red x inside. I start writing the macro lilke this:

MensajeHTML = MensajeHTML & » MensajeHTML = MensajeHTML & «wYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDoAABSCAABFVgAADqXAAAXb9daH5AAADKrSURBVHja7H15mB1Vmfd7zqn1rn»
MensajeHTML = MensajeHTML & «1v73unsyedPRBCAgFkky2yQ1gUFRF0ZtxlHD9RZxyHcb7xm1FBHQSEAQSCIiqKIvu+hiSkk973/e5LLWf7/qjuTshGQro7xOf+ni»
. this continues with all the data collected from the Base64 field on this page till the last line wich is:
MensajeHTML = MensajeHTML & «ToFRBXwoSDW+uh2CY70haYFRBRQwlSi0+S6ggAKjCiigwKgCCigwqoACCigwqoACjh7+/wCoanLFlsvTqgAAAABJRU5ErkJggg== />»

It’s impossible to see the image on my email!

CONVERT YOUR IMAGES TO BASE64

Try out some of Our Tools

Use this online free Base64 Image Maker to quickly upload an image and to convert it into a base64 string. The image can be in jpeg, gif, and png format.

Base64 is an encoding algorithm that allows converting any characters into an alphabet which consists of Latin letters, digits, plus, and slash. Due to this algorithm, even Chinese characters, emojis, and images can be converted into a “readable” string.

In computer science, Base64 is a group of binary-to-text encoding schemes that represent binary data in an ASCII string format by translating it into a radix-64 representation. The term Base64 originates from a specific MIME content transfer encoding. Each Base64 digit represents exactly 6 bits of data. Three 8-bit bytes (i.e., a total of 24 bits) can, therefore, be represented by four 6-bit Base64 digits.

Common to all binary-to-text encoding schemes, Base64 is designed to carry data stored in binary formats across channels that only reliably support text content. Base64 is particularly prevalent on the World Wide Web where its uses include the ability to embed image files or other binary assets inside textual assets such as HTML and CSS files. (Wikipedia)

Initially, the algorithm was named “printable encoding” and only in June 1992, RFC 1341 defines it as “Base64”. The 64 characters represent the 64 place-values for the base varies between implementations.

Base64 is most commonly used to encode binary data such as images, or sound files for embedding into HTML, CSS, EML, and other text documents. In addition, Base64 is used to encode data that may be unsupported or damaged during transfer, storage, or output. Here are some of the applications of the algorithm:

When to use Base64 Image Maker?

Base64 does not show the images, thus the image will never be indexed by Google because it does not show up in the image search.

You can use the Base64 Image maker for not so important images that do not bring traffic, for example, social icons. Little icons such as Twitter, Google+, Facebook, etc. images are really small and have no need to be indexed. Those little icons never bring traffic.

It is best to use base64 encode only for tiny images. If you try to base64 larger images you will end up with a great deal of code in your HTML and lose out on the performance benefits. Many webpages have 8 or 12 social icons and there is no need to download them. So the Base64 is the best choice in this case!

Data URIs and Base64 encoding go hand-in-hand. Data URLs are a Uniform Resource Identifier scheme that allows you to include data items inline in a web page as if they were being referenced as external resources. Data URLs are a form of Uniform Resource Locators, although they do not in fact remotely locate anything. Instead, the resource data is contained within the URL string itself as a base64-encoded string. This saves the browser from having to make additional HTTP requests for the external resources, and can thus increase page loading speed.

Data URLs reduces the number of HTTP requests that the browser needs to make to display an HTML document. Minimizing the number of browser requests is an important part of optimizing web page loading times. So Data URLs can thus have beneficial effects on performance.

Data URLs can result in faster downloading for transferring small files.

Data transfers via TCP start slowly, and each external resource starts a new TCP connection to the server. The transfer speed may thus be held back by the overhead of TCP communication.

Less bandwidth usage.

Data URLs use less bandwidth whenever the overhead of encoding the data as a Data URL is smaller than the overhead of an HTTP request. For example, the required base64 encoding for an image 600 bytes long would be 800 bytes, so if an HTTP request required more than 200 bytes of overhead, the data URI would be more efficient.

Faster HTTPS.

HTTPS requests have much greater overhead than ordinary HTTP requests due to SSL encryption. If your website is served over HTTPS, providing resources via Data URLs can improve performance significantly.

How does a Data URL look?

A Data URL is a string that starts with data: followed by the MIME type format. For example, a PNG image has mime type image/png which is followed by a comma and then by the actual data.

Text is usually transferred in plain text, while binary data is usually base64 encoded.

Here is an example of how such Data URL will look like:

Here is how a base64 encoded Data URL looks like:

data:image/png;base64:

You can use the base64 encoded string in CSS. You can copy the string and put it into your code like this:

How to Convert Image to Base64 String in Python

Base64 encoding enables us to convert bytes containing binary or text data to ASCII characters. By encoding the data, we improve the chances of it being processed correctly by various systems. Some systems don’t understand the data in bytes format, so we have to convert the data.

The purpose of the base64.b64encode() method in Python is to convert the binary data into ASCII-safe “text”. But Python strongly disagrees with that. Python is now very strict about this that bytes.encode() method doesn’t even exist, and so ‘xyz’.encode(‘base64’) would raise an AttributeError.

Now, let’s understand the base64 encoding.

What is Base64 Encoding?

Base64 encoding is the type of conversion of bytes into ASCII characters. In maths, the base of a number system indicates how many different characters represent numbers.

The name of base64 encoding comes directly from a mathematical definition of the bases: we have 64 characters that represent the numbers.

The Base64 character set contains the following.

When a computer converts Base64 characters to binary, each Base64 character represents the 6 bits of information.

Convert Image to Base64 String in Python

To convert the Image to Base64 String in Python, we have to use the Python base64 module that provides b64encode() method. Python base64.b64encode() function encodes a string using Base64 and returns that string.

Syntax

Parameters

The function takes s as an input, and it is the required parameter.

The Optional altchars must be a string of at least length 2 (additional characters are ignored), which defines the alternative alphabet for the + and / characters. This enables an application to, for example, generate URL or filesystem safe Base64 strings. The default is None, for which a standard Base64 alphabet is used.

Return Value

The b64encode() function returns the encoded string.

Example of converting Image to base64 in Python

In my project folder, I have an image called grayimage.png. Please make sure that your image path is correct.

In this example, at first, we opened our file in ‘rb’ mode. Then we read the image file.

Python with open() function opens a file and then we can perform whatever operations we want. It automatically closes the file when we won’t need it anymore.

Then encoded it with b64encode() method. You must read an image file before you encode it.

I am getting the long string in the output in the terminal, like the following.

Your string has been printed. But in the starting position of your base64 string, there is a b’.

Or you can say your base64 encoded string is in the pair of single quotation.

To remove b’ from the prefix of base64 code in Python, you can use string.encode(‘utf-8’) method.

That is it for how to convert Image to base64 string in Python example.