Image to Base64 Converter

Base64 encoding converts binary image data into a string of printable ASCII characters. This lets you embed image data directly inside HTML, CSS, JSON and other text-based formats without needing a separate image file. The encoded string can be used anywhere a file URL would normally go, such as the src attribute of an img element or the url() value in CSS.

This tool reads the image's dimensions by decoding it a second time, separately from the base64 encoding itself. For some SVG files and a few other unusual images, that secondary decode can fail even though the base64 encoding succeeded perfectly. When that happens, width and height fall back to 0. The image info strip on this page hides the dimensions when that occurs, but the HTML img tag output does not, it will show width="0" height="0" exactly as generated. Always check the width and height values before pasting the HTML snippet directly, an image with 0x0 dimensions renders as invisible.

Raw base64 is just the encoded string, for example iVBORw0KGgo... A data URI is the full string including the MIME type prefix: data:image/png;base64,iVBORw0KGgo... You need the full data URI format to use the string directly in an img src attribute, CSS url(), or anywhere a browser needs to render the image. Raw base64 is used when you are storing the string in JSON, a database, or an API payload where you will add the prefix yourself later.

No. Base64 is a lossless encoding method. It represents the exact binary data of the original file as text characters. Decoding the base64 string produces the original file byte for byte. No pixels are changed and no quality is lost.

Base64 encoding converts every 3 bytes of binary data into 4 text characters. This means the encoded output is always approximately 33% larger than the original binary file. A 100KB image becomes roughly 133KB as a base64 string. This is an inherent property of the encoding format and applies to all base64 encoded data.

Base64 is best for small images under 10KB such as icons, small logos, favicons and UI sprites. For these, embedding base64 eliminates an HTTP request which can make the page faster. For larger images, base64 is usually a bad choice because the 33% size overhead makes files larger, the data is not cached separately by the browser, and the inline content blocks page rendering. Large images should be served as separate files from a CDN.

Yes. A Download .txt button next to Copy to clipboard saves whichever output tab is currently active, raw base64, data URI, HTML tag, or CSS rule, as a plain text file named after your original image.

No. The encoding uses the browser's built-in FileReader API which reads and encodes the file entirely on your device. Nothing is sent to any server. You can disconnect from the internet after the page loads and the tool still works.

PNG, JPEG, WebP, GIF, SVG, BMP and ICO are all supported. The output data URI includes the correct MIME type for each format so the browser knows how to render it. HEIC, AVIF and TIFF are not supported here, convert to one of the supported formats first if you're starting from one of those.