UltKit

Image to Base64 Converter

Turn an image file into a line of text you can paste into HTML, CSS, a JSON request or a Markdown file, with the data URI prefix already in front so it works the moment you paste it.

Data Converter

or drop CSV, TSV, TXT … files here ·

Max 95 MB per file· Up to 20 files· Deleted after 30 minutes

Output

Files are processed on our servers and deleted after 30 minutes.

How to use this tool

  1. 1

    Add the images

    Drop PNG, JPG, GIF, WebP or SVG files onto the upload area, up to 20 at a time and 95 MB each.

  2. 2

    Keep or drop the prefix

    Data URI prefix is on, so the result starts with data:image/png;base64, or the matching type. Turn it off under Advanced settings when an API wants the bare Base64 string.

  3. 3

    Convert and copy

    Press Convert to Base64 text and download a .txt file per image, ready to paste into your code.

Upload the image and press Convert to Base64 text. You get the file encoded as plain characters, starting with data:image/…;base64, so it can go straight into an img src or a CSS url(). Nothing about the picture changes.

Where an image as Base64 is useful

Base64 is defined in RFC 4648 (2006) and maps every 3 bytes of binary data onto 4 characters from a 64-character alphabet of A–Z, a–z, 0–9, + and /. The result survives any channel built for text. The data URI scheme, written down by Larry Masinter as RFC 2397 in 1998, then lets a browser treat that text as a file.

Front-end developers inline small icons, loading spinners and placeholder images so a page renders without extra requests. Back-end developers send images inside JSON, because many APIs, including vision and OCR services, accept an image as a Base64 field. Testers keep fixtures in source code, and people building single-file HTML reports or Markdown notes embed screenshots so the file stays self-contained when it is emailed or archived.

What the Base64 output looks like

A 1 × 1 transparent PNG (68 bytes) as a data URI inside an img tag
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR4nGNgAAIAAAUAAXpeqz8AAAAASUVORK5CYII=" width="1" height="1" alt="">

PNG icon file

24 KB

typical toolbar icon set, 96 × 96 px

+33% size, zero quality change

Base64 text

32 KB

4 characters per 3 bytes, plus the prefix

ANY I

Any image

This tool accepts common image formats, including JPG, PNG, WebP, HEIC, GIF, BMP and TIFF. The format is detected automatically from the file, so you do not need to know what kind of image you have.

Any image converter

BASE64

Base64-encoded text

Base64 is an encoding, defined in RFC 4648, that turns any binary data into a string of 64 safe text characters. It is used to embed images in HTML and CSS as data URIs, to attach files to email, and to send binary data in JSON or XML. Encoding is fully reversible but makes data about 33% larger. Base64 is not encryption and offers no security; anyone can decode it.

Compression
Lossless
Transparency
–
Animation
–
Introduced
–
BASE64 converter

Images become Base64 text when they have to travel inside something that only carries text: an HTML or CSS file with no separate request, a JSON field of an API call, a test fixture, or a single-file report.

When inlining an image helps a page, and when it hurts

Inlining saves a request, which mattered most under HTTP/1.1, when browsers opened only a handful of connections per site. With HTTP/2 and HTTP/3 multiplexing, extra small requests are cheap, so the benefit shrinks while the costs remain: the encoded image cannot be cached separately, it is downloaded again whenever the HTML or CSS changes, and it delays the parsing of the file it sits in.

A sensible rule is to inline only images of a few kilobytes that appear on every page, such as a logo or an icon sprite, and serve everything else as files. Photos almost never belong inline. If what you actually need is a different file type rather than text, the image converter handles that.

Base64 image strengths

  • One self-contained HTML, CSS or JSON file
  • No extra request for tiny icons
  • Safe inside JSON, XML and other text formats
  • Lossless and reversible

Base64 image costs

  • About 33% larger than the binary file
  • Not cached separately by the browser
  • Blocked as images by many email clients
  • Hard to review in code diffs

Image to Base64 questions

What is the difference between Base64 and a data URI?

Base64 is only the encoded characters. A data URI wraps them with a scheme and type, data:image/png;base64, followed by the characters, so a browser knows how to decode and display them. HTML and CSS need the full data URI; most JSON APIs want the plain Base64 part.

How much bigger does an image get as Base64?

Base64 writes 4 characters for every 3 bytes, so the text is about one third larger than the file, plus the short prefix. A 30 KB PNG becomes roughly 40 KB of text. If the HTML or CSS is served gzip-compressed, part of that overhead is won back in transfer.

Can I use a Base64 image in an email signature?

It is unreliable. Gmail does not display data URI images, and several desktop mail programs strip them too, so recipients see a broken icon. Host the image on a web server or attach it, and keep Base64 for web pages and apps.

Should an SVG icon be Base64 encoded?

It works, but SVG is already text. URL-encoding the markup instead of Base64 encoding it usually gives a shorter data URI and keeps it readable. For anything larger than a small icon, a separate SVG file that the browser can cache is the better choice.

Can I convert the Base64 text back to an image?

Yes, the encoding is lossless and fully reversible: decoding returns the exact original bytes. Every programming language ships a decoder, and pasting a complete data URI into a browser's address bar displays the image.

Does encoding change the image quality?

No. Base64 changes how the bytes are written, not the pixels. To make the string shorter, shrink the image first, for example with compress image to 20 KB, and encode the smaller file.