Image to Base64 Converter

Add one or more pictures to the box above, pick how you want the text, and copy it. Each picture is turned into Base64 the moment you add it, so there is no button to press and nothing to wait for. You can get a data URL, the Base64 text only, a ready HTML img tag, a CSS background rule, a Markdown image link or a small JSON object.

Everything happens in your browser. Your pictures are read and encoded on your own device and are not uploaded anywhere. You can add up to 100 pictures at once, each up to 20 MB, in PNG, JPG, GIF, SVG, WebP, ICO, BMP or AVIF, and you can paste a screenshot straight from the clipboard with Ctrl+V.

The switch at the top of the tool turns it around. Choose Base64 → Image, paste Base64 text or a data URL, and the tool turns it back into a picture that you can see and download.

Base64 is a way of writing any file, including a picture, with only 64 safe characters: the capital letters A to Z, the small letters a to z, the digits 0 to 9, and the two signs plus and slash. The equals sign is used at the end as padding. Because these characters pass through almost every system untouched, Base64 lets you put a picture into places that only accept text, such as an HTML file, a stylesheet, a JSON field, an email template or a database column.

The encoding works in groups. Every 3 bytes of the file, 24 bits, are split into 4 pieces of 6 bits, and each piece becomes one of the 64 characters. That is why Base64 text is always about four thirds of the file size, roughly 33% bigger. If the file length is not a multiple of 3, one or two equals signs are added at the end so the text length is a multiple of 4.

Base64 is not encryption and not compression. Anyone can turn the text back into the picture, and the text never makes the picture smaller. It is simply a different way of writing the same bytes, so that they can travel inside text.

A data URL, also called a data URI, is a web address that carries the file itself instead of pointing to a file on a server. Browsers accept it anywhere a normal image address is allowed: in the src of an img tag, in a CSS url(), in JavaScript, and in many apps that take a link to a picture. This is what you get with the Data URL output.

When people ask for an image to Base64 data URL, they usually want to place a small picture into a page or a file without a separate download. The tool writes the correct type for each picture at the start, for example data:image/png;base64, for PNG, data:image/jpeg;base64, for JPG, data:image/webp;base64, for WebP and data:image/svg+xml;base64, for SVG. If the type is wrong, some browsers refuse to show the picture, so the tool always takes it from the file itself.

A data URL has no file name and no separate cache entry. It is part of the text around it, so it is loaded when that text is loaded and cached only together with it. That is the main reason data URLs are great for tiny pictures and a poor choice for large ones, as explained further down.

Base64 text is always about 33% bigger than the file it comes from, because every 3 bytes become 4 characters. A data URL adds a short header, around 22 characters, and an HTML tag or a CSS rule a few more. Line breaks, if a system adds them every 76 characters, add a little more.

Web servers usually send pages and stylesheets gzip or Brotli compressed, and that wins back part of the overhead on the wire, often bringing it down to somewhere between 2% and 10% over the original file. On disk, in a database or in a JSON body that is not compressed, the full 33% applies.

For image to Base64 for HTML, choose HTML img. The tool writes a complete img tag: the data URL goes into src, the alt text you type goes into alt, and the width and height of the picture are added so the browser can reserve the space before the picture is drawn. That stops the page from jumping while it loads. If you leave the alt field empty, the file name without its extension is used, but a short description of the picture is better for screen readers and for search engines.

Paste the tag wherever a normal img tag would go. It works in plain HTML files, in templates of most frameworks, in CMS fields that accept HTML and in single-file reports. Some content systems remove data URLs for safety; if the picture disappears after saving, the system is filtering it and a normal image file is needed.

Keep inline pictures small. A rule of thumb used by many developers is to inline only pictures under about 10 KB, such as icons, logos and simple shapes. For anything larger, a normal file with loading set to lazy is usually faster, because the browser can cache it and load it in parallel. After pasting many tags, HTML Minifier can remove the extra spaces from the rest of the file.

Choose CSS background to get a rule such as background-image with the data URL inside url(). Paste it into a class in your stylesheet or into a style attribute. This is a common way to ship small icons, patterns, arrows, check marks and loading spinners together with the CSS, so they appear the moment the styles apply.

Because the stylesheet is usually cached, the inline pictures are cached with it, which makes CSS a better home for repeated small pictures than HTML. The downside is that the browser cannot start drawing the page until the stylesheet has arrived, so a stylesheet full of large data URLs delays everything. Keep each one small and add only pictures that are really used on most pages.

