Image to Base64 Converter

Turn an image into text you can paste, and that text back into an image

The image to Base64 converter turns an image file such as PNG, JPG, GIF, WebP or SVG into text in the form data:image/png;base64,… (a Data URL), and turns Base64 text back into the original image. Add an image to the left box of the workbench above and the Base64 appears in the right box; paste Base64 into the right box and the image appears on the left. There is no mode to choose.

The result can be copied in five formats: Data URL, Base64 only, HTML <img>, CSS background-image and Markdown. The size scale below also shows how much bigger the text is than the file, and whether build tools such as Vite and webpack inline a file of that size by default. Files are never uploaded to a server; they are read only inside this browser.

When would you use it?

Base64 rewrites a file made of 0s and 1s using only 64 characters. Once an image is text, you can place it anywhere that accepts text.

• Put a small icon straight into CSS or HTML: use it when you want to avoid one extra file request for a single icon. This is the same reason build tools turn small images into Data URLs automatically.
• Make a one-file document: for reports, handouts or offline demos where sending a single HTML file must not break the pictures, put the images inside the text.
• Send an image in JSON or an API: JSON holds only text, so the image is turned into Base64 and carried in one field. To check which picture a stored value is, turn it back.
• Check Base64 left in logs or databases: if you find a long string starting with iVBORw0KGgo… in an error log or a database, pasting it is enough to see what picture it is.

How to use the converter

1. Click Choose images or drag images onto the workbench. A copied image can be added with Ctrl+V (⌘+V on Mac) or the Paste button. Up to 20 can be added at a time, and the numbers below let you view them one by one.
2. Use the format buttons at the top right to pick the format that fits where you will paste it. For SVG you can choose between URL encoding and Base64, and each button shows its character count.
3. Click Copy or Save. If you added several images, Copy all appears, and with CSS selected it makes one class per file name.
4. To go the other way, paste Base64 or a data: URL into the right box. A whole HTML or CSS snippet works too, since the tool finds the data: URL inside it, and you can download the restored image with Save image.

The icon, photo and logo shown on the first screen are example files. The photo example deliberately contains a location near Seoul City Hall as its shooting location. Click the photo example to see how the location warning appears in the photo info field.

Output formats and where to paste them

The HTML format includes the image's real width and height as width and height. The browser can reserve the space before it reads the image, so the page does not jump. The alt text receives the file name, so it is better to rewrite it as a sentence that describes the image.

Why Base64 makes a file about one third bigger

Computer files are made of 8-bit units (bytes), while one Base64 character represents only 6 bits. That is why RFC 4648 defines that 3 bytes (24 bits) are split into four 6-bit pieces and written as 4 characters. The bit strip on the workbench above shows this process with the first 6 bytes of your file. If the last group has fewer than 3 bytes, the leftover bits are filled with 0 and the empty character slots are written as =.

Base64 characters = 4 × ⌈original bytes ÷ 3⌉ · Data URL characters = that value + the prefix (data:image/png;base64,, 22 characters)

However, web servers usually compress text with something like gzip before sending it. Base64 uses only 64 symbols, so compression removes most of the added size. The gzip transfer bar on the size scale is measured by compressing your current result with the browser's built-in compression feature (CompressionStream). Below are results for the three example files measured in Chrome. Compression programs differ between browsers, so the numbers can vary by a few bytes.

In other words, once compressed, Base64 PNG and JPG arrive at a size close to the original. Even so, an image embedded as Base64 downloads every time the document is fetched, and the browser cannot store the image file separately and reuse it. That is why it is generally used only for small images.

Up to what size should you inline a Data URL?

There is no fixed rule, but the defaults of popular build tools are a realistic guide. The ticks on the size scale compare your original file size against these two defaults.

• Under 4,096 bytes: both tools inline it as a Data URL by default. Icons and small patterns that are not reused many times fall here.
• 4,096 to 8,096 bytes: the tools disagree in this range. The example icon (6,960 bytes) is here: the same file stays a separate file in Vite but becomes text in webpack.
• Over 8,096 bytes: both tools keep it as a separate file. Large images such as photos should stay files so the browser can store them separately and reuse them.

On a site that uses a Content Security Policy (CSP), img-src must list data: separately before Data URL images will show. CSP Level 3 requires schemes other than http and https to be listed explicitly.

For SVG, URL encoding is often shorter than Base64

SVG is already an image made of text, so there is no need to convert it to Base64. Chris Coyier of CSS-Tricks summarized that when SVG is placed in a Data URL, Base64 makes it about 133 to 136% of the original, and leaving it as plain text also compresses better. When you add an SVG, this tool counts the characters for both methods and picks the shorter one first.

