A Base64 data URI embeds the image directly into the HTML or CSS as text, instead of linking to a separate file.

Pros

  • No extra HTTP request — handy for tiny icons that would otherwise be a separate download.
  • Self-contained — the image travels with the markup.

Cons

  • Base64 makes data ~33% bigger than the binary file.
  • It can't be cached separately, so it re-downloads with every page.
  • Large Base64 strings bloat your HTML and slow first render.

Rule of thumb

Inline only very small images (a few hundred bytes — simple icons). For anything bigger, keep it as a real, compressed file. Related: browser caching tips.