使用 图片转 Data URI / Base64 编码器

最大文件大小:20 MB
请将图片拖放到此处
或点击浏览
浏览图片
JPG、PNG、GIF、WebP、BMP、SVG、AVIF
提示:数据 URI 包含 MIME 前缀;仅 Base64 格式则为原始有效载荷。
2.38K
所用时间
1.83K
用户总数
5+ 年
已上菜
最近一次审核时间为 5 天前。使用数据会在定期审核期间更新。(自 起开始报告21 Feb 2022)
报告不匹配

阅读内容

了解该工具的工作原理以及何时使用它。

免费在线将多个图片文件转换为 Data URI 和 Base64 格式。 

图片转 Data URI / Base64 编码器

图片转 Data URI / Base64 编码器是一个实用工具,可帮助您快速轻松地将图片转换为可在网页或其他在线应用中使用的文本字符串。当您需要将图片嵌入代码但不想使用外部文件托管服务时,这种转换器非常有用。


 

什么是图片转 Base64 编码系统

您是否曾需要将图片转换为 Data URL 或 Base64 字符串?

图片转 Base64 是一种图片编码系统,可将任何图片无损转换为不可读的文本格式。生成的 Base64 编码文本包含加号、斜杠、等号、拉丁字母和数字。

Base64 编码是一种非常有用的方式,可以将二进制信息(如图片、声音、视频片段)以文本格式存储。其目的是使用 ASCII 字符(字母和数字)来表示二进制数据。

为什么使用 Data URI / Base64?

图片可以通过称为 Data URI 的方法转换为 Base64 字符串。这使我们能够为图片创建一个 URL,然后可以将其包含在网页中。该过程涉及将原始文件转换为字节数组(字节集合),然后将字节数组编码为 Base64 字符串。

与本地文件相比,Data URI 具有多个优点。它们节省客户端(浏览器)缓存空间,体积比常规图片更小,并允许网站以更少的带宽使用量提供更大的图片。Base64 字符串也更易于阅读,因为可以使用常见的文本编辑器轻松查看。

使用 Data URI,您可以直接将图片嵌入 HTML 代码中,而无需加载外部文件。这可以加快页面加载速度,而且操作非常简单。在本文中,我们将向您展示如何在几秒钟内将图片转换为 Data URI。

如何在几秒钟内将图片转换为 Base64 编码 / Data URI

您是否想过如何让网站上的图片加载得更快?一种方法是使用 Data URI。只需 拖放或手动上传设备中的图片,或粘贴网络图片的 URL,即可将目标图片转换为 Base64 / Data URI 文本格式。

图片转 Base64 编码示例

Base64 编码输出示例:data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLC....

图片转 Base64 编码的用途

用于图片源(img src):

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLC..." />

用于背景图片 URL(background-image: url):

background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2OTApLC...")

如何使用 Data URI / Base64

要使用 Data URI / Base64 转换器,只需将生成的代码复制并粘贴到项目中您希望嵌入图片的位置。切勿删除代码中的任何换行符或空格,因为它们对于正确的显示格式是必要的。根据您计划使用转换后图片的方式,可能还需要调整一些设置,例如更改尺寸或在图片周围添加边框/间距。

评论 (0)

用于用户讨论、边界情况及后续建议。
发表评论
您的评论提交后将公开展示。
目前尚无评论。快来发表第一条评论吧!
请告诉我们!
报告此工具的问题

请描述您遇到的问题,以便我们进行调查并改进该工具。

什么最有帮助
请提供输入内容、预期结果、实际结果、浏览器/设备信息,如有帮助,请附上截图。
“截图”按钮会截取浏览器中的页面,并将生成的图片作为附件添加到此表单中。
整页截图
通过 newisty 在您的浏览器中捕获。
尚未截取屏幕截图。
工具 报告