Embedding a picture puts its bytes inside HTML, CSS or another document. It can make a small artifact self-contained, but it also couples the image to that document's delivery and caching. Decide based on the complete workflow rather than assuming fewer URLs always mean a faster page.
Build the correct wrapper
A PNG image Data URI begins with data:image/png;base64,, followed by the Base64 representation of the original file. A JPEG needs image/jpeg; WebP needs image/webp. Renaming a MIME type does not convert the bytes. If the receiver requires a JPEG, re-encode the image before building its Data URI.
<img src="data:image/png;base64,BASE64_PAYLOAD" alt="Descriptive alternative text" width="32" height="32">The placeholder above is not a working image; replace it with the encoder's complete output. If the output already contains the data: prefix, do not add another one. Keep surrounding quotation marks balanced and avoid line breaks introduced by rich-text editors.
Calculate the real size
The encoded portion needs four characters for every three input bytes, rounded to complete groups. The Data URI prefix adds a little more. For a 30,000-byte file, the payload alone is 40,000 characters. HTML compression may change the transferred size, but the browser still needs to parse the document and decode the image. Measure the actual page, not only the source file.
A separately served image can be cached and reused independently across pages. An embedded image is tied to every document containing it. Large repeated illustrations are therefore poor candidates for automatic inlining. Small one-off icons in a self-contained report can be a reasonable tradeoff.
Check the destination
Content Security Policy can restrict data: images. Email clients may remove or decline embedded content. A file that previews in your browser does not prove that a recipient's application will display it. Test the exact export, email client or downstream system you need to support.
For temporary local previews, a Blob URL often avoids creating a large Base64 string. Revoke the URL when its view is removed. For exported standalone HTML, a Data URI may be appropriate. Preserve alt text and dimensions in either case. Syntax and browser considerations are covered in MDN: data URLs.