Embed a small picture directly in markup

A handful of situations reward inlining an image as text rather than linking a file: an email signature that must survive aggressive filters, a single-file HTML demo that has to travel as one document, or a stylesheet that should not add another request. The trade-off is honest and easy to get wrong. Text is roughly a third larger than the bytes it carries, so this suits small icons and logotypes, not photographs. This job is the round trip: encode the picture, keep the declared media type truthful, then decode the generated string back into an image to prove it survives. Because the conversion is text, it can also be pasted anywhere a file cannot travel, including a configuration file or a chat message, without ever touching a server. Size decides whether inlining is sensible. A mark, a favicon or a simple diagram becomes a short string that costs almost nothing to carry, while a photograph turns into an enormous block of text that delays rendering and inflates every copy of the file. Measure before committing: encode the candidate, look at the length of the generated string, and compare it with the weight of a linked asset plus one request. Keep the declared media type truthful, because a browser trusts the label and a mismatch produces a broken image with no useful error. Verify the round trip by decoding the string back into a picture, which catches a truncated paste or a stray line break. Anyone can reverse the encoding, so secrets never belong in markup. Accessibility does not disappear because the picture travels as text. A description reached through a screen reader comes from the markup attribute, not from the encoding, so write the alternative text wherever the picture appears. Keep the inlined asset out of the critical path where you can, and remember that a large string is parsed on every device that loads it. If the picture is decorative, mark it as such rather than leaving the attribute empty out of haste, and prefer a small vector when the shape is simple. When a picture changes, re-encode rather than editing the string by hand, because one altered character invalidates the whole payload. Prefer an ordinary file reference wherever the markup allows one; inlining is a fallback, not a default.