Image to Base64 Converter

1. 01Choose an imageDrag an image into the upload area, or click to pick one from your device.
2. 02Copy the data URIThe tool encodes the image as a Base64 data URI. Copy the string, or the ready-made HTML or CSS snippet.
3. 03Paste it into your codeUse the data URI as an img src, a CSS background, or anywhere a URL is expected.

• Inline small iconsEmbed a small icon directly in HTML or CSS so it loads with the page and needs no extra request.
• Email and single-file pagesInclude an image inside a self-contained HTML file without linking to an external file.
• Quick prototypingDrop an image into a code sandbox or snippet without hosting it somewhere first.

• A CSS backgroundTurn a small texture PNG into a data URI and use it as a background-image in CSS.
• An inline img tagCopy the HTML snippet to embed a logo directly in a page with no separate file.
• An SVG iconEncode an SVG icon as a data URI to inline it in a stylesheet.

• Best for small imagesBase64 adds about 33% to the size, so keep it for icons and small graphics, not large photos.
• Compress firstShrink the image before encoding to keep the data URI short. The image compressor can help.
• Mind cachingInlined images are not cached separately, so a repeated image is better linked as a normal file.

The tool reads your image as bytes and encodes them as a Base64 text string in the form of a data URI, which starts with data:image/ and then the encoded data. You can copy the raw data URI, or a ready-made HTML img tag or CSS background snippet, and paste it straight into your code.

It works with common web images including PNG, JPG, WebP, GIF, and SVG, and keeps the original format inside the data URI. Data URIs are supported by every browser wherever a URL is expected, such as an img src or a CSS background-image.

Base64 adds roughly a third to the size, so a data URI is best for small icons and inline graphics, not large photos. Inlined images are not cached separately and make the HTML or CSS larger, so reused or big images are better linked as normal files. Files up to 10MB are supported.

Your image is read and encoded locally in your browser using the built-in file reader. It is never uploaded or stored, so the image stays on your device and clears when you refresh.

What is a Base64 data URI?

It is the image encoded as a text string that starts with data:image/…;base64,. You can paste it wherever a URL is expected.

Which formats are supported?

PNG, JPG, WebP, GIF, and SVG. The data URI keeps the original format of the image you upload.

Are my images uploaded?

No. The image is read and encoded in your browser and never leaves your device.

Why is the string larger than the file?

Base64 encoding adds roughly 33% overhead, so the text is bigger than the original binary file.

When should I not use a data URI?

Avoid it for large images or images reused across many pages, since it cannot be cached separately and bloats the HTML or CSS.