V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
Air_Mu
V2EX  ›  CSS

想这样直接在CSS里写上图片的编码的做法好么

  •  
  •   Air_Mu · 2013-01-06 01:32:36 +08:00 · 4031 次点击
    这是一个创建于 4369 天前的主题,其中的信息可能已经有所发展或是发生改变。
    不好意思,不懂这个正式名称叫什么..只得这样起标题。

    经常看到一些网站在使用比较小的图片时直接这样写:

    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAA.............)。
    这样有什么好处呢?
    9 条回复    1970-01-01 08:00:00 +08:00
    wzxjohn
        1
    wzxjohn  
       2013-01-06 01:34:10 +08:00
    Base64编码。理论上可以减少Http请求的发起次数,可以加快页面访问。
    Air_Mu
        2
    Air_Mu  
    OP
       2013-01-06 01:38:30 +08:00
    恩 去搜了下BASE64图片 关键词,看了一些文章。这个对网页中多次使用的图片很有效果。但是悲剧的IE7不支持..
    lingyired
        3
    lingyired  
       2013-01-06 11:08:10 +08:00   ❤️ 1
    我的建议:
    如果你的网站部考虑兼容性(主要是旧版本浏览器)的话,可以考虑使用。

    BASE64 图片,确实可以减少HTTP 请求,但也不要盲目的使用。

    BASE64 是将文件转换成字符串,你的文件多大,出来的字符串也是多大。

    因此,你需要考虑的是:
    避免CSS 过大而影响加载的体验,比如你一张500K 的背景图片,就不适合用BASE64 的方式堆进CSS,因为这样会让CSS 大了500K,从而使得CSS 加载慢,可能影响加载时候的体验。
    相反,一些小图标就很适合(几K甚至1K-)。

    如果你不喜欢CSS 切图的话,将小图片用Base64 的形式嵌入CSS 也是可取的。

    大图还是用回图片格式,小图可用Base64 代替,如果图片多的话,不妨单独用一个CSS 来装载这些Base64 的样式,避免主体CSS 加载过久。


    另,有一篇文章写得更详细,可以去参考:

    http://www.zhangxinxu.com/wordpress/2012/04/base64-url-image-%E5%9B%BE%E7%89%87-%E9%A1%B5%E9%9D%A2%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/
    lianghai
        4
    lianghai  
       2013-01-06 12:12:39 +08:00
    @lingyired:「你的文件多大,出来的字符串也是多大」这句话不对吧?
    shiny
        5
    shiny  
       2013-01-06 12:16:04 +08:00
    BASE64 编码过后的字符串尺寸更大(借助于gzip可能情况稍微好一点)

    如果有多个小图,可以用这种方式来减少http请求数;其他情况下则不太适用。
    Kaiyuan
        6
    Kaiyuan  
       2013-01-06 12:21:52 +08:00
    Base64 编码体积会比原来的文件更大的,不过我用 Base64 编码把一个 ttf 文件嵌入 CSS 里面解决 Firefox 跨域 Webfont 问题。
    liyandong
        7
    liyandong  
       2013-01-06 16:04:28 +08:00
    如果你不考虑IE6\7就可以使用。大图片不建议~~~
    allenm
        8
    allenm  
       2013-01-06 16:08:58 +08:00
    BASE64 编码出来的字符串会比原来的文件体积大,可以看这里: http://blog.allenm.me/2012/11/base64-encoding/ 不过启用 GZIP 之后,应该会减少体积的增加量。
    lingyired
        9
    lingyired  
       2013-01-06 18:46:05 +08:00
    @lianghai 嗯,感谢告之
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3600 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 04:53 · PVG 12:53 · LAX 20:53 · JFK 23:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.