Image to Base64

What this tool does

Image to Base64 turns PNG, JPEG, GIF, WebP, AVIF, ICO and SVG files into Base64 strings and data URIs ready to paste into CSS, HTML, Markdown or JSON. It can downscale and re-encode images before conversion to keep the output small, handles many files at once and exports them as a ZIP.

Embedding an image directly in code removes an HTTP request and keeps a component self-contained. It is common for small icons in CSS, images in HTML email templates, placeholders in single-file demos and pictures stored in JSON. The image bytes are Base64-encoded and prefixed with a MIME type to form a data URI, such as data:image/png;base64,iVBOR…. The catch is size: Base64 output is about 33% larger than the file, so a careless 2 MB photo becomes a 2.7 MB string.

This converter reads each image on your device and produces the format you need: a full data URI, raw Base64, a CSS background-image rule with the real width and height, an HTML img tag with an alt text from the file name, a Markdown image or a JSON object. To cut size, set a maximum width and re-encode to WebP, JPEG or PNG with an adjustable quality. SVG files can be written as URL-encoded text instead of Base64, which is typically shorter and still valid in CSS. Each result shows the original and encoded sizes so you can judge whether inlining is worthwhile.

How to use Image to Base64

1. Drop one or more images on the upload area, or click to browse.
2. Choose the Output format: data URI, raw Base64, CSS, HTML, Markdown or JSON.
3. Optionally pick a format under “Re-encode before converting” and adjust Quality.
4. Enter a Maximum width in pixels to scale large images down, or leave it at 0.
5. Copy or download each result, or use Copy all, Download all or “Download all (ZIP)”.

Tips for better results

• Inline images under about 10 KB; larger ones are better served as files that the browser can cache.
• For SVG icons in CSS, URL-encoded text is often around 30% shorter than Base64 of the same file.
• WebP at 80-85% quality usually halves the size of a PNG photo with no visible difference.
• Gmail and several other email clients block data URI images, so use hosted images or attachments for email campaigns.

Common use cases

• Embedding a logo or icon in a single-file HTML page or CodePen demo.
• Adding small background images to a CSS file without extra requests.
• Storing thumbnails in a JSON API fixture or a local database seed file.
• Including screenshots in a Markdown document that must stay self-contained.

Common mistakes to avoid

• Inlining large photos, which bloats HTML and CSS and blocks rendering until the whole file has downloaded.
• Re-encoding a transparent PNG as JPEG, which replaces transparency with white.
• Forgetting the data:image/…;base64, prefix when a field expects a data URI, or including it when an API expects raw Base64.