Convert an image into a Base64-encoded data URL you can paste directly into HTML or CSS.
A Base64 data URL lets you embed an image directly inside HTML, CSS, or JSON without linking to a separate file — handy for small icons, inline emails, or quick prototypes. Keep in mind it makes the file about 33% larger than the original.
Why would I embed an image as Base64 instead of linking to a file?
It lets you include a small image directly inside an HTML or CSS file with no separate image request — useful for tiny icons or email templates where external images might get blocked.
Does Base64 encoding increase the file size?
Yes, by roughly 33% compared to the original binary file, since Base64 represents binary data using only text characters. It's best suited to small images, not large photos.
Will this work in an <img> tag?
Yes — paste the full data URL (starting with data:image/...) directly into an <img src=""> attribute or a CSS background-image property, and it will render like a normal image.