Image to Base64

Drop, paste or choose an image to get its Base64 code instantly: a ready-to-use data URI, raw Base64, a CSS background rule or an HTML img tag. Your images never leave your device.

Drop images here or choose files

PNG, JPG, WebP, GIF, SVG, AVIF, ICO, BMP · or paste with Ctrl+V

Sample image

Type

-

Dimensions

-

File size

-

Base64 size

-

Encode as Original file (exact) Re-encode as WebP Re-encode as JPEG Re-encode as PNG

Wrap Base64 tab at 76 chars

Data URI Base64 CSS HTML <img> Markdown JSON

Copy code Download .txt

Base64 output

0 characters

Advertisement

How to use the Image to Base64

1. Add an image: drag it onto the drop area, click to choose a file, or paste a screenshot with Ctrl+V. You can add several at once.
2. Pick a format from the tabs: Data URI, Base64 only, CSS, HTML <img>, Markdown or JSON.
3. Optionally shrink it: choose Re-encode as WebP or JPEG and set a max width to get a much shorter string.
4. Copy or download the code and paste it into your HTML, CSS, JSON or email template.
5. Switch images with the thumbnails if you added more than one.

How Base64 image encoding works

Base64 reads the file 3 bytes (24 bits) at a time and splits them into four 6-bit groups. Each group is a number from 0 to 63 that maps to one character of the alphabet A–Z a–z 0–9 + /. If the file length is not a multiple of 3, the last group is padded with one or two = signs. That is why the encoded size is always 4 × ⌈bytes ÷ 3⌉ characters, about 33% more than the original file.

A data URI wraps that text with the file type so browsers know how to decode it: data:[MIME type];base64,[data]. For example a PNG starts with data:image/png;base64,iVBORw0KGgo, because every PNG file begins with the same 8 signature bytes.

Where to use each output

Tips for shorter Base64 strings

• Inline only small files. Icons under about 5 to 10 KB are good candidates. Larger images are better served as normal files that the browser can cache.
• Re-encode photos as WebP or JPEG and set a max width close to the size you actually display. A 4000 px phone photo shown at 400 px can shrink by more than 95%.
• Keep PNG for flat graphics with sharp edges or transparency. JPEG has no transparency, so transparent areas are filled with white.
• SVG icons are often smallest as SVG. Minify the SVG first, then encode it.
• Email: many email clients, including Gmail, block data URI images. For email, attach the image or host it instead.

Frequently asked questions

Related tools