Image to Base64
Free · no sign-upTurn an image into a Base64 data URI for CSS or HTML — the file never leaves your browser.
Turn an image into a Base64 data URI you can paste straight into CSS or HTML — no more separate image request. Drop a file in and copy the data URI, a CSS background rule, or an <img> tag. The image is read in your browser and never uploaded.
- ✓Data URI, CSS, or <img> in one click
- ✓Works with PNG, JPG, SVG, GIF and WebP
- ✓Shows original vs encoded size
- ✓Live preview of the image
- ✓Runs in your browser — nothing uploaded
Who it's for
- Inlining an icon into CSS
- Embedding a logo in an HTML email
- Avoiding an extra image request
- Pasting an image into a data file
How it works
- 1Drop an image or click to choose one.
- 2See the preview and the sizes.
- 3Copy the data URI, CSS rule, or <img> tag.
- 4Paste it into your code.
Frequently asked questions
What is a Base64 data URI?+
It's the image encoded as text (data:image/png;base64,…) that you can embed directly in CSS or HTML, so the browser doesn't fetch a separate file.
When should I inline an image?+
Small icons and sprites are good candidates — inlining saves a request. Base64 is about 33% larger than the file, so it's not worth it for big images.
Which formats work?+
Any raster or vector image your browser reads — PNG, JPG, SVG, GIF, WebP and more.
Is my image uploaded?+
No. The file is read locally with your browser's FileReader; it never leaves your device.
You may like
Some links may be partner links — how this works
Related tools
Format, validate and minify JSON in your browser.
Encode or decode Base64 text, UTF-8 safe.
Decode a JWT's header and payload in your browser.
Test regular expressions with live match highlighting.
Percent-encode or decode URLs and query strings.
Generate random UUID v4 identifiers in bulk.