Image to Base64

Embed small images directly in CSS or HTML as data URLs. Copy the full data URL or the raw Base64 string.

Best for small images (icons, placeholders). For anything large, a normal file loads faster.

How to use

  1. Choose an image.
  2. Copy the data URL or raw Base64.
  3. Paste into your CSS url() or img src.

Examples

Icon in CSS
Output: background: url(data:image/png;base64,iVBOR...)

Frequently asked questions

When should I avoid Base64?

For anything large: Base64 inflates size by 33% and blocks caching. Use it for icons and tiny placeholders only.

Related tools