Free Image to Base64 Data URI Converter

This free tool converts an image (PNG, JPG, WebP, SVG) or a small file such as a font into a Base64 data URI you can paste directly into CSS, an HTML img tag, or a Shopify Liquid template — removing one network request. It runs with the browser's FileReader, so the file is never uploaded. You can copy the raw data: URI or a ready-made background-image CSS declaration, and it shows you how much larger the encoded string is than the original file.

How to use image → data uri

1. Drop a file onto the box or click to choose one (up to 3 MB — data URIs are about 33% larger than the source).
2. The Base64 data URI is generated instantly, with a preview for images.
3. Click 'Copy data URI' for the raw string, or 'Copy as CSS' for a background-image rule.
4. Paste it into your stylesheet, template, or markup.

Common uses

• Inlining a small icon or logo in CSS to save an HTTP request
• Embedding an SVG in a Shopify theme where you can't upload a new asset
• Putting a placeholder or loading image directly in a component
• Sending a self-contained HTML email with the image baked in
• Embedding a tiny background texture in a single CSS file

Frequently asked questions

When should I use a Base64 data URI instead of a normal image file?

For very small images (a few KB) it removes a network round-trip, which can speed up first render. For larger images it is usually worse, because Base64 adds ~33% size and the data can't be cached separately.

Is the image uploaded to convert it?

No. The browser reads the file locally with FileReader and encodes it in memory. Nothing is sent anywhere.

What is the size limit?

This tool caps input at 3 MB because data URIs grow by about a third and very large inline strings bloat your HTML or CSS.

Can I convert an SVG to Base64?

Yes. SVGs work, and you can copy the result as a CSS background-image value for use as an icon or mask.

This free tool is one of several browser-based AI utilities by Faraz Hussain, a Shopify developer and web engineer. See all free AI tools, what he's shipped, or the services.

Other free tools: JSON formatter · image compressor · Shopify metafield validator · UTM link builder · image to Base64 · slug generator · word counter