Tagged

css sprites

A collection of 5 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雪碧,我认为这是个很好的叫法,大家认为呢?——神飞

css

CSS Sprites的一些技巧

译自:[Mozilla](http://blog.mozilla.com/webdev/2009/03/27/css-spriting-tips/) 原文:[CSS Sprites的一些技巧](http://www.qianduan.net/css-spriting-tips.html) 版权所有,转载请注明出处,多谢众所周知,减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites——将多个图片整合到一个图片中,然后再用CSS来定位。 下面是一张样图: 本文的目的并不是讲CSS Sprite如何让一个网站更快,而是说一些使用CSS Sprite的时候的一些最佳实践。 不要等到你完成切片之后才开始sprite. 如果你边切图边写CSS,然后等你完成了整个网站之后再来拼接这些图片到一个Sprite中,你就不得不完全重写你的CSS,你也必须要花费很多的时间来用PS拼接大量的图片——这是件令人倍感纠结的事情。但是如果边切图边整合,就会比较容易些。 把图片放到它要显示的地方的相对的地方 这个小技巧貌似比较难理解。我直到创建一个比较大的sprite的时候才理解到这一点。比如,如果我们希望一个图片出现在一个元素的左侧: 将那个图片放到sprite图片的右边(本文开始的那个sprite图片)。这样的话,当你通过CSS移动背景图片的位置的时候,

css sprites

创建简单有用的CSS Sprites

让我们从头开始吧. 什么是CSS Sprites? CSS sprites (CSS精灵,也有人翻译成CSS妖精) 是一种通过整合图片来改善我们的页面的加载时间,减少服务器请求数的方法。在这篇文章里,我将教你如何来实现它们。 看一下演示 | 下载 为了搞清楚什么是CSS sprite ,这里是一张 Google制作的CSS 精灵图片: 当你用谷歌搜索的时候,你会发现页面底部的分页,你会看到就像这样的东西: Gooooooooooooooogle. 字母 ‘o’ 是用CSS sprite平铺的,这样就替代了重复加载15次字母,它只是加载了包含所有字母的精灵,一次完成。 创建我们的CSS sprite – 步骤一: 制作图片 Ok, 首先,我们必须制作我们的精灵图片。你可以使用Fireworks,Photoshop或任何你能使用的软件。这里是我做的: 正如你看到的,精灵是由一些中间被1像素款的线划分开来的图像组成的。这种区分不是真的必须的,就像你所看到的谷歌的精灵,但当我们写CSS的时候它使我们的工作更加方便,请相信我。 步骤二: 创建我们的精灵图片显示者(显示层) 一旦我们制作了我们的精灵图片,我们必须制作一个透明的1px