原来网站还有这种"黑科技".....

[yech1990]

"黑科技"是引号..

• 看到一个只有一个 html 文件的网页, 想了一下应该 js,css 都是直接写在里面的, 可又发现网页嵌了很多图片, 第一感觉应该是外链.
• 打开源码一看惊呆了, 图片居然是这种格式嵌进去的.....

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADfUlEQVR42rWXT0hUURTGj5ZpaZqDmYNaCZkuMjXFiiTThZEyoiRlZGmCBYlWMBU5kW+cmRwhKEQXEkRFEBkGQUbpQmnjwk0S4TKiFuWmFqlhf17fbe7Qm8e9z/dmpoEfDr57z/nueeeec4ZUVaVw6CNKdRM1KEQ3wWMwCSbAQ9AHakDSSnYsO4bRDDAAloC6Al9Bbz/R+qgIgLFy8MmEYz1zHqI8qQB8NoCtoAgcAPWgFZzXOC8D38NwHuQzyApLgJ8oBZs/Sgw/ZbngJcpmp8T34/jfa8naaXiLsfwKYNQlMejXG+TRSgJjoj2wVWtJADbF8vDpjb0ROdfsSweLgn3PLQnoJSqWnL7ZhPhBwb6FYaI4fQ4kgy2gEFRocwAh65AIyDAhoE6yt9S0ACx2CwwsG4VfI6BIkgcOKzkwIDDyXninaWQV6s5uIuUSuJdEzpeSCLRaEXBDYGA+1PFwHALVAafvgBokhS4Ia0IJOWaxvtaUANkVHCCKDzj3ZsPZtNZxkM3UJhSQSe3s+ZTZJDwmMoKik0vks8PQB5FzRhHVCwXg1ZgX4COyi4z0UCweKTMS5wvAc5ES3+r3dZFtia+ZMl0JWQnVG7pKq7/F0xWRc4jy5GLNfpHwaxTbiTWNYMhKKXaIjJ0h+99E0zhfBFl4Vg2+SNpzcljtGBtHRSIu01q1ifLVCqpkf1mkXoGfgrW/tfdfVIgyQT4oA1U8D06As2wNGypgZCaCdtxtNA+kghxQrGnHLeAc6NFEIQHcZqex4JgNMEeiNpIxtlHzgwYqVJ0Y+VZwPg/SojoTBiKm9AcTz0Zdag61qAXUyFqvXyBi6H8IcErufzqfiPXNx2UoAJ9EkAZQVmk7L0h7QCWoAYdBM2jnAuokAqpYl4TT+4JItBkJsPGZcCco506bwGmA07K5hG6BO1wAZkjll0DABHvOBg44HNcJ+KEfx8J+BVzEmDgKbge/MWv4bwgttn/7vdkRCugtkbyGZYhwsdlAInwXeAYmIxLAjXllnZDPBiOgGyD6yiMwq3ke0g3X8WKUwbsiS8QCUAr28cp4iBeoo+BkYJ8aA0N3DUQYMSVKwh1gL6jmmc9aMroX4RTs9ygNAjikJ6GRcHfyRmRFwHjEryBUxPWNMIrboswZOGU35wXADVMSoiogVIxvE6JSGej77lPgIGaEvKBTLX8AEZuD+ek/sxoAAAAASUVORK5C" alt="FastQC"/>

不懂前端的东西, 这种黑科技有什么好处, 为什么很少看到网页这么搞的...

[likexian]

减少连接数

[username10086]

有些 icon 小图标 有些人喜欢这么搞。大位图这样搞的话也不好。又不能防止素材被扒。
可能是 CODE 的情怀吧！

[lyragosa]

大清……

[roys]

那楼主一定没通过 base64 上传图片的经历吧。

[imn1]

1.减少连接数
2.定位更方便
3.可直接编程

[Phariel]

base64 适合各种小图标，尤其适合快速开发，因为为了减少请求，现在很多小 icon 都做成了一个字体集合，这个改起来相当麻烦，有时候我为了偷懒直接转 base64 。。。

[neo2015]

这不黑，， 很久的技术

[SourceMan]

.....

[Jaylee]

无知

