CSS Sprite 文件太大,无法处理

问题描述

我知道减少您对服务器的请求将有助于减少加载时间。将所有图像放入精灵中确实可以帮助解决此问题。但是,什么时候精灵太大了?

页面的精灵是 1.7mb!我想把精灵分成更小的精灵。这会增加服务器请求,而且似乎是一项毫无意义的任务。

我的网站加载速度太慢,我正在尝试找出速度下降的原因。

谁能建议我应该如何处理一个大精灵?我应该把它分成多个文件还是有其他建议来改善页面加载时间。

解决方法

最佳尺寸为 4096 x 4096 What is the maximum sprite sheet size I can use for android devices?

只要您使用的像素比这少,就应该没问题。将您的精灵图像分解成比这更小的唯一合乎逻辑的原因是,如果您想在用户等待其他人加载时为他们提供一个图像来查看。 (或者,如果您知道某些用户在访问时永远不会看到某些图片。)但这会增加整体加载时间。

至于文件大小,请根据个人喜好添加压缩。如果您对加载时间的厌恶和对压缩伪像的厌恶相等,那么您就找到了正确的平衡点。