Image to Base64 Converter

Images are used to enhance the experience of whatever you are including them into, and can be included in an email or website in several ways. You can specify a background image of a particular element (which allows you to take advantage of spritification), or the <img> HTML element allows you to simply specify a source.

Regardless of the method, the source can be described with either a URL or through the Data URI Scheme.

Base64 is an encoding scheme that can be used to describe binary data, via a string format. Base 64, obviously implies that the string data is translated into radix-64 representation, which means that there is some overhead in the overall weight of the result.

There are various reasons to use and not to use base64 encoding of your binary data, many of which are discribed on Wikipedia. Make sure you read the see the various advantages and disadvantages to utilizing base64 encoded data for your images.

This tool allows you to specify a target URL of an image that will then simply be converted into a base64 string. There are some examples of ways to include it into HTML at the bottom that you can conveniently copy and paste into your code. Hopefully this will help.

Step 2

Observe the Base64 Result:

String Output (Base64)

iVBORw0KGgoAAAANSUhEUgAAAKIAAABACAYAAACZfqySAAAEoUlEQVR42u2dv2oUURTG9wnyBnmDvEHewEdIJdiJhY1FGgsRDNiIVrGySJNCBIsUKQQRRAzYiBYSokgIG5NNjBtXs2QZ+QauzF5nZ8+598zO3PUrPobZvfP3/vbcM+ecO9vJsuyAoppWhzeBIogURRApgkhRBJEiiBRFECmCSFEEkfpvQdz+MDi+vnF0vnxv/6JzbTebJHy/+rTXL26LdYlSvNm734aHkmtbf3l2ShAjAVy89eWyCj5fK4+7g7ETEm7nHxudB7CnqclOxv2RXBvOkyAGCh2sAdDJt26hIGI/IccjiHME4ubb/kkIhASRIJqCqB2OiwLEBJEgdpoakp3QOQSRIEaDeOXBwS+CSBAbB3Hhxt5IcnMxfBeh652Puv6wTBAJYvgOhODsfP59ZLm/sk6WxOh8C0wQ5wBE6Y1duv11aA12ijebIDYMIrIsBJEgNg6ixi8jiASRIFYID1dFP9RPHeKzta3TsyofNGkQNz+eZKsv+tnyk4u/wvr6u/GU6fGgm23t9vJlHSDGhGhSzawAPsAFH1dzTYgkIIfuQ2kF4rRikqqEQda5m01Vsf3a67Ns4f5oYlsA6dpuvD/J7rz6kYOIJdYJYjiIABDtpKEpKVAWIOKHIT1+qW+uAXHl2WBqWwfim/2jHL6rz3/mSyd8ThD1ICLMFJOyrDpWLIgoI5P+OCZGKqQgYtiVtEU7tAd0WN7c7ucWEcvi5wRRDiLSlbFWsE4QpUMyrgHQBoO4vXcsaueDCL8QALrhGesEUQeiFBKN/NrHGBA1Q3JZxkoFIoZbLYifeoc5hI92vufrWAJCfE4QZSDCJ7S0hJPy6KEgwl2Qnt/UmK0UMC2Izk90FhFLoX9IECMLN+BLFkM4dYEofWoXZbCsQURYp+k4Yh0hk1mDGDIkIzQzyQeD9cL3aAdLGwui9Loq/UIrEJfWh2NxxMWHl7k/SRDjz8VBI+1safFGGRRaEHEsE78wFkQMvz1dgJogKs9F4xtKIbTKrEiHZE0uXwUgAtlGFo8gVpyLZlj2ZxvWDaL0ejSVTWoQkVVJIdecOoiakIjI/zICUWqlxX5hCIjw/1IpekgdROk2eDqeZfVNaHjIFMQZWkOCKNzGqhrGGsQgn1UK4ox8Q4I4ByCq/UMNiCnVIxLE+h5WpIUXqidmgpg2iGXB6bpB1Lw9Q+UrEsT2gajpbIuXN2njiNJqG1hP8Q+FILYPRIQ+NFmVWKuoBbGWOCdBbGdmRTMNAG1jYAzJNWtSkKI0H0FsJ4jad/fAMkqGaYRWEDCPBdHcahPEdoKIjguZGoBt8MQKKAGYm+EHC+b2ZzVnRfNQhZI2gpggiLHvd5zF5Clt4a5viQliIiBqfbEmZvFp8uLRc1YIYrOTp6xhtJ5OqnEhJgbhCWL7QbSG0U/BxYKodSFKr5UgpgGi63Cruc3WE+w1b3koLYwgiOmAWAztxAJpDaK2cOKfwoh5BLGOl2OG/uFPnS/qhFVxL16qAtPN6kNbWFU/pmf1hz/4XnqfoLEHF8w/kYh/gUbxL9AoiiBSBJGiCCJFEUSKIFIUQaQIIkURRIogUhRBpFquP6jveYTeqJUjAAAAAElFTkSuQmCC

Bytes: 1656B (1.6171875 kBs)

Request to server

Locally defined

	<img width="162px" height="64px" 

    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKIAAA..."/>\>

.image {

    width:162px;

    height:64px;

    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKIAAA...);

}