About the Image to Base64 Converter
This image to Base64 converter encodes a picture as a Base64 data URI you can paste straight into HTML, CSS, JSON or an email template, and decodes Base64 back into an image you can preview and download. Choose a file (or drag one in), or paste existing Base64 text, a full data:image/… URI, or raw SVG markup.
Front-end developers use data URIs to inline small icons, logos, loading spinners and CSS background images so they load without an extra HTTP request; email developers use them for tiny images; and API developers use Base64 to send images inside JSON. The tool detects the real format from the file’s signature bytes (PNG, JPEG, GIF, WebP, AVIF, SVG, BMP or ICO), reads the pixel dimensions, and generates ready-to-use <img> and CSS background-image snippets.
Base64 makes data about 33% larger (four characters for every three bytes), and inlined images cannot be cached separately, so they are best kept for small assets — typically under a few kilobytes. Your image never leaves your device: encoding and decoding happen entirely in the browser.
How to use the image to base64 converter
- 1Choose or drag an image file — or paste Base64, a data URI or SVG markup.
- 2Leave the image type on automatic unless detection is wrong.
- 3Add alt text for the generated <img> tag.
- 4Copy the data URI, HTML tag or CSS snippet.
- 5To decode, paste Base64 and download the previewed image.
Formula and method
Base64 (RFC 4648) splits the image’s bytes into groups of three (24 bits) and writes each group as four characters from a 64-character alphabet (A–Z, a–z, 0–9, + and /), padding the last group with = signs. Every 3 bytes therefore become 4 characters, an increase of about 33% (slightly more for very small files because of padding).
A data URI (RFC 2397) prefixes the Base64 text with the media type, for example data:image/png;base64,…, so a browser can display it anywhere a URL is accepted. The type is detected from the file signature — PNG files start with the bytes 89 50 4E 47, JPEG with FF D8 FF, GIF with "GIF89a" — and the width and height are read from the image header (the IHDR chunk in PNG, the SOF marker in JPEG, the logical screen descriptor in GIF).
- bytes
- Size of the original image file
- MIME type
- Media type such as image/png or image/svg+xml
Worked examples
Small PNG icon from Base64
The decoded bytes start with the PNG signature, and the IHDR header gives a 2 × 2 pixel image. The 73-byte file becomes 100 Base64 characters (4 × ⌈73 ÷ 3⌉ = 100), about 37% larger because of padding on such a tiny file.
Classic 1 × 1 transparent GIF
The data URI is unpacked and its Base64 decoded to 42 bytes starting with "GIF89a". 42 is divisible by 3, so the Base64 is exactly 42 ÷ 3 × 4 = 56 characters — a 33.3% increase, with no padding.
Inline SVG markup as a data URI
The 112 bytes of SVG text are Base64-encoded into 152 characters (4 × ⌈112 ÷ 3⌉ = 4 × 38). The width and height attributes give 24 × 24, and the MIME type is image/svg+xml.
Frequently asked questions
How do I convert an image to Base64?+
Choose the image file with the picker (or drag it in). The tool reads it in your browser and outputs a complete data URI such as data:image/png;base64,iVBOR…, plus ready-made <img> and CSS snippets. Nothing is uploaded to a server.
How do I convert Base64 back to an image?+
Paste the Base64 string or data URI into the text box. The tool detects the format, shows a preview and the dimensions, and lets you download the decoded image file with the correct extension.
Does Base64 make images bigger?+
Yes — Base64 uses 4 characters for every 3 bytes, so the encoded text is about 33% larger than the original file. Gzip or Brotli compression on the HTML or CSS recovers part of that, but inlined images still cannot be cached separately by the browser.
When should I use a data URI instead of an image file?+
Use data URIs for very small, frequently used assets — icons, tiny backgrounds, placeholders — where saving an HTTP request matters more than caching. For photos and anything over a few kilobytes, a normal image file (ideally WebP or AVIF) is faster.
Can I use Base64 images in emails?+
Support is mixed: Apple Mail and many mobile clients display data URIs, but Gmail and Outlook desktop often block them. For reliable email images, host the file and link to it, or attach it with a Content-ID (cid:) reference.