SVG icons can also be placed in CSS without Base64, as URL-encoded text, which is often a little shorter. URL Encode helps with that. For PNG, JPG, WebP and GIF pictures Base64 is the normal way.

Many APIs ask for a picture as an image to Base64 string: the encoded text placed in a JSON field, often called image, data, file or content. Some want the full data URL, others want only the Base64 part. Read the documentation of the API: if it asks for a separate mime type or media type field, it almost always wants Base64 only.

Choose Base64 only to copy just the encoded text, or JSON to get a small object with the name, the type, the width, the height and the data, which you can adapt to the field names the API expects. JSON Formatter makes long JSON easier to read and check before sending it.

In code, the same thing can be done with built-in functions. In a browser, FileReader with readAsDataURL gives a data URL. In Node.js, reading the file into a Buffer and calling toString with base64 gives the text. In Python, base64.b64encode on the bytes of the file does the same. The tool is useful when you need the result quickly, want to check what a program produced, or want to make the picture smaller before encoding it.

Check the size limits. Many APIs limit the body of a request to a few megabytes, and because Base64 is a third larger than the file, a 4 MB picture can already be too much. Make it shorter first with a smaller longest side or WebP, which often brings photos down to a fraction of their size.

If you need to encode pictures again and again, for example in a build step or on a server, it is worth doing it in code. All common languages have Base64 built in, so no extra package is needed. The short examples below show the usual way in a browser, in Node.js, in Python and on the command line.

Whichever way you choose, remember two things. First, add the right media type when you build a data URL yourself; a JPG must say image/jpeg, not image/jpg. Second, Base64 text from the command line on Linux is broken into lines of 76 characters by default, which must be removed for a data URL, which is why the example uses -w 0. On a Mac, the base64 command writes one line by default.

Some sites use a Content Security Policy, a header that tells the browser where pictures may come from. If the img-src rule does not list data:, the browser refuses every data URL picture on the page, even a correct one, and writes a message about the policy in the console of the developer tools.

If your data URL pictures work in a plain test file but not on your site, check the policy first. Adding data: to img-src allows them. Some security teams prefer not to allow data URLs at all; in that case use normal image files, which are just as fast for anything larger than a tiny icon.

Rich text editors, comment fields and forum software often remove data URLs from what users paste, for the same safety reasons, and some image proxies replace them with an empty picture. That is not a fault in the Base64 text; the place simply does not allow it.

Storing pictures as Base64 in a database is easy, but costs space: every picture takes about a third more room than as binary data, and large text columns slow down queries that read whole rows. For avatars, signatures and thumbnails of a few kilobytes this is usually fine. For photos, a binary column or file storage with only the address in the database is the better design.

The same goes for local storage in the browser, which is limited to a few megabytes on most sites. A handful of photos as data URLs can fill it up, and the browser then refuses to save anything more. Keep stored pictures small, or use IndexedDB, which can hold binary data directly.

Configuration files, translation files and JSON fixtures in a code repository become hard to read and to compare when they contain long Base64 lines. A separate picture file next to them is usually easier to maintain, and version control shows changes to it more clearly.

Image to Base64 for email sounds like a neat trick: put the logo inside the message, and it shows even when remote pictures are blocked. In practice it is unreliable. Many email apps block or strip data-URL images; test before sending. Gmail in particular removes them in many cases, some Outlook versions do not show them, and spam filters can treat large inline Base64 blocks as suspicious.

The more reliable ways are a normal linked image on a web server, or an attachment referenced inside the message with a content ID, which is what most email programs and sending services do when you insert a picture. If you still want to try a data URL, keep the picture tiny, set the width and height, add a clear alt text, and send test messages to every email app your readers use before the real mailing.

Base64 does matter in email behind the scenes: attachments are encoded as Base64 inside the message source. That is handled by the email program, not by you, and it is one reason why an attachment makes a message about a third bigger than the file.

Choose Markdown to get an image link with the data URL inside the round brackets and the alt text inside the square brackets. Image to Base64 for Markdown is handy for notes, README files in private tools, documentation generators and static site builders that render Markdown to HTML, because the picture travels with the text file.

Support depends on the place that shows the Markdown. Many editors and static site generators render data URLs fine. GitHub and some other hosted sites may not render data URLs in their Markdown and show a broken picture or the raw text instead, and very long lines can make the file hard to edit. For such sites, commit the picture as a normal file and link to it.

If you use data URLs in Markdown, keep the pictures very small, give them a real alt text, and preview the page on the site where it will be read before you rely on it.

