这是一个创建于 3249 天前的主题，其中的信息可能已经有所发展或是发生改变。
"黑科技"是引号..
- 看到一个只有一个 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"/>不懂前端的东西, 这种黑科技有什么好处, 为什么很少看到网页这么搞的...
 |
1
likexian 2015-12-24 14:11:22 +08:00
减少连接数
|
 |
2
username10086 2015-12-24 14:12:03 +08:00
有些 icon 小图标 有些人喜欢这么搞。大位图这样搞的话也不好。又不能防止素材被扒。
可能是 CODE 的情怀吧！ |
 |
3
lyragosa 2015-12-24 14:12:53 +08:00
大清……
|
 |
4
roys 2015-12-24 14:16:34 +08:00
那楼主一定没通过 base64 上传图片的经历吧。
|
 |
5
imn1 2015-12-24 14:17:00 +08:00
1.减少连接数
2.定位更方便 3.可直接编程 |
 |
6
Phariel 2015-12-24 14:23:40 +08:00
base64 适合各种小图标，尤其适合快速开发，因为为了减少请求，现在很多小 icon 都做成了一个字体集合，这个改起来相当麻烦，有时候我为了偷懒直接转 base64 。。。
|
 |
7
neo2015 2015-12-24 14:24:43 +08:00
这不黑，， 很久的技术
|
 |
8
SourceMan 2015-12-24 14:26:00 +08:00
.....
|
 |
9
Jaylee 2015-12-24 14:27:18 +08:00
无知
|
 |
10
miao 2015-12-24 15:29:18 +08:00
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
|
 |
11
shichimiya 2015-12-24 15:29:25 +08:00
浏览器工程师加班加点恋爱都没时间谈终于做好的功能被归功到网站头上了
|
 |
12
yksoft1 2015-12-24 15:42:00 +08:00
Google 图片搜索的结果里早就用 base64 blob 了
|
 |
13
TimePPT 2015-12-24 16:24:53 +08:00
base64 而已……
|
 |
14
seraphim 2015-12-24 16:28:55 +08:00
图片二进制数据 base64 编码，减少网络请求次数
|
 |
15
qiaobeier 2015-12-24 17:17:33 +08:00
现在字体也 base64 了，除了减少请求外，减少等待时间也是很重要的目的。尤其字体，背景图这种加载很靠后的内容。
|
 |
16
shakoon 2015-12-24 17:20:42 +08:00
其实，十几年前（可能更早但我不知道） email 就是用这种形式嵌入图片的了。
比较近代的应用可以在 Google 全家发现。我自己写的 chrome 扩展就偷了 google 的图片。 |
 |
17
lk920724 2015-12-24 17:33:15 +08:00
和雪碧图有关系么= =？
|
 |
18
wangyongbo 2015-12-24 17:41:58 +08:00
还有一种情况，比如用户上传了一张图片，实际还没传到服务器上，但是要在浏览器显示一个预览图，也可以用这种方式显示图片。
|
 |
19
iTakeo 2015-12-24 17:57:40 +08:00
base64 编码，这种用在小 icon 上面还是很实用的，虽然现在大部分都 webfont 了，用在大图上面，得不偿失了
|
 |
20
49 2015-12-24 17:59:09 +08:00 via Android
减少请求数而已，类似的应用还有 inline css 和 inline JavaScript ，然而有了 HTTP2 之后，这些都没必要了
|
 |
21
20140930 2015-12-24 19:04:45 +08:00
smzdm 里的微信图片二维码也是这样啊
|
 |
22
stormpeach 2015-12-24 20:05:35 +08:00
全静态安全啊
|
 |
23
XianZaiZhuCe 2015-12-24 20:08:44 +08:00 via Android
不懂
|
 |
24
HeartJ 2015-12-24 20:29:11 +08:00
长知识了
|
 |
25
fish267 2015-12-24 20:36:46 +08:00
涨知识了
|
 |
26
Khlieb 2015-12-24 20:52:34 +08:00
|
 |
27
LEFT 2015-12-24 20:55:34 +08:00 via iPhone
base64 ，老浏览器不支持， ie8 好像最多 256 ，放 js 里比较好，免得改路径头疼，少一个请求
|
 |
28
kfll 2015-12-24 21:22:50 +08:00 via iPhone
关键词是 data uri ，因为是合法 uri 所以你可以跟 http:// 啥的一视同仁。
内容转成 base64 不是必须的。 |
 |
29
daacui 2015-12-25 02:57:10 +08:00 via iPhone
大图别用 icon 专用
|
 |
30
zonghua 2015-12-25 03:13:47 +08:00 via iPhone
真希望面试都考这些，都懂。
|
 |
31
micookie 2015-12-25 08:51:52 +08:00
很久以前就发现了。、、、、、
|
 |
32
nooper 2015-12-25 12:53:26 +08:00
webpack 能自动生成雪碧图。
|
 |
33
KyleMeow 2015-12-25 14:01:24 +08:00
Adblock 通过过滤 jpg png 等图片后缀名无法屏蔽这种内嵌到源代码的图片，导致每次开热点时还是会看到很多图片，流量用的仍然飞快。
|
 |
34
ynztyl10 2015-12-25 14:17:46 +08:00
晋太元中
|
Select Language