Quick Answer
What is a Base64 image?
// Answer
A Base64 image is an image encoded as a text string and embedded directly in your code as a data URI (e.g. data:image/png;base64,iVBOR...). This lets you include small images inline in HTML or CSS without a separate file request, which can reduce HTTP requests for tiny icons.
When to use inline images
Base64 embedding works best for small assets like icons and logos. Note that Base64 increases size by roughly 33%, so large images are better left as separate files. Everything is processed in your browser — your image is never uploaded.
FAQ
Frequently asked questions
Yes, Base64 encoding adds about 33% to the file size, so it suits small images best.
Paste it as the src of an img tag or as a url() in CSS background-image.
No. The file is read locally using the browser FileReader API and never leaves your device.
Any image your browser can read — PNG, JPG, GIF, SVG, WebP, and more.
Advertisement
More tools