PNG to Base64 is the most common job on this page, because logos, icons, screenshots and UI graphics are usually PNG files with sharp edges and transparency. Add the PNG, and the data URL starts with data:image/png;base64, and keeps the transparency exactly as it was.

PNG files of photos can be large. If a PNG is a photo or a screenshot with many colours, Make it shorter first with WebP often makes the text a fraction of the length while keeping transparency. JPG makes it shorter still but fills transparent areas with white. To keep a PNG as PNG but smaller, choose a smaller longest side; for pixel-perfect icons, leave the setting on Keep the file.

Before encoding many PNG icons, check whether they really need the full size. An icon shown at 24 pixels does not need to be stored at 512 pixels; choosing 64 px as the longest side is enough for sharp display on high-density screens and can cut the text to a tenth of its length.

SVG pictures are text already, so they are encoded exactly as they are and are never resized or recompressed by the tool. The data URL starts with data:image/svg+xml;base64, and works in img tags and CSS like any other picture.

For SVG there is an alternative to Base64: URL-encoded SVG text inside the data URL, which is often a little shorter and stays readable. Both work in browsers. Base64 is safer when the SVG contains quotes, hash signs or line breaks that would otherwise need escaping. If a program cannot show SVG at all, SVG to PNG turns it into a PNG that you can then encode.

A favicon can also be a data URL. Put it in the href of the link tag with rel icon, and the browser shows it without a separate request. This is handy for single-file HTML pages, internal tools and pages opened from a local file, where no favicon.ico file exists.

Use a small PNG or SVG of 32 or 64 pixels; an ICO file can be encoded too and is kept exactly as it is. Larger favicons only make the page heavier, because the browser shows them at 16 to 32 pixels in the tab anyway.

Image to Base64 from clipboard saves the step of saving a file first. Take a screenshot, or copy a picture in an image editor or a browser, then click anywhere on this page outside a text box and press Ctrl+V, or Cmd+V on a Mac. The picture is added to the list and encoded at once, just like a file.

Screenshots are usually PNG files, often large ones on high-resolution screens. If you only need a small preview, choose a longest side such as 800 or 1200 px and WebP under Make it shorter first before pasting, so the text stays manageable.

Pasting works in current versions of Chrome, Edge, Firefox and Safari. Some browsers only paste pictures that were copied as image data, not files copied in a file manager; if nothing happens, save the picture and add it with Select images instead.

Because Base64 makes the text about a third longer than the file, the best way to get shorter text is a smaller file. Make it shorter first does that before encoding. Keep the file leaves the picture untouched. WebP saves it as WebP, usually the smallest choice for photos and screenshots and it keeps transparency. JPG is small and supported everywhere, but transparent areas become white. PNG is lossless and best for flat graphics.

Longest side scales the picture so its bigger side is at most 2000, 1200, 800, 512, 256, 128 or 64 pixels; smaller pictures are left as they are. For WebP and JPG the quality slider runs from 40 to 100. The default of 85 looks the same as the original for most pictures; lower values give shorter text with some loss of detail.

When you change these settings, the pictures already in the list are encoded again with the new settings, so you can try several and watch the character count change. SVG and GIF pictures are never resized or converted, so animation and vector shapes are kept. For finer control, Compress Image and Resize Image offer more choices; PNG to WebP turns a whole folder of PNG files into WebP files first.

Encoding never changes the picture. Base64 is a lossless way of writing bytes, so when the text is decoded you get exactly the same file back, bit for bit. A PNG stays a PNG with every pixel, a JPG stays the same JPG, and an animated GIF keeps all its frames.

The picture only changes when you ask for it under Make it shorter first. Resizing reduces the number of pixels, and WebP or JPG at a quality below 100 removes some fine detail to make the file smaller. At the default quality of 85 most people cannot see a difference at normal viewing size, but if you need an exact copy, leave the setting on Keep the file with Original as the longest side.

One small detail: when a picture is redrawn for resizing or a format change, information stored next to the pixels, such as camera data, GPS location and colour profiles, is not carried over. That is often welcome, because a data URL in a public page or an API request should not reveal where a photo was taken. With Keep the file and Original size, the file is encoded exactly as it is, including such data.

Add many pictures at once, up to 100 per batch, by selecting them together, dropping a group of files or adding more with Add more. Each picture gets its own row with a small preview, the type, the width and height, the size before and after and the number of characters of the output you picked.

