Free tool
Image to Base64: Get a Data URL, a CSS Line or an img Tag
Drop a picture and get its Base64 text in the form you need, ready to paste into code. You can shrink the picture first, write an SVG as plain text, and copy one result or save them all as a JSON file.
Make it smaller first
Inline small icons and logos; link big photos as files, because Base64 cannot be cached on its own and makes pages heavier. Settings are kept in this browser.
Pictures are encoded in your browser and are never uploaded. Your output settings are saved on your own device.
Why put a picture inside the code at all
A developer building an email template, a single-file demo or a stylesheet sometimes wants a small image to travel with the code instead of living in a separate file. Base64 text makes that possible, because the picture becomes a long string that a browser can read as if it were a file.
Drop one or more pictures on the page, click to choose them, or paste. PNG, JPG, WebP, GIF, SVG and ICO files are accepted. Each one gets its own result box with the encoded text and a size readout before and after, so you can judge whether the swap is worth it.
The six output forms
| Form | What you get | Where it goes |
|---|---|---|
| Data URL | The full string, starting with the file type | An address field, a script or a test |
| Plain Base64 | Only the encoded characters | An API that wants raw Base64 |
| CSS background | A ready background declaration | A stylesheet |
| HTML img tag | An image element with the data in its source | A page or an email template |
| Markdown image | Markdown image syntax | A readme or a note |
| JSON field | A quoted string you can drop into an object | A config or a payload |
Use Copy for the one you are looking at, or Save all as JSON to keep every result from the batch in one file.
Make it smaller first
Base64 text is about a third bigger than the file it describes, so a large picture becomes a very large string. The Make it smaller first section lets you reduce the picture before encoding.
- Width keeps the size as it is, or limits it to 1600, 1024, 512, 256, 128, 64 or 32 px.
- File type keeps the file as it is, or changes it to WebP for the smallest result, JPG for photographs, or PNG for exact pixels.
- Quality runs from very good down to smallest.
There is also a box to write an SVG as text instead of Base64. For vector files this is often shorter, since SVG is already text.
When inlining helps and when it hurts
Inline small icons and logos. Link big photos as normal files. An inline picture cannot be stored and reused by the browser on its own, because it is part of the page or stylesheet that holds it. Every visit pays for it again, and it makes that page heavier to download and parse.
- Good candidates are tiny icons, a one-off logo in an email and test fixtures.
- Poor candidates are hero photos, galleries and anything shown on many pages.
If speed is the reason you are here, our guide to website speed for small sites covers the bigger wins first.
Slips to watch for
- Pasting a long string into a field that has a character limit. Check the size readout first.
- Encoding the full camera original. Reduce the width first.
- Forgetting the file type in a data URL. The Data URL form includes it for you, while Plain Base64 does not.
- Using Base64 for something that should be cached across pages.
To go the other way and read a string back into text, use the Base64 decoder on this site.
A practical tip for email and tests
When you build an email, remember that some mail programs block remote pictures, which is one reason developers inline logos. Always send yourself a test message in more than one mail app and look at it before it goes to a list.
Frequently asked questions
How do I convert an image to Base64?
Drop the picture on the page. The Base64 text appears straight away, and you can copy it in the form you need.
What is a data URL?
A data URL puts the whole file inside the address itself, starting with the file type and followed by the encoded data. A browser can show it like an ordinary picture link.
Why is the Base64 text bigger than my file?
Base64 writes binary data as plain characters, which makes it roughly a third larger. That is why small pictures suit it best.
Can I shrink the picture before encoding?
Yes. Use Make it smaller first to set a maximum width, a file type and a quality.
Is an SVG better as Base64 or as text?
Often as text, because it is shorter. Tick the box that writes SVG as text instead of Base64.
Is my picture sent anywhere?
No. It is converted in your browser and stays on your computer.
More free tools
- Base64 decoder and encoder: Decode Base64 to text or a file and encode text or files to Base64 and data URLs.
- image compressor: Compress pictures to a quality level or a target size in KB, with a before and after view.
- SVG to PNG converter: Export SVG files as PNG at a width from 16 to 8000 pixels, one or many at a time.
- Favicon generator: Turn letters, an emoji or a logo into a favicon.ico, PNG sizes and a manifest, with live previews.
- JSON formatter: Format, minify, validate and repair JSON, browse it as a tree, or convert it to YAML or CSV.