Image to Base64

The file is read in your browser and its bytes are written out as Base64 inside a data URL. The image is not recompressed or changed, so decoding the string gives back the identical file.

data:image/png;base64,iVBORw0KGgo…

<img src="data:image/png;base64,iVBORw0KGgo…" alt="logo">
background-image: url(data:image/png;base64,iVBORw0KGgo…);

Base64 text is about a third larger than the file, so a 12 KB icon becomes roughly 16 KB of text. Embedding works well for small icons and logos, because it saves a separate request. For large photos it is a poor trade: the page or stylesheet grows and the image can no longer be cached on its own.