My Tool Studio
Image

Image to Base64 Converter

Convert image to Base64 in one step and copy the result in the format you need. Upload one or many PNG, JPG, GIF, WebP, SVG, ICO or HEIC files up to 20 MB, paste an image with Ctrl+V, or load one from a URL. The tool shows each as a data URI, raw Base64, a CSS background rule or class, an HTML img tag, an HTML favicon link, Markdown, JSON, XML, a JavaScript constant or a JavaScript Image, with Copy and Download .txt buttons. An optional shrink step resizes and re-encodes the image first, so the string can be far shorter. Front-end developers inline small icons, email developers build test templates, and API developers prepare request bodies. The file is read in your browser.

Always freeNo sign upRuns in your browser
Shrink before encoding (shorter Base64)

How to use

01

Add images

Drop one or more images up to 20 MB each, paste one with Ctrl+V, or type an image URL and click Load URL. Small icons and logos suit Base64 well.

02

Shrink if needed and pick the output

Open Shrink before encoding to resize or convert to WebP or JPG, then choose Data URI, Raw Base64, CSS, HTML, Markdown, JSON, XML or JS.

03

Copy or download the code

Click Copy, or Download .txt, then paste the result into your stylesheet, page, API request or source code. With several images, Download all as JSON saves every one.

Why Image to Base64 Converter

When Base64 images help and when they hurt

Inlining an image as Base64 removes one HTTP request, but the image can no longer be cached separately and it makes your HTML or CSS about a third heavier. That trade is only worth it for small files. The tool shows a note under each image: green for small files that inline well, amber for borderline ones and red for files that are better kept as normal images.

SituationBase64 inline?Why
Small icon or logo under about 4 KBOften yesSaves a request, overhead is tiny
Image used on many pagesNoA separate file is cached once, inline data is downloaded with every page
Photos over about 20 KBNo33 percent larger, and blocks rendering of the file it sits in
API or JSON payload that requires Base64YesThe format needs text, not binary
HTML emailUsually noMany email clients do not show data URI images
Single-file HTML demos or offline pagesYesEverything stays in one file

Common questions

What is the difference between a data URI and raw Base64?
Raw Base64 is just the encoded characters. A data URI adds a prefix such as data:image/png;base64, so browsers know the file type and can use it directly in an img src or CSS url(). APIs usually want raw Base64, HTML and CSS need the data URI.
Why is the Base64 string bigger than my image file?
Base64 turns every 3 bytes into 4 text characters, so the encoded string is about 33 percent larger than the file. That overhead is why Base64 suits small images and not large photos. Shrink before encoding helps by making the file itself smaller first.
How do I make a Base64 image string shorter?
Open Shrink before encoding, tick Resize and re-encode first, and pick a longest side such as 128 or 256 pixels and WebP at about 80 quality. The tool shows the file size before and after shrinking and the new Base64 length. SVG and GIF files are encoded as they are.
How do I use a Base64 image in CSS?
Choose CSS for a single background-image rule, or CSS class for a ready-made class with background-size and background-repeat. Paste it into your stylesheet. It works like any other background image.
Can I convert several images to Base64 at once?
Yes. Drop several files together. Click a file name to see its output, and use Download all as JSON to save a file that maps each image name to its data URI, which is handy for build scripts and test fixtures.
Can I convert an image URL to Base64?
Yes, if the site allows it. Paste the full URL and click Load URL. Many sites block other pages from reading their images (a browser rule called CORS), and then the page tells you to download the image and upload it instead.
Should I use Base64 images in HTML emails?
Usually not. Many email clients, including Gmail, do not display data URI images. Linked images hosted on a server or attached images referenced by content ID are more reliable in email.
How do I turn a Base64 string back into an image?
Use the Base64 to Image Converter. Paste the string or data URI and it shows the image, detects the real format and lets you download it.
Is my image uploaded when I convert it to Base64?
No. The browser's FileReader encodes the file on your device, and the text is shown in the page. Only Load URL makes a request, straight from your browser to the address you typed.

More Image tools

View all

Screenshot Editor

Annotate, frame and redact screenshots

Image

Geotag Photos Online

Add or remove GPS in photos, batch

Image

Image Compressor

Compress images by quality or to a KB target

Image

Image Resizer

Resize in px, %, cm or inches, with KB limit

Image