我有一个告白,会让性能工程师们眨眼 在 WP Adminify 的 WordPress 仪表板的早期版本上,我以 64 为基础对每个图标进行编码,并将它们直接内联到 CSS 中,因为我厌倦了管理精灵表,它可以立即出现图标,没有额外的请求,没有丢失图像的闪光。然后样式表膨胀超过一兆字节,页面在第二次加载时感觉较慢,因为这些内联图像都无法单独缓存。那个项目是我了解到 "image to base64" 是一种真正有用的技术,也容易过度使用。
本指南涵盖了该课程的两半。我将展示如何将图像转换为 base64 图片到 Base64 转换器 在 toolz。dev 上,如何将 base64 解码回图像、数据 URI 到底是什么以及诚实的权衡,以便您内联受益的资产并留下不受益的资产。
TL;博士: 将图像转换为 base64 会将其二进制内容转换为文本字符串,通常像数据 URI 一样包裹
data:image/png;base64,iVBORw0KG...。那个字符串直接嵌入在HTML,CSS,SVG或JSON中,没有单独的文件请求。toolz。dev转换器在两个方向上进行编码和解码,完全在浏览器中运行,因此从未上传任何图像,并给你原始基础64,一个准备好的数据URI,一个<img>tag,还有一个css片段,base64充气大小大约三分之一,所以像图标一样内联小资产,而不是大照片。
Base64 图像到底是什么?
Base64是编码方案,不是压缩,也不是加密,方案由定义 RFC 4648并且 data: URI 将其包裹起来 RFC 2397。它使用 64 个可打印 ASCII 字符表示任意二进制数据:字母 A 到 Z 和 a 到 z,数字 0 到 9,加上 + 並 /,与 = 用于填充。该方案在 RFC 4648 中定义,该标准与管理您在电子邮件附件和 JSON 有效负载中看到的 base64 的标准相同。
存在的原因是,很多互联网's管道是为文本而不是原始字节构建的。二进制数据可以包含面向文本的通道会破坏的字节值。Base64 回避了通过采用三个字节的输入,将这 24 位分成四组,每组六位,并将每组映射到 64 个字符中的一个。三个字节进,四个字符出。那个三比四的比例正是为什么编码输出比源大约大 33%,这是一个值得记住的数字,因为它决定了内联是否是一个好主意。
A "base64 image" 简直就是一个已经通过那个编码运行过的镜像文件,字符串本身就是文本,它可渲染的就是把它包裹在数据URI中。
什么是数据 URI 以及浏览器为何呈现它?
面(data URI)是將其有效載荷內聯而不是指向遠端資源的URL,其形狀,在RFC 2397中定義為 data:[<media-type>][;base64],<data>。对于看起来像的PNG data:image/png;base64,iVBORw0KGgo...。
重要的作品是媒体类型, image/png that example。告诉浏览器如何解释后面的字节。因为数据URI宣布了自己的MIME类型,所以浏览器可以处理 data:image/png;base64,... 作为图片,它解析期望 URL 的属性(无论是) src 的一个 <img> 或 url() 在CSS中 background-image.没有网络往返发生,因为没有什么可取的,图像已经在那里了,在标记中拼写出来。
That 就是整個魔力,整個成本一句话,圖像已經在那裡,這就是它瞬間渲染的原因,也是為什麼它不能像連結檔案那樣分開緩存或分別在頁面之間共享的原因。
如何在 toolz。dev 上将图像转换为 base64?
的 图片到 Base64 转换器 有两个方向,默认编码。
Pick "Image to Base64" 方向,然后上传或丢弃您的图像 该工具使用浏览器文件 API 在本地读取文件,并且由于该读取发生在您的浏览器中,因此图像永远不会传输到服务器。一旦加载,您将获得预览加四个输出,每个输出都有自己的复制按钮。
Raw base64 是裸字符串,当你已经拥有自己的包装纸时很有用,数据 URI 是完整的 data:... 字符串准备粘贴到一个中 src 或 url()。 HTML <img> tag是一个完整的元素,你可以掉到一个模板里。css background-image declaration 准备了样式表,除了那些你看到解码字节大小和 base64 字符数,所以你可以判断权重,然后再提交。如果数字看起来令人震惊,那就是工具在执行其工作:一张 200 KB 的照片在你的 HTML 中变成 270 KB 的字符串,正是重新考虑的时刻。
如何将 base64 解码回图像?
切换到 "Base64 切换到 Image"方向并粘贴原始 base64 字符串或完整的数据 URI。转换器对输入宽容:它会剥离空格,如果您粘贴完整的数据 data:image/png;base64,... string 它从前缀中直接读取 MIME 类型,如果粘贴裸基 64 没有前缀它假设 PNG,这是大多数屏幕截图和导出资产的安全默认值。
It validate the string first。if what you pasted is not plausible base64, means it contains characters outside RFC 4648 alphabet, the tool tell you rather than show a broaked image。comput check out, you get a live preview and a download button that rebuilding the original binary file and saves it with right extension。This direction is regenely handy when you find a data URI bursed in a stylesheet or a API response and want to see what it actually is, or extract it back to a real file
这里的一切都是客户端,这与从面向文本的工具箱的其余部分中贯穿的承诺相同 Base64 转换器 到 URL 编码器。如果你想要在浏览器中保留这种工作背后的更广泛推理, base64 编码指南 更深入地了解编码本身。
我应该何时将图像内联为 base64,何时不应该?
这是该工具存在的通知决定,因此这是我实际使用的表格。
| 情况 | 内联为base64? | 为什么 |
|---|---|---|
| 全站使用小图标或徽标 | 常是的 | 删除请求,立即出现,开销很小 |
| 微型 SVG 或 1px 背景 | 是的 | 33% 的开销在几百字节上可以忽略不计 |
| 单文件 HTML 导出或电子邮件 | 是的 | 该文件必须是独立的,不允许外部资产 |
| 大型英雄照片或横幅 | 否 | Overhead很大,图像不能单独缓存 |
| 图像在许多页面上重复使用 | 否 | 链接的文件缓存一次并被共享;内联到处重复它 |
| 经常变化的内容图像 | 否 | 编辑器无法像文件一样轻松地交换 base64 blob |
表格后面的模式很简单。内联交易了文档中字节的网络请求。当资产较小且保存的请求很重要时,该交易获胜,这是折叠上方图标的经典情况。当资产较大或共享时,它会丢失。因为您缴纳了 33% 的税,您会失去独立缓存,并且您会使浏览器必须解析的文件膨胀,然后才能绘制任何内容。
为"no"行,更好的举动通常是优化文件并正常服务,那就是工具喜欢的地方 图片压缩 或 格式转换器 赚取它的保留,缩小资产,使链接版本尽可能轻。我在 中写了更多关于整个工作流程的内容 web开发人员工具包 指南。
Base64是否将我的形象保密?
Yes 和 no,区分很重要 Base64 是一种编码,所以任何拥有字符串的人都可以将其解码回精确的原始图像,它提供零保密性。不要将数据 URI 视为隐藏任何内容的方法,因为 "Base64 到 Image"这个工具的方向会将其反转为一个粘贴。
Private的是转换本身,在toolz。dev上,图像完全在你的浏览器中用File API读取和编码,并且没有任何上传。所以你正在编码的艺术品,屏幕截图,客户端标志在过程中永远不会离开你的机器。那是不同的保证,因为编码隐藏了内容,我尝试精确它,因为"private"被松散地抛来抛去。隐私在本地处理中,更广泛地覆盖在 数据隐私 指南,而不是 base64 作为方案。
运输此产品的一些实用技巧
SVG 喜欢图标时,你可以,并直接内联 SVG 标记而不是 base64-编码它 SVG 已经是文本了,所以用 base64 包装它只会无偿添加 33% 的税 Base64 闪耀光栅格式,如 PNG 和 JPEG 真正的二进制。
WordPress仪表盘上看总文档大小,而不仅仅是单个图像,一个内联图标是看不见的,其中四十个,我在那个WordPress仪表盘上犯的错误,把一个精益样式表变成一个怪物,如果你内联的次数不止一把,那就是一个信号,退一步考虑一个链接的精灵或一个图标字体,而不是。
MIME类型保持诚实,如果导出一个JPEG,但将其数据URI标记为 image/png、有些浏览器应付,有些则不然,转换器从文件中检测到真实类型,因此输出正确,但如果在其他地方手工组装数据 URI,则将媒体类型与实际字节匹配。
当您继承充满神秘数据 URI 的代码库时,请记住解码方向。将一个粘贴到 "Base64 到 Image" 侧面并点击下载是查看样式表实际发货的最快方法。
Base64编码实际上是如何工作的,一步一步的?
1次看机制有帮助,因为整个33%的开销故事自然地从中脱颖而出。Base64一次工作在三个字节的组上。三个字节是24位。编码器将那些24位切成四个块,每个块六个位可以表示64个值,从0到63,并且这些值中的每一个都映射到base64字母表中的一个字符:A到Z代表0到25,a到z代表26到51,数字0到9代表52到61,然后 + 为62和 / 为63。
So 三个输入字节总是变成四个输出字符,那就是大小增加的来源,四个字符携带三个字节的信息,比例为 4 比 3,这和说输出比输入大三分之一一样,是没有办法的,因为它被烘烤成方案的工作原理。
Padding处理剩下的,如果你的数据不是三个字节的干净倍数,编码器会填充最后的组,所以它仍然会产生整数个字符,它会附加一两个 = signs 来记录它添加了多少填充,这就是为什么 base64 字符串经常以 结尾的原因 = 或 ==。单一的拖尾 = 表示最后一组保留两个字节;双 == means它握住一个。toolz。dev转换器在两个方向上自动处理填充,并且在解码时它愉快地接受带或不带尾随的字符串 =的,因为有些系统剥离了它。
您可以使用一个小示例观看此游戏。字母 "Man" 的三个 ASCII 字节编码为四个字符 "TWFu",这是一个直接从编码文献中删除的著名示例。将相同的三个字符作为文本放入数据 URI 中,您可以看到往返,或者通过工具运行真实图像并注意到输出中的字符计数始终约为旁边显示的字节计数的三分之四。
了解这一点也解释了为什么 base64 非常适合大图像,而非常适合小图像。开销是固定的百分比,因此在 300 字节的图标上,它需要花费 100 字节,没有人关心。在两兆字节的照片上,它需要花费三分之二兆字节的纯文本在文档中膨胀,并且必须下载并解析该文档才能页面渲染。数学不会随着大小而变化,但后果会发生变化。
常见问题
如何将图像转换为 Base64?
Image 选择到 Base64 方向,然后上传或丢弃您的图像,工具在本地读取文件,对其进行编码,返回原始 Base64 加上一个即用型数据 URI、一个 img 标签和一个可以复制的 CSS 片段。
什么是数据 URI?
数据 URI 是一个字符串,它嵌入文件内联而不是链接到文件,表单数据:[mime-type];base64,[data]。对于 PNG,它看起来像数据:image/png;base64,iVBORw0KGgo。。。浏览器将其呈现为图像,无论 URL 期望在哪里,因此不需要单独的请求。
Base64可以转换回图片吗?
是的。将 Base64 切换到图像方向并粘贴原始 Base64 字符串或完整的数据 URI。该工具对其进行解码,显示预览,然后让您下载重建的图像文件。
支持哪些图像格式?
PNG、JPG/JPEG、GIF、WebP、SVG、BMP、ICO 和 AVIF 均受支持。从文件中检测到正确的 MIME 类型,因此生成的数据 URI 渲染正确。
Base64 字符串为什么比我的图像大?
Base64代表三个字节的二进制数据,有四个文本字符,因此编码输出比源大约33%,那个开销就是为什么Base64更适合小图标和徽标而不是大照片。
在这里转换图像安全吗?
是。每个图像都完全在您的浏览器中使用文件API进行读取和编码。没有文件、字符串或结果上传到服务器,因此私人图像会留在您的设备上。
我应该在生产中将图像内联为 Base64 吗?
Inlining对于像图标这样的小型、经常使用的资产效果很好,因为它可以删除HTTP请求,避免图像闪烁丢失,对于大型图像通常最好保留单独的文件,这样浏览器就可以独立缓存它们。
转换器是否离线和移动工作?
是。因为所有处理都是客户端,即使没有连接,它也可以在页面加载后工作,并且界面跨现代桌面和移动浏览器响应灵敏。
