What's Image to Base64 Converter?

Image to Base64 Converter is built on Next.js and Reactjs, it helps to convert from image to base64 quickly. It completely runs on the front-end so we do not store any data.

What is base64?

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[1] where its uses include the ability to embed image files or other binary assets inside textual assets such as HTML and CSS files.

Use base64 as image source

You can use the base64 encoded string as a value of the src parameter, using a data:image/... construct. You can optain the example code by pressing the button and it will be copied to your clipboard. Your HTML code should look like this:

<img src="data:image/gif;base64,R0lGODlhwANYAvcAAHd4eGGYm..." width="100" height="50" alt="image to base64">

Use base64 as CSS backgroud

You can use the base64 encoded string as a CSS background image, too. Simply feed the url() parameter with data:image/... You can optain the example code by pressing the button and it will be copied to your clipboard. Your CSS code should look like this:

background: url('data:image/jpeg;base64,R0lGODlhwANYAvcAAHd4eGGYm...');