[miao]

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADfUlEQVR42rWXT0hUURTGj5ZpaZqDmYNaCZkuMjXFiiTThZEyoiRlZGmCBYlWMBU5kW+cmRwhKEQXEkRFEBkGQUbpQmnjwk0S4TKiFuWmFqlhf17fbe7Qm8e9z/dmpoEfDr57z/nueeeec4ZUVaVw6CNKdRM1KEQ3wWMwCSbAQ9AHakDSSnYsO4bRDDAAloC6Al9Bbz/R+qgIgLFy8MmEYz1zHqI8qQB8NoCtoAgcAPWgFZzXOC8D38NwHuQzyApLgJ8oBZs/Sgw/ZbngJcpmp8T34/jfa8naaXiLsfwKYNQlMejXG+TRSgJjoj2wVWtJADbF8vDpjb0ROdfsSweLgn3PLQnoJSqWnL7ZhPhBwb6FYaI4fQ4kgy2gEFRocwAh65AIyDAhoE6yt9S0ACx2CwwsG4VfI6BIkgcOKzkwIDDyXninaWQV6s5uIuUSuJdEzpeSCLRaEXBDYGA+1PFwHALVAafvgBokhS4Ia0IJOWaxvtaUANkVHCCKDzj3ZsPZtNZxkM3UJhSQSe3s+ZTZJDwmMoKik0vks8PQB5FzRhHVCwXg1ZgX4COyi4z0UCweKTMS5wvAc5ES3+r3dZFtia+ZMl0JWQnVG7pKq7/F0xWRc4jy5GLNfpHwaxTbiTWNYMhKKXaIjJ0h+99E0zhfBFl4Vg2+SNpzcljtGBtHRSIu01q1ifLVCqpkf1mkXoGfgrW/tfdfVIgyQT4oA1U8D06As2wNGypgZCaCdtxtNA+kghxQrGnHLeAc6NFEIQHcZqex4JgNMEeiNpIxtlHzgwYqVJ0Y+VZwPg/SojoTBiKm9AcTz0Zdag61qAXUyFqvXyBi6H8IcErufzqfiPXNx2UoAJ9EkAZQVmk7L0h7QCWoAYdBM2jnAuokAqpYl4TT+4JItBkJsPGZcCco506bwGmA07K5hG6BO1wAZkjll0DABHvOBg44HNcJ+KEfx8J+BVzEmDgKbge/MWv4bwgttn/7vdkRCugtkbyGZYhwsdlAInwXeAYmIxLAjXllnZDPBiOgGyD6yiMwq3ke0g3X8WKUwbsiS8QCUAr28cp4iBeoo+BkYJ8aA0N3DUQYMSVKwh1gL6jmmc9aMroX4RTs9ygNAjikJ6GRcHfyRmRFwHjEryBUxPWNMIrboswZOGU35wXADVMSoiogVIxvE6JSGej77lPgIGaEvKBTLX8AEZuD+ek/sxoAAAAASUVORK5C

[shichimiya]

浏览器工程师加班加点恋爱都没时间谈终于做好的功能被归功到网站头上了

[yksoft1]

Google 图片搜索的结果里早就用 base64 blob 了

[TimePPT]

base64 而已……

[seraphim]

图片二进制数据 base64 编码，减少网络请求次数

[qiaobeier]

现在字体也 base64 了，除了减少请求外，减少等待时间也是很重要的目的。尤其字体，背景图这种加载很靠后的内容。

[shakoon]

其实，十几年前（可能更早但我不知道） email 就是用这种形式嵌入图片的了。
比较近代的应用可以在 Google 全家发现。我自己写的 chrome 扩展就偷了 google 的图片。

[lk920724]

和雪碧图有关系么= =？

[wangyongbo]

还有一种情况，比如用户上传了一张图片，实际还没传到服务器上，但是要在浏览器显示一个预览图，也可以用这种方式显示图片。

[iTakeo]

base64 编码，这种用在小 icon 上面还是很实用的，虽然现在大部分都 webfont 了，用在大图上面，得不偿失了

[49]

减少请求数而已，类似的应用还有 inline css 和 inline JavaScript ，然而有了 HTTP2 之后，这些都没必要了