为什么一些网站上的图标(例如:Youtube)都保存在同一个文件中



我试图复制youtube的布局作为css练习,当我试图下载图标时,我发现它们都保存在一个文件中。我试图附上一张图片,但我没有足够的声誉。请点击链接了解我的意思。

我想这是为了节省带宽在某种程度上,可能(请纠正我,如果我错了)限制请求的数量从每个客户端服务器?

这些图标是如何与其他图标分开加载的?什么时候采用这种方法比使用单个文件对应每个图标更有益?

包含youtube.com所有图标的单个图像文件

可以通过background-position css属性来实现。在w3schools.com上解释了为什么使用精灵表:

一个有很多图片的网页可能需要很长时间来加载和生成多个服务器请求。

使用图像精灵将减少服务器请求和保存的数量带宽。

最新更新