CSS Sprite 图像和响应式设计。它是不是同时加载全尺寸和响应尺寸？

Posted 2023-03-25

【中文标题】CSS Sprite 图像和响应式设计。它是不是同时加载全尺寸和响应尺寸？

【英文标题】：CSS Sprite Images and Responsive Design. Does it load both the full size and responsive size?CSS Sprite 图像和响应式设计。它是否同时加载全尺寸和响应尺寸？

【发布时间】：2016-12-18 05:36:13

【问题描述】：

我正在优化图像并减少我的网站对服务器的请求数量，因此我正在通过创建图像 CSS Sprites 来减少图像数量。

正如人们所预料的那样，对于网站设计的平板电脑/移动设备布局而言，大多数图片都较小。

因此，我计划为精灵中包含的图标和图像的移动/平板电脑大小创建图像精灵，并使用@media 查询将其切换出来，因此我不会下载比实际需要大得多的图像适用于移动设备。

我的问题可能是一个相当简单的问题，我在任何@media 查询之外引用了我的桌面精灵图像，并在@media 查询中引用了移动/平板电脑版本。如果有人从移动设备访问该网站，它是否会同时请求桌面（由于我的移动 @media 查询生效而不需要）和精灵的移动/平板电脑版本？还是只请求移动/平板电脑版本是否足够聪明，因为这是@media 查询所需的大小？

提前致谢

【参考方案1】：

是的，它会下载两个图像资源。检查这一点的最简单方法是打开开发人员工具并检查网络面板是否有图像请求，您应该会看到在移动设备上它会向桌面资产和移动资产发出请求。

您可以扩展您的媒体查询，这样您就拥有一个用于下载桌面资产的定位桌面和一个用于下载移动资产的定位移动设备。

【讨论】：

好的，非常感谢，我一直在考虑把它放在桌面的@media 中，显然如果我要为平板电脑/移动设备单独添加一个精灵，它只是添加了额外的下载，那不是如果我要同时下载两者，则需要。再次感谢