• URL encoding turns #, <, >, %, line breaks and non-ASCII characters into percent escapes (such as %23). In particular, if # is left as is, everything after a color value is cut off as the fragment of the address and the picture breaks.
• Double quotes around attribute values become single quotes, so the result can go as is inside HTML src="…" or CSS url("…"). If an attribute value already contains a single quote, it is not changed and is left as %22.
• Spaces, =, : and / are left as they are. Inside a quoted HTML attribute or a CSS url(), the browser reads these characters as they are. In the Markdown format, the address is wrapped in <…> when it contains a space.

When turning Base64 back into an image

Most file formats begin with fixed bytes, so the first few Base64 characters are enough to guess the format. Even without the data:image/… prefix, this tool identifies the format from the start of the decoded bytes, and it tells you when the format named in the prefix differs from the actual content.

Pasted text often carries extra clutter. The tool repairs the cases below on its own and notes what it fixed under the image box.

• Line breaks and spaces: email (MIME) requires Base64 to be broken into lines of at most 76 characters, so text copied from a raw message contains line breaks.
• URL-safe Base64: a variant that uses - and _ instead of + and / so it fits in an address (RFC 4648 §5). The tool reads it after switching to the standard characters.
• Missing padding: if the trailing = was left out, it is filled in to fit the length. An = turned into a percent escape, such as %3D, is decoded as well.
• A data: URL inside text: even if you paste whole HTML <img>, CSS url() or Markdown text, the tool finds and reads the first data: URL and tells you how many there were.

On the other hand, a length that leaves a remainder of 1 when divided by 4 cannot be repaired. Base64 carries 3 bytes in every 4 characters, so a single leftover character happens only when the end was cut off while copying.

Common mistakes

• Thinking Base64 is encryption: Base64 is a notation anyone can reverse. Never use it to hide passwords or personal information.
• Thinking it is compression: Base64 actually makes data about one third bigger. To shrink a file, compress the image or convert it to WebP first, then convert.
• Thinking photo info is removed: Base64 carries the bytes over unchanged, so the shooting location and device details in Exif stay. This tool shows in the photo info field whether a JPEG, PNG or WebP has Exif and location data.
• Pasting a Data URL into the address bar: for security, modern browsers block navigating to a data: URL from the address bar. To see the content, paste it into the right box of this tool.
• Writing image/jpg: the standard type name for JPEG is image/jpeg. If a prefix says image/jpg when turning back, the tool tells you, and a format button rewrites it with the standard name.

Limits and cautions

• Each file can be up to 10 MB (10,485,760 bytes), and up to 20 can be added at a time. If the result is over 400,000 characters, the text box shows only the start and end, while copy and save use the full text. KB and MB on screen use 1,024-byte units.
• The tool does not download pictures from an image address (URL). Save the image first, then add it.
• HEIC photos can be converted, but they can be previewed only in Safari 17 or later on macOS and iOS. TIFF and JPEG XL may also fail to preview depending on the browser.
• Bytes are carried over as they are, without resizing or changing the format. An animated GIF or WebP still moves after turning it back.
• The gzip transfer bar is the value from compressing this result alone. On a real page it is compressed together with the surrounding text, so the number can differ a little, and in a browser without the compression feature the bar is not shown.
• By browser, Chromium and Firefox accept data: URLs up to 512MB and Safari up to 2048MB. This tool's 10 MB limit is far smaller than that, but it is already large for a real document.

Reference date The Base64 and data: specifications, the Vite and webpack defaults, and browser length limits and compression support were checked against the original sources on 2026-10-20. Build tool defaults can change when a new version is released.

Sources

• 01RFC 4648: The Base16, Base32, and Base64 Data Encodings24 bits into 4 characters (§4), = padding (§3.2), characters outside the alphabet (§3.3), URL-safe base64url (§5)
• 02RFC 2397: The "data" URL schemedata: URL syntax: an optional media type, an optional ;base64 flag, a comma, then the data
• 03MDN: data: URLstext/plain when the type is omitted, length limits (Chromium and Firefox 512MB, Safari 2048MB), top-level navigation blocked
• 04Vite: Build Options — build.assetsInlineLimitDefault 4096 (4 KiB); assets smaller than this are inlined as Base64 URLs
• 05webpack: Module — parser.dataUrlConditionmaxSize default 8096 bytes; files of this size or smaller are inlined
• 06webpack: Asset ModulesThe asset type inlines files smaller than 8kb
• 07CSS-Tricks: Probably Don't Base64 SVG (2014-10-21)Base64 makes SVG 133 to 136% of its size; plain text compresses better
• 08W3C: Content Security Policy Level 3§1.3 Schemes other than http and https must be named explicitly in the policy
• 09RFC 2045: MIME Part One§6.8 Base64 lines are at most 76 characters
• 10MDN: CompressionStreamBuilt-in gzip compression in the browser; supported by all major browsers since May 2023
• 11Can I use: HEIF/HEIC image formatShown only for Safari 17 or later (macOS and iOS)

Frequently asked questions

Tools to use with it