我有一个非常大的英雄形象，设置为背景图像，占用整个初始视口大小。我希望根据设备分辨率提供多种尺寸以提高速度。
媒体查询似乎是最好的方法，但我对实施它们有一些疑问：
使用width功能或device-width功能会更好吗？我正在考虑后者，因为如果用户调整浏览器大小，宽度可能会改变，这可能会触发加载新的背景图像。使用device-width，我可以检测到最大可能的屏幕尺寸，并加载图片，如果用户将浏览器调整为完整尺寸，则图片的尺寸可能会很好。
您如何适应像素密度？我需要使图像大两倍，或者在某些情况下，大三倍，这样它们才能在像素密度大的设备上正确渲染。因此，当我不得不考虑潜在的高像素密度时，我无法真正减少图像尺寸。我可以将特定像素密度和设备宽度的媒体查询结合在一起，但这似乎是一个复杂而次优的解决方案。
我很想听听人们为此找到的一些解决方案。