How to Convert an Image to Base64

Base64 encoding turns binary data, like an image, into a string of plain text. When you wrap that string in a data URI, you get something you can paste directly into your code as if it were the image itself — no separate file needed.

This is handy for small assets. A tiny icon inlined as Base64 loads with the page instead of triggering its own network request, and a self-contained HTML email can carry its images inside the markup rather than linking out to them.

Inlining shines for small, frequently used graphics — UI icons, a logo in an email, a background texture in CSS. It removes a request and keeps everything in one file.

It works against you for large images. Base64 makes the data about a third bigger, and inlined images can't be cached separately or loaded lazily, so a big photo bloats your HTML or CSS and slows the first load. For anything sizable, a normal image file is better.

The encoder gives you the string in whichever form your code needs.

Base64 represents every three bytes of binary as four text characters, which is where the roughly 33 percent size increase comes from. The tool shows the original and encoded sizes side by side so you can judge whether inlining is worth it.

As a rule of thumb, inline assets under a few kilobytes and leave larger ones as files. The conversion itself happens locally with the browser's FileReader API, so your image is never uploaded while you decide.