Img Hut How to convert an image to Base64
- Choose an image, drop it onto the page or paste it from the clipboard. The Base64 output appears immediately.
- Pick the output format: a complete data URI, raw Base64 only, a ready-made CSS
background-imagerule, or an HTML<img>tag. Switching the format updates the text instantly. - Click Copy to clipboard, or Download as .txt if the string is too long to handle comfortably.
How the encoder works
Unlike the other tools on this site, the Base64 converter does not redraw your image. It reads the original file with the browser’s FileReader.readAsDataURL() function, which returns the file as data:<type>;base64,<data>. Base64 represents every 3 bytes of the file with 4 characters from a 64-character alphabet (A–Z, a–z, 0–9, “+” and “/”), adding “=” as padding at the end when needed.
Because the encoding is exact, decoding the text gives back an identical copy of the file, byte for byte. That has two consequences. First, the image is not compressed or altered in any way; if you want a smaller string, shrink the image first with Compress Image or Resize Image. Second, any metadata in the file, such as EXIF camera details or GPS coordinates in a phone photo, is included in the Base64 text too.
The text is always about a third larger than the file: 4 characters for every 3 bytes, plus the short data:image/...;base64, prefix in the data URI formats. The line under the output shows the exact number of characters and the overhead for your file.
The four output formats
- Data URI –
data:image/png;base64,iVBOR.... Use it anywhere a URL is accepted: ansrcattribute, a CSSurl(), or JavaScript that loads an image. - Raw Base64 – only the encoded data, for JSON APIs, databases and configuration files that expect plain Base64 and store the file type separately.
- CSS background-image – a complete declaration such as
background-image: url("data:image/png;base64,...");to paste into a style rule. - HTML <img> tag – an image element with the data URI as its source. Fill in the empty
altattribute with a short description for screen readers, or leave it empty if the image is purely decorative.
When inline images make sense, and when they do not
Embedding an image as Base64 saves the browser a separate request for the file. That mattered a lot when browsers could fetch only a few files at a time; with modern HTTP/2 and HTTP/3 connections the benefit is much smaller, while the costs remain:
- Good fits: tiny icons and interface graphics of a few kilobytes, single-file HTML documents or reports that must work offline, test fixtures, and APIs that exchange images inside JSON.
- Poor fits: photos and large graphics. The text is about 33% bigger than the file, it cannot be cached separately from the HTML or CSS that contains it, and large inline images delay rendering because the stylesheet or page must be fully downloaded and parsed first.
- Email: support for data URI images differs between email clients, and several popular ones do not display them. Test in the clients your audience uses before relying on inline images in a newsletter or signature.
A practical rule of thumb: inline images only when they are a few kilobytes at most, and link to regular image files for everything else.
A tip for SVG files
SVG images are text already, so Base64 makes them about a third bigger and unreadable. In CSS you can often use a URL-encoded SVG instead, for example url("data:image/svg+xml,%3Csvg xmlns=..."), which is usually shorter than the Base64 version and still easy to edit. Base64 remains the simplest option when a system specifically expects Base64 data.
Limitations
- This tool encodes images to Base64; it does not decode Base64 back to an image. Most programming languages have a built-in decoder, such as
atob()in JavaScript orbase64.b64decode()in Python. - Files larger than a few megabytes produce very long strings that can make the text box and the clipboard slow; the tool warns you above 2 MB.
- One file at a time.
Frequently asked questions
Why is the Base64 string larger than my image file?
Base64 uses 4 text characters for every 3 bytes of data, so the encoded text is about 33% larger than the file, plus a short prefix in the data URI formats.
What is the difference between a data URI and raw Base64?
A data URI adds a prefix with the file type, for example data:image/png;base64, so browsers can use it directly as an image URL. Raw Base64 is only the encoded data, which is what many APIs and databases expect.
Does Base64 encoding compress or change my image?
No. The file is encoded byte for byte, including any metadata. To get a shorter string, compress or resize the image before encoding it.
Is Base64 a form of encryption?
No. Base64 is an encoding, not encryption. Anyone can decode the text back into the original image, so it does not protect private pictures.
Should I embed images as Base64 in my website?
Only small ones, such as icons of a few kilobytes. Large inline images make HTML and CSS files heavier, cannot be cached separately and can delay page rendering.
Can I convert SVG files?
Yes. For use in CSS, a URL-encoded SVG data URI is often shorter than Base64, but Base64 works everywhere a data URI is accepted.
Is my image uploaded to a server?
No. The file is read and encoded by your browser, and the image and the resulting text stay on your device.
Related tools
Compress Image
Reduce JPG, PNG or WebP file size by re-encoding at the quality you choose, with a before-and-after comparison.
Favicon Generator
Create favicon.ico, 16/32/48 px PNG favicons, an Apple touch icon and 192/512 px app icons.
Resize Image
Change width and height in pixels or by percentage, with an aspect-ratio lock and smooth downscaling.
Related guides
- How to Compress Images for Your Website Without Visible Quality Loss – A practical workflow: size images to how they are displayed, pick a format, find the lowest quality that still looks right, and serve the result with the right HTML attributes.