When inlining an image makes sense
A data URI embeds the file directly in HTML, CSS or JSON, saving an HTTP request. That is worth it for small assets — icons, tiny logos, placeholders under a few kilobytes — and in places that cannot fetch files, like HTML emails in some clients or single-file demos.
For larger images it usually hurts: Base64 is about 33% bigger than the file, it cannot be cached separately from the page, and it blocks rendering of the CSS or HTML it sits in. For SVG, URL-encoding the markup is often smaller than Base64.
Frequently asked questions
What image formats are supported?
Any file your browser can read: PNG, JPEG, GIF, WebP, AVIF, SVG, ICO, BMP. The MIME type in the data URI comes from the file.
Is there a file size limit?
No hard limit, but data URIs over about 100 KB are rarely a good idea on the web, and some email clients cap message size.
Do HTML emails support data URIs?
Support is inconsistent: Apple Mail shows them, while Gmail and several Outlook versions block them. Hosted images or CID attachments are more reliable for email.
Is my image uploaded?
No. The file is read with the browser’s FileReader API and never leaves your device.