How to Convert an Image to Base64 (For CSS, HTML, or JSON)
Sometimes an image needs to live inside your code, not as a separate file. Base64 is how that works.
Base64 turns an image's binary data into a plain text string, which means that string can be pasted directly into CSS, HTML, or JSON - no separate image file, no additional network request to fetch it, just a self-contained block of text sitting right in your code.
How to convert an image to Base64
- Choose the image in an image-to-Base64 tool - a browser-based tool processes this locally, without uploading the file anywhere.
- The tool generates a Base64 data URI string.
- Copy the string and paste it directly into your CSS (`background-image: url(...)`), HTML (`<img src="...">`), or JSON.
When Base64 makes sense
- Small icons or UI graphics where saving an extra HTTP request is worth the size tradeoff
- Email HTML, where linked external images are sometimes blocked by default but embedded ones display immediately
- Self-contained config files or JSON payloads that need to carry image data without a separate file reference
When it doesn't
Base64 text is roughly a third larger than the original binary file, and browsers can't cache an embedded Base64 image separately from the page it's on the way they cache a linked file. For anything beyond a small icon - a full photo, for instance - a normal linked image file (possibly compressed first) is almost always the better choice.
Frequently asked questions
Why would I embed an image as Base64 instead of just linking to the file?
Embedding avoids a separate HTTP request for that image, which can help for small icons or images used inline in CSS/HTML/email where you want everything self-contained in one file.
Does Base64 encoding make the image bigger?
Yes, typically by around 33% compared to the original file - Base64 represents binary data as text, which is inherently less compact. That tradeoff is usually only worth it for small images.
Is converting an image to Base64 safe to do for a personal photo?
A good image-to-Base64 tool processes the conversion entirely in your browser rather than uploading the file to a server, so the image itself never leaves your device - worth confirming that's how any tool you use actually works.