V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
yech1990
V2EX  ›  分享发现

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

  •  
  •   yech1990 · 2015-12-24 14:09:29 +08:00 · 6330 次点击
    这是一个创建于 3259 天前的主题,其中的信息可能已经有所发展或是发生改变。

    "黑科技"是引号..

    • 看到一个只有一个 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"/>
    

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

    34 条回复    2015-12-25 14:17:46 +08:00
    likexian
        1
    likexian  
       2015-12-24 14:11:22 +08:00
    减少连接数
    username10086
        2
    username10086  
       2015-12-24 14:12:03 +08:00
    有些 icon 小图标 有些人喜欢这么搞。大位图这样搞的话也不好。又不能防止素材被扒。
    可能是 CODE 的情怀吧!
    lyragosa
        3
    lyragosa  
       2015-12-24 14:12:53 +08:00
    大清……
    roys
        4
    roys  
       2015-12-24 14:16:34 +08:00
    那楼主一定没通过 base64 上传图片的经历吧。
    imn1
        5
    imn1  
       2015-12-24 14:17:00 +08:00
    1.减少连接数
    2.定位更方便
    3.可直接编程
    Phariel
        6
    Phariel  
       2015-12-24 14:23:40 +08:00
    base64 适合各种小图标,尤其适合快速开发,因为为了减少请求,现在很多小 icon 都做成了一个字体集合,这个改起来相当麻烦,有时候我为了偷懒直接转 base64 。。。
    neo2015
        7
    neo2015  
       2015-12-24 14:24:43 +08:00
    这不黑,, 很久的技术
    SourceMan
        8
    SourceMan  
       2015-12-24 14:26:00 +08:00
    .....
    Jaylee
        9
    Jaylee  
       2015-12-24 14:27:18 +08:00
    无知
    miao
        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
    shichimiya
        11
    shichimiya  
       2015-12-24 15:29:25 +08:00
    浏览器工程师加班加点恋爱都没时间谈终于做好的功能被归功到网站头上了
    yksoft1
        12
    yksoft1  
       2015-12-24 15:42:00 +08:00
    Google 图片搜索的结果里早就用 base64 blob 了
    TimePPT
        13
    TimePPT  
       2015-12-24 16:24:53 +08:00
    base64 而已……
    seraphim
        14
    seraphim  
       2015-12-24 16:28:55 +08:00
    图片二进制数据 base64 编码,减少网络请求次数
    qiaobeier
        15
    qiaobeier  
       2015-12-24 17:17:33 +08:00
    现在字体也 base64 了,除了减少请求外,减少等待时间也是很重要的目的。尤其字体,背景图这种加载很靠后的内容。
    shakoon
        16
    shakoon  
       2015-12-24 17:20:42 +08:00
    其实,十几年前(可能更早但我不知道) email 就是用这种形式嵌入图片的了。
    比较近代的应用可以在 Google 全家发现。我自己写的 chrome 扩展就偷了 google 的图片。
    lk920724
        17
    lk920724  
       2015-12-24 17:33:15 +08:00
    和雪碧图有关系么= =?
    wangyongbo
        18
    wangyongbo  
       2015-12-24 17:41:58 +08:00
    还有一种情况,比如用户上传了一张图片,实际还没传到服务器上,但是要在浏览器显示一个预览图,也可以用这种方式显示图片。
    iTakeo
        19
    iTakeo  
       2015-12-24 17:57:40 +08:00
    base64 编码,这种用在小 icon 上面还是很实用的,虽然现在大部分都 webfont 了,用在大图上面,得不偿失了
    49
        20
    49  
       2015-12-24 17:59:09 +08:00 via Android
    减少请求数而已,类似的应用还有 inline css 和 inline JavaScript ,然而有了 HTTP2 之后,这些都没必要了
    20140930
        21
    20140930  
       2015-12-24 19:04:45 +08:00
    smzdm 里的微信图片二维码也是这样啊
    stormpeach
        22
    stormpeach  
       2015-12-24 20:05:35 +08:00
    全静态安全啊
    XianZaiZhuCe
        23
    XianZaiZhuCe  
       2015-12-24 20:08:44 +08:00 via Android
    不懂
    HeartJ
        24
    HeartJ  
       2015-12-24 20:29:11 +08:00
    长知识了
    fish267
        25
    fish267  
       2015-12-24 20:36:46 +08:00
    涨知识了
    Khlieb
        26
    Khlieb  
       2015-12-24 20:52:34 +08:00
    火狐有一个附加组件专门做这个
    https://addons.mozilla.org/zh-CN/firefox/addon/base64-encoder/
    LEFT
        27
    LEFT  
       2015-12-24 20:55:34 +08:00 via iPhone
    base64 ,老浏览器不支持, ie8 好像最多 256 ,放 js 里比较好,免得改路径头疼,少一个请求
    kfll
        28
    kfll  
       2015-12-24 21:22:50 +08:00 via iPhone
    关键词是 data uri ,因为是合法 uri 所以你可以跟 http:// 啥的一视同仁。

    内容转成 base64 不是必须的。
    daacui
        29
    daacui  
       2015-12-25 02:57:10 +08:00 via iPhone
    大图别用 icon 专用
    zonghua
        30
    zonghua  
       2015-12-25 03:13:47 +08:00 via iPhone
    真希望面试都考这些,都懂。
    micookie
        31
    micookie  
       2015-12-25 08:51:52 +08:00
    很久以前就发现了。、、、、、
    nooper
        32
    nooper  
       2015-12-25 12:53:26 +08:00
    webpack 能自动生成雪碧图。
    KyleMeow
        33
    KyleMeow  
       2015-12-25 14:01:24 +08:00
    Adblock 通过过滤 jpg png 等图片后缀名无法屏蔽这种内嵌到源代码的图片,导致每次开热点时还是会看到很多图片,流量用的仍然飞快。
    ynztyl10
        34
    ynztyl10  
       2015-12-25 14:17:46 +08:00
    晋太元中
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5613 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 07:10 · PVG 15:10 · LAX 23:10 · JFK 02:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.