Tagged

雪碧

A collection of 3 posts

css sprites

CSS雪碧图会占用太多浏览器内存吗?

可能是某篇微博的关系,今天有人来评论说,使用雪碧图,内存会暴涨的。。。这个问题讨论的也蛮多了,那,到底,使用雪碧图后,会占用很多内存吗? 实验: 下午做了个简单的实验,用99个128px*128px的png 32图片,写了三个页面来做测试: 只用img标签调用; 用css分别调用每个png图片做背景; 使用雪碧图做背景 然后分别用Chrome、IE6/7/8/9、Firefox做测试,具体的数据我这里就不详细列了,感兴趣的话可以自测一下。 结论: 在各浏览器下,三个页面占用的内存相当,只有很小的差异,Chrome下,雪碧图占用内存略少一点点儿,IE下略多一点点儿。。。 包括mouseover等交互事件,对浏览器内存也没什么影响,只是会影响CPU占用率——这个即便纯色背景色都会在事件触发时提高CPU占用率的。。。 所以,雪碧图的真正问题是利用率的问题,如大猫所说,如果你雪碧图中合并了10个icon,结果实际只使用了3个,那才是浪费了内存。 其实,图片在浏览器中占用的内存是可以计算的:透明的图片,内存占用是长*宽*4,不透明图片占用是长*

css

CSS雪碧:要还是不要?

声明,本文中所称CSS雪碧即为CSS Sprites,这个词组一直没有一个固定或者约定俗成的中文翻译,一些人开始称之为CSS雪碧,我们且当作一次尝试吧,如果大家觉得不妥,今后还会继续直称CSS Sprites。——神飞 CSS雪碧已经出现一段时间了,并上升为一种可以让你的网站速度变快的方式。Steve Souders刚刚在Velocity ’09上展示了SpriteMe! (讨论——为什么在你可以使用canvase和toDataURL和及时生成雪碧的时候还要使用CSS雪碧生成器或其它基于服务器的工具?)。然而,关于CSS雪碧有一些误解,最主要的一个就是它们没有缺点。 CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中,从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染(值得一提的是,这也就意味着你的标签变得更加复杂了,图片是在CSS中定义,而非标签)。 CSS雪碧的最大问题是内存使用。除非这个雪碧图片是被非常小心的组织,你就会最终使用大量的无用的空白。我最喜欢的例子是来自于WHIT TV的网站,那里的这张图片用作精灵。注意这是一个1299×15,000像素的PNG图片。它也被压缩的很好——实际下载大小只有大概26K — 但是浏览器并不会渲染压缩后的图片数据。当这个图片被下载并被解压缩之后,它将占用差不多75MB的内存 (1299 * 15000 * 4)。如果这个图片并没有使用alpha透明,它将会被优化至1299 * 15000 * 3,但是要在损失渲染速度的情况下。

css

神圣的精灵

原文:[神圣的精灵](http://www.qianduan.net/holy-sprites.html) 整理自:[Holy Sprites](http://css-tricks.com/holy-sprites/)- - - - - - CSS Tricks 前段时间搞了一个名为[炫耀一下你的精灵吧!](http://css-tricks.com/sprites-contest/)的比赛,很多网友贴出了很多很棒的CSS精灵图片。这里是CSS Tricks精选出来的一些精灵图片。从中我们可以膜拜一下这些牛站们对CSS中用到的图片的处理方法。 这些图片中的一些根据我们网站的需要可能有些压缩。但是本文的意思并不是让大家模仿他们,只是希望它们能给你一些灵感的火花! PS:现在很多人开始称呼CSS sprite为CSS雪碧,我认为这是个很好的叫法,大家认为呢?——神飞