Base64.im Tutorial

1. Why use Base64 encoding?

Base64 represents binary data as text. It can keep a small icon or a standalone demonstration inside one HTML document. For email signatures, check the receiving client first: support for embedded Data URIs varies.

2. Supported image formats

Choose JPEG, PNG, GIF, WebP, SVG or BMP images. The converter retains the file bytes and MIME type; it does not resize, compress or change the image format.

3. How to convert images using base64.im

Select images with the file picker or drop them onto the image area. Up to 20 images can be processed at once, with a 10 MB limit per image. Each result has its own copy and download buttons.

4. Use Base64 encoded images as HTML image sources

Copy the complete result, including the data:image/...;base64, prefix, into an image src attribute. Keep suitable alternative text. If clipboard access is unavailable, select the result and copy it manually.

<img src="data:image/png;base64,…" alt="…">

5. Use Base64-encoded images as CSS backgrounds

Place the complete Data URI inside the url() value of a CSS background-image declaration. Keep its prefix and padding intact. A shortened example containing an ellipsis is illustrative and cannot render an image.

.image { background-image: url("data:image/png;base64,…"); }

6. Notes

Base64 adds about one third to the binary size. Prefer small images, test the final HTML or CSS in the target browser, and use an ordinary image URL for large or reusable assets.