相关疑难解决方法(0)

我在两年前开始使用图像精灵,因为我看到Apple和Facebook这样的网站在他们的网站上使用它们.

毫无疑问,如果您下载一个60kb图像而不是三个20kb图像,加载页面会更快,但是,我最近被告知精灵虽然加载速度更快,但实际上客户端的内存消耗更多.

在我眼里:

1. 精灵加载速度更快,占用带宽更少
2. 从开发人员的角度来看,它们更易于维护,因为所有图形都在一个地方

但是,在我的同事眼中:

1. 每次在页面上引用精灵时,图像都会在内存中创建,从而减慢客户端浏览器的速度
2. 加载速度的差异不足以证明浏览器的内存使用量增加是合理的
3. 互联网旨在以小数据包传输,因此加载较小的图像比加载较大的图像更好

这让我提出这个问题,精灵实际上是值得使用还是我的同事咆哮着错误的树？

在我正在创建的网站上,我有大约100种不同时间显示的缩略图(64x64).在某些页面上,可能只显示5-15个缩略图.在其他人,所有100个都被加载.

我正在考虑使用像CSS sprites这样的技术来显示图像.也就是说,不是每个拇指都有图像标签,而是执行以下操作:

<span class=thumb1"></span>

然后使用CSS将所有拇指拼接在一起的单个图像切片.也就是说,一个图像全部为100个拇指(在这种情况下,为640x640图像).

我的问题:

• 这是一个好主意吗？
• 如果是,我应该在图像出现的所有页面上进行,还是仅在包含所有图像的页面上进行？
• 还有除精灵之外的其他技术可能比简单地包含带有img标签的图像更好吗？

在阅读Not Your Parent的手机:智能手机用户体验设计指南 - 粉碎杂志时,在"数据传输和定价"部分,下面的内容引起了我的注意:

最近有很多关于响应式网页设计的文章.这种方法确实在最小化数据传输方面带来了一些挑 Jason Grigsby对细节进行了非常好的报道.总而言之,CSS媒体查询 - 响应式设计的神奇之处 - 几乎不会减少数据传输到移动设备的开销.调整大小或隐藏不需要的图像仍需要将完整图像下载到浏览器.此外,JavaScript库等资源可能无法下载到移动设备,甚至无法为用户启用.

正如我在阅读Smashing mag文章中提到的Jason Grigsby 的冗长文章时,我想知道是否有人遵循一些最佳实践来避免这些问题？