Base64 image encoder.

A data URI turns an image into a string of text you can paste straight into a stylesheet or an HTML attribute. The browser never makes a separate request for it, which removes a round trip — genuinely useful for tiny assets that appear on every page, like an inline icon, a bullet marker or a small logo in an email template.

The trade-off is size. Base64 encoding inflates the original by roughly 33%, and unlike a normal image file, an embedded one cannot be cached separately or reused across pages. Embed a 40 KB illustration and you have added 53 KB to every page that loads that stylesheet, permanently.

The practical rule: under about 4 KB, embedding usually wins. Above that, a normal file with proper caching wins. Email templates are the exception where the rules bend, because some clients block external images entirely and an embedded one is the only version that shows.

Worth knowing

• Keep it under 4 KB. Above that the extra weight outweighs the saved request.
• SVG icons are often smaller inlined as plain markup than as Base64 — try both before deciding.
• Embedded images cannot be cached independently, so never do this with anything large.