TinySandyFree Online Tools

Image to Base64 Converter

Encode a picture as Base64 text so it can be embedded directly in HTML, CSS, JSON or an email template. You get the complete data URI, the raw Base64 string, and a CSS background and HTML img snippet that you can copy in one click, plus a warning when the result is too big to be a good idea inline.

Image Conversion Runs in your browser

Convert an Image to Base64

Files up to 4 MB are accepted. The file is read in your browser and never uploaded.

Drag and drop an image (JPG, PNG, WebP, GIF, BMP or SVG) here, or click to browseAccepted: JPG, JPEG, PNG, WEBP, GIF, BMP, SVG, ICO, AVIF. Up to 4 MB.

How to Use the Image to Base64

  1. Add your image (the format is detected from the file's first bytes, not just its name).
  2. Press Encode.
  3. Copy the Data URI, the raw Base64, or the ready-made CSS or HTML snippet with its Copy button.
  4. Read the Size check before inlining anything large.

About This Tool

Front-end developers inlining small icons and logos, email template builders, and API users who need an image as a JSON string.

Input: JPG / PNG / WebP / GIF / BMP / SVG  ·  Output: Base64 text.

Features and Limitations

Features

  • Data URI, raw Base64, CSS and HTML outputs with Copy buttons.
  • MIME type detected from the file contents.
  • Shows the original size, Base64 length and the overhead.
  • Warns when inlining is likely to slow a page down.
  • Works for SVG and ICO files too, since no decoding is needed.

Limitations

  • Base64 makes data about 33% larger than the original file.
  • Inlined images cannot be cached separately by the browser, so use them only for small assets (a few kilobytes).
  • Files above 4 MB are refused because the text would be too large for comfortable copy and paste.
  • The picture is encoded as it is; use the Image Compressor first if you want a smaller string.
  • Processing happens on your device, so very large files depend on your browser's available memory.

Example

A 3 KB PNG icon becomes a data URI of about 4 KB beginning with data:image/png;base64, followed by the encoded bytes.

Frequently Asked Questions

What is a data URI?

A data URI embeds a file inside a URL, for example data:image/png;base64,iVBOR.... Browsers can display it without a separate request.

When should I not use Base64 images?

Avoid it for large photos. The text is about a third bigger than the file and cannot be cached on its own, so it usually makes pages slower.

What is the difference between the data URI and raw Base64?

The data URI starts with a type prefix such as data:image/jpeg;base64,. Raw Base64 is only the encoded characters, which some APIs and databases expect.

How do I turn the Base64 back into an image?

Paste it into the Base64 to Image Converter, which validates it, detects the type and lets you download the picture.

Does the Base64 text leave my browser?

No. The file is read locally, the text is generated on your device and nothing is sent anywhere. Be careful where you paste it, though: a Base64 string is the whole picture.

Related Tools

More like this: all Image Conversion tools, all Image & Design tools or the TinySandy home page.