Data URIs: Embedding an Image Directly in Text
Converting an image to Base64 produces a data:image/...;base64,... string — a self-contained representation of the image that can be embedded directly into HTML, CSS, or JSON without referencing a separate file (see Base64 Images for the full tradeoff discussion around when this actually helps versus hurts page performance).
The encoded output is roughly a third larger than the original image's binary size — a fixed, unavoidable overhead of Base64 encoding itself — which matters when deciding whether embedding is worth it for a given use case: small, frequently-inlined icons or generated one-off images (where avoiding a separate HTTP request has real value) are reasonable candidates; large, reusable images are usually better served as normal files that benefit from separate browser caching.
Decoding in the other direction — Base64 string back to a downloadable image file — is exactly the reverse operation, useful for recovering an actual image file from a data URI pasted from CSS, an API response, or embedded HTML source.