Image to Base64 Converter — Encode Images for HTML, CSS & Markdown

Drop any image and get its Base64 string with ready-made snippets for <img> tags, CSS background-image, Markdown, and raw data URIs. Optionally re-encode to JPEG or WebP first to shrink the output. Everything runs in your browser — nothing is uploaded.

Drop images here, or choose files

JPEG, PNG, WebP, GIF, BMP, SVG — multiple files supported

What is image to Base64 conversion?

Base64 is a way of representing binary data — like an image file — as a long string of plain ASCII characters. When you convert an image to Base64, you get a single text string that can be embedded directly inside an HTML page, a CSS stylesheet, a Markdown document, a JSON payload, or any other text-based format that does not natively handle binary data. The most useful form of the output is the data URI: a string that starts with data:image/png;base64, followed by the encoded characters, ready to drop into an <img> tag or a background-image rule without any extra HTTP request.

This converter accepts JPG, PNG, WebP, GIF, BMP, and SVG. Everything happens in your browser — your image bytes never leave your device — and you can optionally re-encode the input to JPEG or WebP before encoding, which typically cuts the Base64 output by 50–80%.

When should you use a Base64-encoded image?

Inlining an image as Base64 is useful in a handful of specific situations:

  • Tiny icons, decorative shapes, and 1×1 spacers embedded directly inside CSS, so the browser does not have to make a separate HTTP request for them.
  • Critical above-the-fold images that need to render on the very first paint, before any other resources have loaded.
  • Self-contained Markdown notes and documentation that have to travel as a single file with no external assets.
  • JSON or XML payloads sent between systems that only carry text.
  • Email templates, browser extensions, and offline apps where pointing at a hosted image is unreliable or impossible.
  • Data URIs in CSS for SVG icons that need to be themed with filter or sized with background-size.

When you should NOT use Base64

Base64 has real costs. The encoded string is roughly 33% larger than the original image bytes — three bytes of binary become four characters of ASCII — and inlined images cannot be cached separately by the browser, so they are downloaded again on every page load. For larger images or anything reused across pages, a normal <img src="..."> or url(...) pointing at a hosted file is faster and lighter than a Base64 data URI. As a rough rule, only inline images smaller than about 10 KB, and only when removing the extra HTTP request actually matters.

How to convert an image to Base64

  1. Drop your image on the upload area at the top of this page, or click “choose files” to pick from your device. Multiple files are supported — each becomes its own card.
  2. Pick the snippet you need: Raw Base64, full Data URI, ready-made HTML <img> tag, CSS background-image rule, or Markdown ![]().
  3. Optionally re-encode to JPEG or WebP and drag the quality slider to shrink the Base64 output before copying.
  4. Click “Copy” on the snippet tab you want and paste it into your HTML, CSS, Markdown, JSON, or wherever you need it.

Everything runs locally in your browser. Your image is not uploaded to any server, the page works offline once it has loaded, and there is no file-size limit imposed by the tool itself.

Image formats supported by this converter

PNG to Base64

PNG is the most common format for inlined images because it is lossless and supports transparency, which is essential for logos and icons. Drop a PNG into the converter and you get a data:image/png;base64,… string. PNGs cannot be re-encoded by this tool (re-encoding rarely helps for PNGs intended for inlining), but if you need a smaller file, run it through the PNG compressor first and then come back here.

JPG / JPEG to Base64

JPEG is the right format for photographs. The converter outputs a data:image/jpeg;base64,… data URI. Choose “JPEG” from the re-encode dropdown to recompress the photo with mozjpeg before encoding — this usually cuts the Base64 output in half at quality 80–85 with no visible loss in quality.

WebP to Base64

WebP almost always wins on size compared to JPEG and PNG at the same perceived quality, and modern browsers support it everywhere. If you do not need to support older email clients or very old browsers, switching the re-encode dropdown to “WebP” is the single biggest move you can make to shrink the Base64 output. The data URI prefix is data:image/webp;base64,….

SVG to Base64

SVG is plain XML, so encoding it as Base64 is mostly used to embed an SVG inside a CSS background-image: url(...) rule. The converter preserves the original SVG bytes exactly. Note that for CSS backgrounds, a URL-encoded SVG (using %20 instead of a space) is often shorter than Base64 — but Base64 is the more compatible default and works in every CSS engine.

GIF to Base64

The converter preserves animated GIFs exactly, so the Base64 string carries the full animation. Re-encoding is intentionally locked off for GIFs because re-encoding to JPEG or WebP would discard the animation. The output prefix is data:image/gif;base64,….

BMP to Base64

BMP is rarely worth inlining as-is — the format is uncompressed, so the Base64 string is enormous. The converter accepts BMP input but you should almost always re-encode it to JPEG or WebP first to bring the size down by 90% or more before copying the Base64.