Copy works per picture. To take everything at once, Download all saves one ZIP with a text file for each picture, named after the picture with -base64 and the extension of the output, such as logo-base64.css or photo-base64.json. If two pictures have the same name, a number is added so nothing is overwritten. With a single picture, the button saves the text file directly without a ZIP.

The total line above the list adds up all the pictures, which helps when you have a budget for the size of a stylesheet or an email template. Remove a picture with the small cross, or clear the whole list and start again.

Inline pictures save a request to the server, which mattered a lot in the days of HTTP/1.1. With HTTP/2 and HTTP/3, many small files load in parallel over one connection, so that advantage is smaller today, while the costs stay: a third more bytes, no separate caching, and slower parsing of very long HTML or CSS.

A good rule is to inline only what is tiny, needed immediately and used in one place: a logo in the header of a single-file report, a few UI icons, a placeholder shown while a larger picture loads. Keep larger pictures as normal files with width, height and lazy loading, in a modern format such as WebP.

Measure rather than guess. Open the network panel of your browser's developer tools, check the size of the HTML and CSS before and after inlining, and look at how quickly the first content appears. If the page got slower, move the larger pictures back to files.

A picture inside the code is still a picture for your readers, so it needs the same care as any other. Give every HTML and Markdown image a short alt text that says what the picture shows or does, such as the company name for a logo or Search for a magnifying glass icon. Pictures that are only decoration can have an empty alt text, so screen readers skip them.

Background pictures in CSS are not seen by screen readers at all. If a CSS background carries meaning, such as an icon on a button without a label, add a text label or an aria-label to the element. Width and height on img tags help everyone, because the page does not jump when the picture appears.

The image to Base64 encoder on this page runs in JavaScript in your browser. When you add a picture, the browser reads the file. If you chose to make it shorter, the picture is drawn onto a canvas at the new size and saved as WebP, JPG or PNG with the quality you set. Then the file is read with the browser's own FileReader, which returns the data URL.

The tool checks the type at the start of the data URL and writes the correct one for the file it encoded, then builds the output you picked: it cuts off the header for Base64 only, wraps it in an img tag with alt, width and height for HTML, in url() for CSS, in square and round brackets for Markdown, or into an object for JSON. Quotes and angle brackets in the alt text are escaped so the HTML stays valid.

Pictures that the browser cannot draw, such as many ICO files, are encoded exactly as they are, without resizing. The original file is kept in memory while the page is open, so changing the settings encodes it again from the original and never from an already shrunk copy.

This image to Base64 converter is free to use, with no sign-up, no watermark and no limit on how often you use it. Each batch can hold up to 100 pictures of 20 MB each, and you can clear the list and start again as often as you like.

Because the work is done by your own device, there is no queue and no upload time. Small pictures are encoded instantly; even a batch of large photos usually takes only a few seconds on a computer. Your choice of output and settings is remembered in your browser for the next visit.

Image to Base64 decode means the reverse direction: you have the text and want the picture back. Switch the tool to Base64 → Image, paste the text and press Decode to image. You see a preview, the file type, the width and height and the size, and you can download the picture as a file.

The decoder is forgiving. It accepts a full data URL or the Base64 text alone, line breaks and spaces anywhere, quotes or brackets around the text copied from code, and URL-safe Base64 that uses - and _ instead of + and /. Missing equals signs at the end are added automatically.

The file type is detected from the decoded bytes, not only from the header. PNG, JPG, GIF, WebP, AVIF, BMP, ICO and SVG are recognised from their first bytes, so a data URL with a wrong type still gives the right file with the right extension. If the text turns out to be a PDF, it is offered as a PDF. For a page that only decodes, see Base64 to Image; for Base64 of any text, Base64 Encode and Decode.

Your pictures are not uploaded. Reading the file, making it smaller, encoding it and decoding text all happen in your browser, on your own device. No copy of your pictures or of the Base64 text reaches our servers.

That matters, because Base64 strings often end up in places with private data: screenshots with account details, signatures, ID scans for a form, pictures for a private API. When you close the page, the pictures and the text are gone from it. Only your choice of settings is remembered in your browser.

To turn Base64 back into files on a page made only for that, use Base64 to Image. For text, JSON or other data that is not a picture, Base64 Encode and Decode converts both ways.

To make pictures smaller before encoding, Compress Image and Resize Image give more control, and PNG to WebP converts PNG files to WebP in one go. JSON Formatter and HTML Minifier help with the code around your Base64 text. All our picture tools are listed under Image Tools.