使用Data URI而不是图片,有一个很好的理由。
Data URI是基于base64编码的,这意味着它比图像大约25%。但是您的CSS文件可以被缓存,因此小的大小增加可能不是一个大问题。
如果您有很多图片,则查找每个图片都会产生开销,无论是名称解析还是获取该图片作为另一资源。
所有这些意味着,如果图片很小,整个CSS文件仍然很小,并且CSS在经常访问的页面之间共享,那么如果切换到Data URI,则可以提高性能。
缺点是它们只在FX、Chrome等浏览器中有效。它们在IE8中部分有效,但仅适用于小图像。它们在IE7及以下版本中根本无效。
我认为你不会获得太多的利益……如果是文件图像,浏览器可以缓存它。除非你真正需要,否则我不会使用CSS来做这件事情。
我认为现在可以忽略不计...(一个小图片?)
然而,还有其他一些需要考虑的事情:
原因是...
对于每个加载到CSS中的图像,都会减少一次对服务器的调用,这需要时间。 我们都知道这一点从精灵图。 即使是比所有图像组合起来更大的精灵,也是可取的。
这意味着每添加一张图片,就会减少一个潜在的减速,如果使用数据:URI。
至于第二个问题...数据:URI非常友好的gZip。 我的意思是非常友好。 我们有一些巨大的遗留CSS文件。 109 kb巨大..当我们data:URI图像时,它会膨胀到惊人的246 kb!经过gZip处理后,我们只剩下126 kb。
更不用说了..精灵并不好维护,但是如果使用数据:URI,则没有太多理由使用精灵。
希望这能帮到您。
PS. 关于数据:URI的链接。 http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/#comment-5800
PS PS 查看该页面底部,以了解Nicolas有关数据:URI的更多信息
使用数据URI是指数据URI使CSS精灵过时,并通过创建Ant构建步骤扩展了CSSEmbed工具的使用。CSSEmbed“还支持MHTML模式,以使使用类似于数据URI的内部图像的IE6和IE7兼容样式表。”
此外,当将图像文件字节与base64编码字节进行比较时,请不要忘记每个http图像请求/响应都有http头的字节开销。这个例子针对Yahoo的消耗约为900字节(我修改了代理名称为example.com)。此外,yimg.com域已经优化,不会有任何cookie,并节省这些潜在的字节。
GET http://l.yimg.com/a/i/ww/met/yahoo_logo_us_061509.png HTTP/1.1
Accept: */*
Referer: http://www.yahoo.com/
Accept-Language: en-US
User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; GTB6.5; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; OfficeLiveConnector.1.3; OfficeLivePatch.0.0; .NET4.0C; .NET4.0E)
Accept-Encoding: gzip, deflate
Host: l.yimg.com
Proxy-Connection: Keep-Alive
HTTP/1.0 200 OK
Date: Sat, 31 Jul 2010 22:27:25 GMT
Cache-Control: max-age=315360000
Expires: Tue, 28 Jul 2020 22:27:25 GMT
Last-Modified: Wed, 16 Jun 2010 18:06:49 GMT
Accept-Ranges: bytes
Content-Length: 1750
Content-Type: image/png
Age: 321472
Server: YTS/1.17.23.1
X-Cache: MISS from a-proxy-server.example.com
Via: 1.0 a-proxy-server.example.com:80 (squid/2.6.STABLE22)
Proxy-Connection: keep-alive
何时使用数据URI
当用于替代图像精灵时,数据URI可以节省一个HTTP请求,每一点都很重要。然而,对于难以包含在精灵表中的图像,例如需要不同数量空格的自定义列表符号,它们更加有用。
虽然数据URI是减少HTTP请求的绝佳方式,但并不意味着在每种情况下都使用它们是合理的。由于它们直接嵌入样式表中的原始文件数据,如果过度使用,数据URI可能会导致样式表膨胀。
以下是一些有用的链接。
http://jonraasch.com/blog/css-data-uris-in-all-browsers
http://www.phpied.com/mhtml-when-you-need-data-uris-in-ie7-and-under/