How do I convert an image to Base64?

Upload the image to a Base64 encoder, choose data URI or raw output, and copy the result. In code, the FileReader readAsDataURL method does the same thing.

Why is Base64 larger than the original image?

Base64 represents every 3 bytes of data with 4 text characters, so the encoded text is about 33% larger than the file.

How do I use a Base64 image in HTML?

Put the data URI in the src attribute: .

Is it good to use Base64 images on a website?

Only for very small images such as icons. Large Base64 images increase page size and can't be cached separately by the browser.

Image to Base64 Converter — Data URI, HTML and CSS Code

Sometimes an image has to live inside code: a small icon in a CSS file, a logo in an HTML email signature, an image in a JSON API payload, a placeholder in a single-file demo, or a test fixture in a unit test. Base64 turns the image's bytes into text that can sit in those places.

This tool encodes an image to Base64 in your browser and gives you the format you actually need: a complete data URI (data:image/png;base64,...), the raw Base64 string, a ready-made HTML <img> tag, or a CSS background-image rule. Copy it or download it as a text file.

It also tells you how much larger the Base64 text is than the file — typically about 33% — so you can decide whether inlining is a good idea.

The correct MIME type is written into the data URI automatically, including image/svg+xml for SVG files, which is the detail that most often breaks hand-built data URIs.

Encoding happens locally with the browser's FileReader API. Your image is not uploaded, so unreleased logos and product images stay private.

How It Works

Choose an image — PNG, JPG, GIF, WebP, SVG, ICO, BMP or AVIF up to 10 MB.
Pick the output — data URI, raw Base64, HTML img tag or CSS background. The file is read with the FileReader API and its MIME type is set correctly (including image/svg+xml for SVG).
Copy or download — the text appears in a box with a Copy button, and a .txt download is offered for very long strings.

Compatibility & Support

Supported Input → Output Formats

Input: PNG, JPG/JPEG, GIF, WebP, SVG, ICO, BMP, AVIF
Output: data URI, raw Base64, <img> tag, CSS background-image
Encoding: standard Base64 (RFC 4648) with the correct MIME type

Unsupported Formats

The image is encoded exactly as it is — not resized or compressed. To make the string shorter, shrink the image first with the Image Resizer or Image Compressor. To decode Base64 text back to a file, use the Base64 Decoder/Encoder; for PDFs use PDF to Base64.

File Size Limits

Images up to 10 MB. That produces a string of about 13 million characters — technically fine, but far too large to embed sensibly. Inline only small images (roughly under 10 KB); link to larger ones normally.

Email clients are the strictest case: Gmail and Outlook strip or block many data-URI images in HTML emails, so for signatures a hosted image URL is usually more reliable than Base64.

Who Should Use This Tool?

Students: A student builds a single-file HTML project for submission and inlines its small icons so nothing breaks when the file is moved.
Freelancers & Designers: A front-end freelancer inlines an SVG logo as a CSS background to save one HTTP request on a landing page.
Office Professionals: An IT administrator prepares a small logo as a data URI for an internal HTML report generated by a script.
Developers: A developer converts a test image to Base64 to include it in a JSON fixture for an image-upload API test.

Key Features / Khusoosiyat

Here's what separates this tool from generic alternatives:

🔤

Four Output Formats

Data URI, raw Base64, img tag or CSS rule.

🏷️

Correct MIME Type

Including image/svg+xml for SVG files.

📏

Size Warning

Shows how much larger the text is than the file.

📋

One-Click Copy

Copy the whole string, however long.

💾

Text Download

Save long strings as a .txt file.

🔒

Private

Images are encoded in your browser.

Why This Tool Beats the Alternatives

Ready-to-paste HTML and CSS snippets, not just a raw string.
Honest guidance about when inlining hurts performance.
Correct MIME types, which many encoders get wrong for SVG.
No upload of unreleased logos or assets.
Free and instant.

Pro Tips

For SVG icons, a URL-encoded SVG in CSS is often shorter than Base64 — but Base64 is simpler and works everywhere.
Don't inline large hero images: browsers can't cache them separately and your HTML/CSS grows by a third of the image size, delaying the first paint of the page.
Compress PNG/JPG images before encoding; every byte saved in the file saves about 1.33 characters in the string.

Choose an image above and copy its Base64 code in the format you need.

Image to Base64