Image to Base64 Converter

This image to Base64 converter reads a PNG, JPG, GIF, WebP, SVG or ICO file of up to 5 MB and turns it into text you can paste into HTML, CSS or JavaScript. You get the raw Base64 string, a data URI, a CSS background-image rule and an HTML img tag. The browser reads the file locally, so the image is not uploaded.

How to convert an image to Base64

1. Click the Upload Image area to choose a file, or drag one onto it. One image is converted at a time.
2. The tool encodes it straight away. The file details list the name, type, size and Base64 length, and a preview confirms the right image was read.
3. Press Copy Base64 for the bare string without the data: prefix, or Copy Data URI for the full value used in a src or url().
4. Press Copy CSS or Copy HTML to take a ready-made rule or tag.
5. Click Upload Another Image to clear the outputs and start again.

Files of another type, BMP for example, are rejected with a message that lists the accepted formats, and files over 5 MB get a size error.

Example: a 113-byte SVG icon

This file, saved as dot.svg, draws a blue circle:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><circle cx="8" cy="8" r="8" fill="#1F5C99"/></svg>

The file details show a size of 113 B and a Base64 length of 152 chars, and the four outputs are:

Base64 String
PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PGNpcmNsZSBjeD0iOCIgY3k9IjgiIHI9IjgiIGZpbGw9IiMxRjVDOTkiLz48L3N2Zz4=

Data URI
data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PGNpcmNsZSBjeD0iOCIgY3k9IjgiIHI9IjgiIGZpbGw9IiMxRjVDOTkiLz48L3N2Zz4=

CSS Background Image
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PGNpcmNsZSBjeD0iOCIgY3k9IjgiIHI9IjgiIGZpbGw9IiMxRjVDOTkiLz48L3N2Zz4=);

HTML <img> Tag
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PGNpcmNsZSBjeD0iOCIgY3k9IjgiIHI9IjgiIGZpbGw9IiMxRjVDOTkiLz48L3N2Zz4=" alt="dot.svg">

Raster images work the same way. Every PNG file starts with the same 8 signature bytes, so a PNG data URI always continues data:image/png;base64,iVBORw0KGgo, and a JPEG's Base64 begins with /9j/.

The img tag uses the file name as its alt text, so replace it with a description of the image before you publish. The data URI follows the data:[media type];base64,[data] form described in MDN's data URL reference.

How much bigger a Base64 image gets

Base64 writes every 3 bytes as 4 characters, so the text is about a third larger than the file, before the short data: prefix is added.

A Base64 image saves a separate HTTP request, which is why it suits small icons, logos and placeholder images. A large image inlined into a stylesheet or page makes that file heavier, and the browser has to download it again whenever the file around it changes. Shrink a photo with the image compressor first if you do need to inline it.

SVG files: Base64 or plain text

The converter always produces Base64, for SVG files too. An SVG is already text, so it can also go into a data URI with only a few characters percent-encoded. For the dot.svg example, swapping double quotes for single quotes and encoding <, > and # gives 127 characters instead of the 152 Base64 characters. Base64 is still the safer choice when you can't check which characters the SVG contains.

When this base64 image encoder is the right tool

Use the image to Base64 converter to embed an icon in a single-file HTML page or a CSS file, to put a test image into a JSON fixture, or to check what a data URI for a given file looks like. To encode text or other file types, or to decode Base64 text, use the Base64 encoder and decoder. How to Base64 encode an image in your browser covers the privacy side, and what Base64 encoding is explains the format. The other encoders are listed under developer tools.