Is there a file size limit for Base64 conversion?

There is no hard limit in ZeroPNG since all processing happens in your browser. However, Base64 strings are ~33% larger than the original binary, so embedding large images (above ~100KB) in CSS or HTML is not recommended for performance, it inflates your stylesheet or page size.

A data URI is a URL prefixed with data: that encodes file content inline instead of pointing to an external resource. For images, the format is: data:[media-type];base64,[encoded-data]. It lets browsers render an image without a network request, which can improve performance for small icons or favicons.

Tool

Image to Base64

Convert PNG, JPG, WebP, SVG, and GIF to Base64 data URIs. Output as raw, Data URI, CSS, HTML, Markdown, or JSON - all in your browser.

No uploadsNo trackingWorks offlineCanvas · FileReader

Drop images here

or browse files - PNG, JPG, WebP, AVIF and more

PNGJPGWebPSVGGIFAVIF

How it works

From image to code in three steps

Drop an image, pick the output format that fits your code, and copy. Nothing is uploaded anywhere.

Drop your image

Pick any PNG, JPG, WebP, SVG, or GIF. There is no file size limit since nothing leaves your browser.

PNGJPGWebPSVGGIF

Choose an output format

Pick from raw Base64, Data URI, a CSS background rule, an HTML img tag, Markdown image syntax, or a JSON value. Each tab shows ready-to-use code.

CSSHTMLMarkdownJSON

Copy and paste

Hit the copy button and paste straight into your code. No CDN, no file hosting, no extra HTTP requests needed.

Copy to clipboard

Output formats

Six ready-to-use formats

Each tab in the tool gives you a different output. Here is when to reach for each one.

Raw Base64

Just the encoded string with no prefix. Use this when you are assembling the wrapper yourself or passing the value to an API that expects raw data.

Output looks likeiVBORw0KGgoAAAANSUh...

Data URI

A self-contained image URL you can drop directly into an src attribute, a CSS url(), or anywhere a URL is expected.

Output looks likedata:image/png;base64,...

CSS

A complete background-image property ready to paste into a stylesheet. Good for icons and decorative elements where you want to avoid a network request.

Output looks likebackground-image: url("data:...");

HTML

A full img tag with the data URI as the src. Paste it into any HTML file and the image renders without needing an external file.

Output looks like<img src="data:..." />

Markdown

Markdown image syntax with the data URI inline. Handy for README files or documentation that needs an embedded screenshot.

Output looks like![alt](data:...)

JSON

The data URI wrapped in a JSON object. Useful for API payloads, config files, or anywhere you are passing image data as structured data.

Output looks like{"image": "data:..."}

FAQ

Frequently asked questions

Common questions about Base64 encoding and data URIs.

Files never leave your device

Works without an internet connection

Six output formats in one click

What is a Base64 image?

How do I use a Base64 image in CSS?

Is there a size limit?

What is a data URI?

Should I use Base64 for all my images?

Does it work with SVG files?

Also try

Image compressor Image Converter HEIC Converter Remove EXIF data