html - 如何在特定屏幕尺寸上仅加载特定图像？

Question

关于响应式设计，如果我有一组大背景图像，它们在大屏幕尺寸上相互淡入淡出，并在较小的屏幕尺寸上隐藏它们，它们是否仍会在较小的屏幕尺寸上加载？如果图像不显示，我不想使用不必要的带宽。似乎它们无法加载到我的计算机上，但我很难测试每一种可能的设置。如果它们加载但默认不显示，有什么办法可以解决这个问题吗？另外，如果可能的话，我希望它无需使用 javascript 即可工作。

Answer 1

“自适应图像” 检测用户的屏幕尺寸并自动为该特定尺寸生成缓存。我以前在我的一些元素中使用过它，它非常有效。

您可以找到更多信息here和 here

而且您无法避免使用 Javascript，据我所知，这是唯一的解决方案。但这很简单，所有步骤都在上面的链接中给出。