Image to Base64 Converter
Turn an image into a Base64 data URI for HTML, CSS or JSON, and back. Everything runs locally with zero file uploads.
- In
- PNG · JPEG · WebP · GIF · SVG · ICO · Base64
- Out
- Base64 · data URI · HTML · CSS · image file
Drop an image to convert to Base64
PNG, JPEG, WebP, GIF, AVIF, SVG and more. You can also paste an image from the clipboard. It never leaves your device.
Convert an image to Base64, and Base64 back to an image
This image to Base64 converter turns a PNG, JPEG, WebP, GIF or SVG into a Base64 string and a data URI, and writes the snippets you actually paste: an HTML img tag, a CSS background-image rule, Markdown and a JSON string. It also works in reverse: paste a data URI or raw Base64 to see the image, check its real type and download it. The image is read on your device and never uploaded.
How to convert an image to Base64
- Drop an image on the page, choose one, or paste it from the clipboard with Ctrl/⌘ + V.
- Check the preview, dimensions and sizes. For a photo, turn on Re-encode as WebP to make the string smaller; for an SVG, keep URL-encoded SVG on.
- Copy the form you need: raw Base64, the data URI, an HTML
<img>tag, a CSSbackground-image, Markdown or a JSON string. - To go the other way, switch to Base64 → Image, paste the string and download the image or send it to another tool.
What a data URI is
A data URI puts a file's contents directly into a URL: data:image/png;base64,iVBORw0KGgo…. The part before the comma names the media type and says the data is Base64-encoded; the rest is the image itself. Anywhere a browser accepts an image URL — an src attribute, a CSS url(), a Markdown image — it accepts a data URI, and the image arrives without a separate request.
The trade-off is size. Base64 makes data about 33% larger, and an inlined image cannot be cached on its own: it is downloaded again with every copy of the HTML or CSS that contains it. Inlining pays off for small images — icons, tiny logos, placeholders, images in HTML emails or single-file documents — and costs more than it saves for photos of hundreds of kilobytes.
Which snippet to use
- Raw Base64
- Just the encoded bytes, for APIs and JSON fields that expect Base64 and store the type separately.
- Data URI
- The complete data: URL, ready for any place that takes an image URL.
- HTML <img>
- An img tag with the data URI, an alt text from the file name and the image's width and height, which prevents layout shift.
- CSS background-image
- A declaration for a stylesheet. Good for small repeated decorations; avoid it for large images in critical CSS.
- Markdown and JSON
- An image in Markdown syntax, and the data URI as a properly quoted and escaped JSON string.
SVG: URL-encoding beats Base64
SVG is text, so it does not need Base64 at all. Percent-encoding only the few characters a URL cannot hold, and turning double quotes into single ones, gives a data:image/svg+xml,… URI that is usually 15–30% smaller than the Base64 version, compresses better with gzip and stays readable. That is the default for SVG files here; turn it off if a system insists on Base64.
For raster images, re-encoding to WebP before converting often shrinks the string by half or more for photos and screenshots. It uses your browser's own encoder; if the browser cannot write WebP, the tool tells you and keeps the result it got. For more control over format and quality, use the image converter first.
Base64 to image
Paste a full data URI, raw Base64, or even a whole <img> tag or CSS rule, and the tool extracts the image, previews it and shows its size and dimensions. The type is read from the image's own first bytes rather than trusted from the label, so a JPEG labelled as PNG is downloaded as what it really is. For Base64 that holds something other than an image, such as a PDF or a ZIP, use the Base64 decoder, which handles any file type.
Frequently asked questions
- How do I convert an image to Base64?
- Drop or paste the image into the converter. The Base64 string, the data URI and ready-made HTML, CSS, Markdown and JSON snippets appear at once, each with a copy button.
- How do I convert Base64 to an image?
- Switch to Base64 → Image and paste the data URI or raw Base64 string. The image is previewed straight away and can be downloaded with the correct extension.
- Does Base64 make images bigger?
- Yes, by about a third, because every three bytes become four characters. Inlining is worth it for small images that save a request, not for large photos.
- How do I use a Base64 image in CSS?
- Use it as a URL: background-image: url("data:image/png;base64,…");. Copy the CSS snippet and it is already in that form.
- Should I Base64-encode SVG?
- Usually not. A URL-encoded SVG data URI is smaller than the Base64 one and stays readable, and every modern browser supports it. The tool produces it by default for SVG files.
- Do Base64 images work in emails?
- Support varies: many webmail clients, including Gmail, block data URI images. For email, attached images referenced with cid: or hosted images are more reliable.
- Is my image uploaded?
- No. The image is read and encoded in your browser, and nothing is sent to a server.