How to Convert an Image to Base64 for HTML
Want to embed an image directly in your HTML without a separate file? Convert it to a Base64 data URL and paste it right into your code.
Quick Answer
Upload your image to the free Base64 converter at dotsapps.com. Copy the data URL string. Paste it into an img tag's src attribute or CSS background-image. No separate image file needed.
What Is a Base64 Image?
Base64 is a way to encode binary data (like an image) as a text string. Instead of linking to an image file, you embed the image data directly in your HTML or CSS.
A Base64 image looks like this:
data:image/png;base64,iVBORw0KGgo...
The browser reads this string and displays the image — no HTTP request needed. This is useful for small images like icons, logos, and UI elements.
When to Use Base64 Images in HTML
Base64 images are a good choice when:
- Small icons or logos under 10 KB — saves an HTTP request.
- Email templates — many email clients block external images but display inline Base64.
- Single-file HTML — when you need everything in one .html file.
- CSS backgrounds — embed tiny patterns or icons directly in your stylesheet.
Do not use Base64 for large images. A 100 KB image becomes about 133 KB in Base64 (33% larger). Large Base64 strings also slow down HTML parsing.
How to Embed a Base64 Image in HTML
After converting your image, you get a data URL string. Use it in an img tag like this:
<img src="data:image/png;base64,iVBORw0..." alt="My icon">
For CSS backgrounds:
background-image: url(data:image/png;base64,iVBORw0...);
The entire data URL goes where you would normally put the image file path. No quotes inside the data URL for HTML; use quotes around the url() value in CSS.
Base64 Image Size Limits and Best Practices
Keep these rules in mind when using Base64 images:
- Keep images small: Under 10 KB is ideal. Under 30 KB is acceptable.
- Compress first: Run the image through a compressor before converting to Base64.
- Use the right format: SVG icons are smaller than PNG. JPEG photos are smaller than PNG.
- Don't Base64 large photos: A 500 KB photo becomes 667 KB in Base64 and blocks page rendering.
For images larger than 30 KB, it is better to use a regular image file with proper caching headers.
How to Do It: Step-by-Step
- 1
Open the free Image to Base64 tool at dotsapps.com.
- 2
Upload or drag your image (PNG, JPEG, SVG, WebP, or GIF).
- 3
Copy the generated Base64 data URL string.
- 4
Paste it into your HTML img src or CSS background-image property.
- 5
Test in your browser to confirm the image displays correctly.
Frequently Asked Questions
Is Base64 encoding larger than the original image?
Yes, about 33% larger. A 10 KB image becomes roughly 13.3 KB in Base64. This is why Base64 is best for small images under 10–30 KB.
Can I use Base64 images in emails?
Yes. Many email clients block external images but display inline Base64 images. This makes Base64 useful for logos and icons in HTML emails.
What image formats can be converted to Base64?
Any format: PNG, JPEG, GIF, SVG, WebP, and more. The data URL includes the MIME type so the browser knows how to decode it.
Does Base64 affect page load speed?
For small images, it can improve speed by eliminating HTTP requests. For large images, it hurts speed because the bigger HTML file takes longer to parse.
Ready to Try It?
Image to Base64 is free, private, and works right in your browser. No sign-up needed.
Open Image to Base64