Which image types work?

Common browser-readable formats: PNG, JPG, WebP, GIF, etc.

Why is the string longer than the file?

Base64 encoding expands size — that is normal, not an error.

Can I batch a whole folder?

One image at a time here so you can verify the preview.

Is this good for big photos?

No — host large images as normal URLs; reserve Base64 for small assets.

Image to Base64 converter — data URL online

Turn an image into Base64 text, or a full `data:image/...;base64,` data URL for HTML, CSS, Markdown, or configs that only accept strings. Best for tiny icons and thumbnails — embedding a multi-megabyte photo bloats your page and hurts load time.

Drop a file here, or click to select

Include data: URL prefix

Base64 represents binary as readable characters. A data URL lets the browser load the image without another HTTP request — but the string is roughly a third larger than the file and caches poorly.

Use it for kilobyte-scale icons, pixel art, small logos. Stuffing a vacation photo into CSS makes stylesheets enormous.

Compress or resize first if the source is large — the encoded string shrinks with it.

How to convert

Pick an image and confirm the preview
Toggle data URL prefix as needed
Copy the output text
Paste into HTML, CSS, or your config

When Base64 for images makes sense

Single-file demos or email HTML that need an inline icon.
Tiny CSS background without an extra asset file.
APIs or configs that only allow text fields for images.
Optional data URL prefix so you can copy-paste directly.

Scenarios

16×16 icon in component docs
Small badge in an email template (watch total size)
Form field that expects Base64 image data

Tips

For CSS `url()`, enable the data URL prefix.
Turn prefix off when the receiver wants raw Base64 only.
String too long? Compress or resize the image first.
Need the file back? Use Base64 to Image.

Output shapes

Input	Output	Note
Small PNG icon	data:image/png;base64,...	With prefix
Same image	Raw Base64 string	Prefix off

Image to Base64 FAQ

Which image types work?: Common browser-readable formats: PNG, JPG, WebP, GIF, etc.
Why is the string longer than the file?: Base64 encoding expands size — that is normal, not an error.
Can I batch a whole folder?: One image at a time here so you can verify the preview.
Is this good for big photos?: No — host large images as normal URLs; reserve Base64 for small assets.