Image to Base64 Converter
Encode any image as a Base64 data URI for embedding in HTML, CSS, or JSON files.
Drop image here or click to upload
Supports JPG, PNG, WEBP, GIF — Max 20 MB
Base64 Output (data URI):
Use in HTML: <img src="[paste here]">
Use in CSS: background-image: url([paste here]);
What is Base64 Image Encoding?
Base64 encoding converts binary image data into ASCII text characters. The resulting string (called a "data URI") can be embedded directly in HTML, CSS, or JSON without requiring a separate HTTP request for the image.
When to Use Base64 Images
- Small icons and images (under 5 KB) — eliminates HTTP request overhead
- Email HTML — some email clients block external images
- Single-file web pages — embed all assets in one HTML file
- JSON data — store images in API responses or configuration files
- CSS sprites — embed small background images in your stylesheet
When NOT to Use Base64
Avoid Base64 for large images because encoding increases size by ~33% and prevents browser caching of the image separately from the page.
Frequently Asked Questions
Base64 encoding increases data size by approximately 33% compared to the original binary. A 100 KB image becomes ~133 KB as a Base64 string.
Copy the entire string (including the "data:image/..." prefix) and use it as the src attribute: <img src="data:image/jpeg;base64,/9j/4AAQ...">