A Base64 string that embeds the whole image inside HTML or CSS so it loads without a separate file request.

When should I use a data URL?

For tiny icons or inline emails where avoiding an extra network request is worth the larger text size.

Is my image uploaded to make the data URL?

No. The Base64 string is generated locally in your browser.

Base64 encoding adds about 33% overhead, so data URLs suit small images best.

Yes, use it as the value of a background-image url() or an img src attribute.

Yes, any image type your browser can read can be turned into a data URL.

将图片转为 Base64 data URL，用于 HTML/CSS 或测试。

文件

将文件拖放到此处 或点击选择文件。

Data URL

将图片编码为 Base64 数据 URL，可直接粘贴到 HTML 或 CSS 中。图片随标记一起传输，减少一次网络请求。

使用方法

常见问题

What is a data URL?: A Base64 string that embeds the whole image inside HTML or CSS so it loads without a separate file request.
When should I use a data URL?: For tiny icons or inline emails where avoiding an extra network request is worth the larger text size.
Is my image uploaded to make the data URL?: No. The Base64 string is generated locally in your browser.
Why is the data URL larger than the file?: Base64 encoding adds about 33% overhead, so data URLs suit small images best.
Can I paste the result into CSS?: Yes, use it as the value of a background-image url() or an img src attribute.
Does it work for SVG and PNG?: Yes, any image type your browser can read can be turned into a data URL.