Skip to content
FilesKit

Convert an image to Base64 or a data URI

Turn a small image into text you can paste straight into HTML, CSS, Markdown or a JSON file, so it needs no separate file. The encoding runs in your browser, so the image is not uploaded.

PNGJPGGIFWebPAVIFBMPICOSVGProcessed in your browser
The tool loads in your browser…

Features

  • Five ready-made formats

    Get a data URI, plain Base64, a CSS background-image rule, an HTML img tag with width and height, or a Markdown image.

  • Copy in one click

    Copy the result to your clipboard, or download it as a text file when the text is long.

  • Correct MIME type

    The type in the data URI comes from the real content of the file, not only its extension, so a PNG named photo.jpg still gets image/png.

  • All common image types

    Works with PNG, JPG, GIF, WebP, AVIF, BMP, ICO and SVG files, and does not change the image: the bytes are encoded exactly as they are.

  • Several images at once

    Encode up to 20 images in one run, each into its own text file, or download them all as a ZIP.

How to use Image to Base64

  1. Choose your images or drop them onto the page.
  2. Select how the text should be written.
  3. Select Encode.
  4. Copy the text or download the TXT file.

Supported formats

AcceptsPNG, JPG, GIF, WebP, AVIF, BMP, ICO, SVG
ProducesTXT

The text contains the image encoded as Base64, wrapped in the snippet you choose.

Limits and things to know

  • Up to 20 images, 5 MB each and 20 MB in total. Base64 text is about a third longer than the image, so this works best for small images and icons.
  • The image is not resized, compressed or converted. Make it smaller first with Image Resizer or Image Compressor if the text is too long.
  • Very long data URIs can be slow in editors and are not accepted by every program. Some email clients block them.
  • The HTML snippet includes width and height only when they can be read from the file header.
  • Decoding Base64 back into an image is not part of this tool.

Privacy and processing

Encoding is done by your browser. The image is read from your device, converted to text in the page, and copied or saved on your device. Nothing is sent to FilesKit, which has no server that receives images.

Common uses

  • Embed an icon in CSS or HTML

    Inline a small logo or icon so a page or an email signature needs one request less.

  • Put an image in JSON or a config file

    Store a thumbnail or avatar as text inside an API payload, a test fixture or a configuration file.

  • Single-file documents

    Create an HTML page or a Markdown note that carries its own pictures and can be shared as one file.

  • Debug and test

    Build data URIs for tests, mock data and bug reports without hosting the image anywhere.

How this differs from other approaches

Online Base64 encoders upload your image to a server, which is unnecessary for something the browser can do itself. FilesKit encodes on your device. Command line tools such as base64 do the same and are better for scripts and very large files.

Frequently asked questions

Is my image uploaded?

No. The image is encoded in your browser and FilesKit has no server that receives your files.

What is a data URI?

A data URI is an address that contains the file itself instead of pointing to a place on the internet. It starts with data:image/png;base64, followed by the encoded image.

Why is the text longer than my image?

Base64 writes every three bytes of the image as four characters, so the text is about 33 percent longer. For large pictures a normal image file is the better choice.

Can I use the result as a CSS background?

Yes. Choose the CSS format and paste the rule into your stylesheet or a style attribute.

How do I turn Base64 back into an image?

Paste the data URI into a browser address bar to view it, or use a decoder. This tool only encodes images.

Related tools