Data URI for HTML and CSS
Create a data:image/...;base64 string for an HTML img source or CSS background-image. Toggle the Image prefix to switch between a data URI and raw Base64.
Image to Base64
Encode an image as Base64, or copy a data URI for HTML and CSS.
Conversion mode
More actions
Base64 character reference
Base64 uses 64 characters: A-Z, a-z, 0-9, + and /. The = symbol is used for padding.
Click a value to copy.
| Index | Binary | Char |
|---|---|---|
| 0 | A | |
| 1 | B | |
| 2 | C | |
| 3 | D | |
| 4 | E | |
| 5 | F | |
| 6 | G | |
| 7 | H | |
| 8 | I | |
| 9 | J | |
| 10 | K | |
| 11 | L | |
| 12 | M | |
| 13 | N | |
| 14 | O | |
| 15 | P |
| Index | Binary | Char |
|---|---|---|
| 16 | Q | |
| 17 | R | |
| 18 | S | |
| 19 | T | |
| 20 | U | |
| 21 | V | |
| 22 | W | |
| 23 | X | |
| 24 | Y | |
| 25 | Z | |
| 26 | a | |
| 27 | b | |
| 28 | c | |
| 29 | d | |
| 30 | e | |
| 31 | f |
| Index | Binary | Char |
|---|---|---|
| 32 | g | |
| 33 | h | |
| 34 | i | |
| 35 | j | |
| 36 | k | |
| 37 | l | |
| 38 | m | |
| 39 | n | |
| 40 | o | |
| 41 | p | |
| 42 | q | |
| 43 | r | |
| 44 | s | |
| 45 | t | |
| 46 | u | |
| 47 | v |
| Index | Binary | Char |
|---|---|---|
| 48 | w | |
| 49 | x | |
| 50 | y | |
| 51 | z | |
| 52 | 0 | |
| 53 | 1 | |
| 54 | 2 | |
| 55 | 3 | |
| 56 | 4 | |
| 57 | 5 | |
| 58 | 6 | |
| 59 | 7 | |
| 60 | 8 | |
| 61 | 9 | |
| 62 | + | |
| 63 | / |
Related tools
Your statistics
0
Conversions
0
Copied
0
Chars processed
Text
Favorite mode
0
Avg size
100%
Usage score
How to convert an image to Base64
The video could not load. You can still follow the instructions below.
Image encode is selected when you open this tool. Click Upload or Select files and choose an image. Check that the preview shows the right file. The original file stays unchanged. Base64 output is text and can be larger than the image file.
Image to Base64 options
Image format inputs
Encode JPG, PNG, GIF, WebP, AVIF, BMP or ICO. Drop an SVG file to encode it. HEIC and HEIF imports become JPEG, and TIFF import uses the first image as PNG.
Encode and decode
Encode an imported image or recover Base64 image data. Image encode downloads text. Image decode downloads the displayed image when its preview succeeds.
Show 3 moreShow less
Clipboard images
In Image encode, use Paste for a copied image where your browser permits clipboard access.
Imports up to 50 MiB
Image files are limited to 50 MiB. Preview support and available memory also affect which images can be displayed.
Browser conversion
Read an imported image into Base64 text. Standard image inputs keep their original bytes.
Frequently asked questions
How do I convert an image to Base64?
Choose Image encode and add your image. Enable Image prefix for a complete data URI, or turn it off for raw Base64. Copy the result or download the text file.
How do I use a Base64 image in HTML or CSS?
With Image prefix enabled, copy a value such as data:image/png;base64,... into an HTML img src attribute or a CSS background-image: url(...) value.
How do I convert Base64 back to an image?
Choose Image decode and enter the Base64 image data, with or without a data URI prefix. If your browser can display the recovered format, preview it and use Download to save the image.
Which image formats can I import?
The file picker accepts JPG, PNG, GIF, WebP, AVIF, BMP, TIFF, ICO, HEIC and HEIF. SVG can be dropped onto the page. HEIC and HEIF become JPEG, and the first TIFF image becomes PNG. Other supported image inputs retain their original bytes. Imports are limited to 50 MiB.
Show 2 moreShow less
Should I inline large images as Base64?
Base64 uses four characters for every three input bytes, plus any padding. Large data grows by about a third, and an inlined image cannot be cached as a separate file. Use ordinary image files for large or reused assets.
Is my image uploaded?
Encoding and decoding run in your browser without sending the input to a conversion server. Usage counters can remain saved locally after the tab closes.
Technical details
UTF-8 text encoding
TextEncoder converts text to UTF-8 bytes before btoa produces Base64. Decoding uses atob and TextDecoder. Text file imports are read as UTF-8, and invalid UTF-8 byte sequences become replacement characters. Image encoding follows a separate import path.
Where conversion runs
Text mode handles UTF-8 bytes, while Image encode reads the imported image data. Image decode checks the recovered data with the browser’s image decoder.
Show 4 moreShow less
Image formats and conversion
Image encode preserves the bytes of standard image formats. HEIC and HEIF imports use native decoding where available, with libheif as a fallback, then become JPEG. TIFF imports use UTIF to convert the first image to PNG. Image decode passes the recovered image to the browser's own decoder.
Processing and memory
Text conversion and Base64 validation run in a browser worker. Large inputs and results still use memory, and image previews need additional memory for decoded pixels. Long text appears as a read-only preview, while the full result remains available for copying or downloading.
Data URIs for HTML and CSS
Image prefix creates a data URI such as data:image/png;base64,... for an HTML img source or CSS url() value. Prefixed output keeps the standard Base64 alphabet, padding and a single unwrapped line. Turn the prefix off to get raw Base64 and use the URL-safe output option.
Entering text and images
Choose the conversion mode before entering data. Type or paste text, import a text file, or drop an image in Image encode. Use Paste in Image encode for clipboard images where your browser permits it. Text file drops accept TXT, JSON and XML, while the file picker also offers CSV, HTML, CSS and JavaScript files.