🖼️ 图片转 Base64 — 生成 Data URI

Convert any image (PNG, JPG, GIF, WebP, SVG) to a Base64 data URI. Preview the image, copy the data URI for use in CSS or HTML. 100% browser-based.

Drop your image file and instantly get its Base64-encoded data URI. Copy the full data:image/... string to embed the image directly in your CSS background-image or HTML img src — no separate file needed, no server request.

🖼️

Drop an image here or

PNG, JPG, GIF, WebP, SVG supported

How to Use

Upload your image

Click the upload area or drag and drop any PNG, JPG, GIF, WebP, or SVG file.

Choose output format

Toggle between full Data URI (data:image/png;base64,...) and raw Base64 string only.

Copy the result

Click Copy to clipboard. Use the data URI directly in your CSS background-image or HTML src attribute.

Frequently Asked Questions

What is a Base64 image data URI? +

A data URI embeds the image directly in your HTML or CSS as text: data:image/png;base64,iVBORw0KGgo.... This eliminates a separate HTTP request for the image file, useful for small icons, backgrounds, and email templates.

What image formats are supported? +

PNG, JPG/JPEG, GIF, WebP, SVG, BMP, ICO, and most common image formats are supported. The MIME type is automatically detected from the file and included in the data URI.

How large will the Base64 output be? +

Base64 encoding increases file size by approximately 33%. A 100KB image becomes roughly 133KB as Base64 text. For images over 50KB, linking to the file is usually better for performance than embedding.

How do I use this in CSS? +

Copy the full data URI and use it as: background-image: url("data:image/png;base64,..."); In HTML: <img src="data:image/png;base64,...">. For email templates, inline data URIs ensure images display without external loading.

Is my image uploaded to a server? +

No. The entire conversion runs in your browser using the FileReader API. Your image never leaves your device and is never sent anywhere.

完整指南：图片转Base64工具

什么时候用图片转Base64？

将图片转换为Base64字符串可直接嵌入CSS、HTML或JSON中，无需外部文件。适用于：CSS中的小图标、HTML邮件中附件可能被屏蔽的情况、需要JSON载荷中包含二进制数据的API。

缺点：图片大约增大33%且无法单独缓存——仅用于小资源（<5KB）。

如何使用

拖放或上传图片（PNG、JPG、SVG、GIF）。
完整的data URI自动生成。
复制直接在CSS/HTML中使用。

专业技巧

图标使用SVG转Base64——比PNG更小且可缩放。
大图片使用CDN而不是Base64内联。
PNG的data URI格式：data:image/png;base64,...