What is a data URI?

A data URI is a special URL scheme that carries the entire content of a resource inside the URL itself, instead of pointing at a remote file. The structure is data:<mime>;base64,<data> — for example data:image/png;base64,iVBORw0KGgoAAAA…. Browsers treat a data URI exactly like any other image URL: it works in <img src="...">, in CSS background-image: url(...), in <link rel="icon">, and in JavaScript fetch calls. The “Data URI” tab in this tool emits the full data URI with the correct MIME type prefix already included, so you can paste it directly without editing.

How to use a Base64 image in HTML, CSS, and Markdown

The “HTML”, “CSS”, and “Markdown” tabs in this converter generate the exact snippet you need for each context:

  • HTML: <img src="data:image/png;base64,…" alt="…" width="…" height="…"> — drops directly into any HTML file.
  • CSS: background-image: url("data:image/png;base64,…"); — paste into any selector.
  • Markdown: ![alt text](data:image/png;base64,…) — works in any Markdown renderer that supports inline images, including GitHub READMEs, Obsidian notes, and most static-site generators.

Why re-encoding to JPEG or WebP shrinks the Base64 string

The size of the Base64 output is determined by the size of the source image bytes — the encoder cannot compress what is already there, it can only express it as text. Modern formats like WebP and well-tuned JPEG remove visual redundancy from the image far more efficiently than older formats or unoptimized exports do. A 1.2 MB photo from a phone camera typically becomes a ~320 KB WebP at quality 85 with no perceptible difference, which translates directly to a 73% smaller Base64 string. The live “saved %” badge in this tool updates as you drag the quality slider so you can see exactly how much you are gaining (or losing) at each setting.

Is it safe to convert sensitive images here?

Yes. The conversion happens entirely inside your browser using the standard FileReader API and, when re-encoding is enabled, the mozjpeg or libwebp encoder compiled to WebAssembly. Image bytes never leave your device, no analytics is fired on the file you drop, and the tool keeps working if you disconnect from the internet after the page has loaded. If you want to also shrink the original file before encoding, run it through the JPEG compressor, the PNG compressor, or the WebP compressor — those tools are also browser-only and run in the same private way.

If Base64 is not what you actually need, these companion tools cover the adjacent jobs:

FAQ

Frequently Asked Questions

Base64 is a way of representing binary data — like an image file — as a long string of plain ASCII characters. The encoded string can be embedded directly inside an HTML file, a CSS stylesheet, a Markdown document, a JSON payload, or any other text-based format that does not natively support binary data. The most common form for images is the data URI: a string that starts with data:image/jpeg;base64, followed by the encoded characters, ready to drop into an img tag or a background-image rule.

The most common reasons are: (1) embedding small images directly inside HTML or CSS so the browser does not need to make a separate HTTP request, which can be useful for tiny icons, decorative shapes, or critical above-the-fold images on first paint; (2) inlining images into Markdown notes or documentation that has to be self-contained; (3) carrying images inside JSON or XML payloads sent between systems that only handle text; (4) including images in email templates or browser extensions where external image hosting is not desirable.

No. Base64 strings are roughly 33% larger than the original image bytes, and inlined images cannot be cached separately by the browser, so a Base64 image is downloaded again on every page load. The right uses are small assets (under ~10 KB), one-off decorative pieces, and images that genuinely benefit from zero extra requests. For larger images or anything reused across pages, a normal img src or CSS url() pointing at a hosted file is faster and lighter.

Base64 inflates the byte count by about 33% — three bytes of binary become four characters of ASCII. A 100 KB JPEG becomes roughly a 133 KB Base64 string. The tool shows the exact character count next to each output so you can decide whether it is small enough to inline. If the size is too large, switch the format to JPEG or WebP and lower the quality — the live size readout updates as you drag the slider.

Because the original file is often larger than it needs to be for inlining. Re-encoding the image to JPEG or WebP at a moderate quality (around 80–85) typically cuts the byte count by 50–80%, which translates directly into a smaller Base64 string. WebP almost always wins on size for photographs at the same perceived quality. The "Keep original" default leaves the image bytes untouched if you need an exact representation.

No. Everything runs in your browser using the standard FileReader API and, when re-encoding is enabled, the mozjpeg or libwebp encoder compiled to WebAssembly. The image bytes never leave your device, no analytics is fired on the file, and the tool works offline once the page has loaded. The same applies to the optional re-encode — the WebAssembly module runs locally.

JPEG, PNG, WebP, GIF, BMP, and SVG are accepted on input. Re-encoding is available for JPEG and WebP output; PNG, GIF, and SVG are processed in "Keep original" mode only because re-encoding them rarely helps for inlined images, and animated GIFs would lose their animation. The Base64 output and all five snippet variants work for every supported input format.