Image to Base64
Convert images to Base64 data URLs for embedding.
Click to upload an image
Supports PNG, JPG, GIF, SVG, WebP
Usage: Copy the Base64 string and use it directly in HTML img src, CSS background-image, or embed in JavaScript.
About this tool
Convert images to Base64 encoded data URLs that can be embedded directly in HTML, CSS, or JavaScript. Supports PNG, JPG, GIF, and other common image formats.
Features
- Convert PNG, JPG, GIF, and other images to Base64
- Generate data URLs for embedding in HTML and CSS
- Preview uploaded images before conversion
- Copy the Base64 data URL to clipboard
How to Use
- Upload an image file using the file picker or drag and drop
- View the image preview and file details
- Copy the Base64 data URL from the output
- Paste the data URL directly in your HTML or CSS
Frequently Asked Questions
When should I inline an image instead of linking to it?
Tiny icons under 2 KB, or a single above-the-fold hero you don't want a separate HTTP round-trip for. Past around 10 KB, the Base64 bloat (33% expansion) plus the fact that inline images can't be cached separately starts hurting page load — link them instead.
Does inlining affect caching?
Yes — inlined images cache with their host HTML or CSS file, not separately. If the image changes but the page doesn't, the browser still has to re-download it with the page. Good for truly one-off assets, bad for anything reused across many pages.
Which image format should I base64 — PNG, JPG, or SVG?
SVG whenever possible — it's text, Base64 encoding costs less (since the source is already UTF-8), and it scales. For raster, prefer WebP or AVIF when browser support allows, fall back to JPG for photos, PNG for anything needing transparency.
Is my image uploaded to a server?
No — the encoding runs in the browser via FileReader and the file never leaves your machine. This matters for screenshots with sensitive data or unreleased mockups. The resulting data URL is yours to paste into your own code.
Can I decode a data URL back into an image?
Yes — paste the data URL (the data:image/... string) into any decoder, or save it to a file renamed to .png/.jpg. Most browsers also handle pasting a data URL directly into the address bar and will render the image.