Base64
Image Data URL
⚠️ Large image may freez the browser
将PNG编码为Base64用于CSS
将PNG图像转换为Base64或DataURL格式。直接嵌入到CSS或JavaScript中，无需外部文件。较大的文件可能会影响性能；较小的尺寸建议使用。Base64编码简化了与网页资产的集成，减少了对外部资源的依赖。DataURL格式简化了动态内容交付的代码结构。
Image → Base64 / Data URL
Click or Drag & Drop an Image
将图像转换为Base64代码
1
上传PNG图像
上传您的PNG图片，通过点击或将其拖动到上传区域。
2
选择编码格式
选择“Base64”或“DataURL”标签以选择您想要的编码格式。
3
查看Base64数据
你的图像的Base64或DataURL表示形式将出现在标签下方文本区域中。
4
复制编码文本
点击“复制”按钮将编码文本复制到您的剪贴板，以便在您的 CSS 或 JavaScript 中使用。
在您的CSS中直接嵌入PNG图像
包括在CSS中直接包含小图片，而无需管理单独的文件，可以通过将PNG转换为Base64或DataURL格式来实现。encode-png-to-base64-for-css工具可以简化您的Web开发工作流程并减少HTTP请求。这会产生更简洁、更高效的代码以及更快的页面加载时间。
减少文件大小和HTTP请求
这个工具减少网站需要加载的文件数量，通过将PNG图像转换为Base64或DataURL格式来实现。将图像直接嵌入到CSS或JavaScript中减少HTTP请求，从而可以提高页面加载速度。这种方法通过最小化外部文件依赖来优化网站性能。
常见问题
Base64数据URL是什么以及我为什么使用它？
一个Base64数据URL是一种将图像表示为字符字符串的方式。它允许您直接将图像嵌入到CSS或JavaScript代码中，避免从外部文件加载它们。这对于小图标或图像很有用。
如何使用生成的Base64或DataURL？
只需复制提供的代码，在转换图像后，将其粘贴到你的CSS或JavaScript中。例如，在CSS中，你可以这样使用它：background-image: url('data:image/png;base64,...');
这个工具支持哪些图像格式？
这个工具专门为PNG图像设计。其他格式可能无法正确转换。
为什么不建议使用大图像？
大图像会产生非常长的Base64字符串，这可能会减慢您的计算机并增加页面加载时间。最好使用此工具处理较小的图像。
我能上传图片的最大尺寸是多少？
虽然没有严格的文件大小限制，但较大的图像会导致性能下降。为了获得最佳效果，建议使用较小的PNG文件。