Skip to main content
Website Image Tools

Image to Base64

Convert an image to a Base64 string or a full data URI you can embed directly in HTML, CSS or an email.

Free & instant No signup How to use FAQ

Drag & drop an image here, or click to browse

Your image is processed entirely in your browser - it is never uploaded to any server.

Not sure what to enter?

Choose an image to get its Base64 code - either raw or as a complete data URI ready for an <img> tag or CSS background.

What is a Base64 image?

Base64 turns an image file into plain text, so it can be placed directly inside HTML, CSS or an email as a data URI instead of being loaded from a separate file. It is handy for tiny icons, but the text is about a third larger than the original image.

How to convert an image to Base64

  1. Choose an image file.
  2. Keep "Include full data URI prefix" on if you will paste it into HTML or CSS.
  3. Copy the generated code.
  4. Use it as an <img src> value or in a CSS url().

Related checks

Base64 makes images about a third larger than the original file and cannot be cached separately, so use it only for very small images such as tiny icons. Keep an eye on page weight with the Page Size Checker.

Frequently Asked Questions

For very small images (a few KB) used on every page, such as a tiny icon, where saving an extra request is worth it. For anything larger, a normal image file is faster because browsers can cache it.

With the data URI option on, use it as the image source: <img src="data:image/png;base64,..."> or in CSS: background-image: url("data:image/png;base64,...").

No. The image is read and encoded in your browser and never leaves your device.
Share this tool:
Need a website for your business? Only $599