我们的客户想在小屏幕和大屏幕上显示不同的横幅图片。不仅仅是缩小/拉伸以适应屏幕大小，而是实际替换成另一张图片。完整尺寸的图片相当复杂，包括几个人、两个标志和一些装饰文本。因此，他们想从小图像中裁剪掉一些人物，去掉标志等等。因此，他们希望在桌面设备上使用最大、最复杂的图像，在中型设备上使用较小、更简单的图像，在最小的设备上使用更小、更简单的图像。
那么，最好的方法是什么？
我首先想到的是将所有三个图像都包含在内，并使用 @media min/max 宽度来在任何给定的尺寸下使其中两个图像不可见。例如:
@media (max-width: 400px) { .smallimg {display: block} .midimg {display: none} .bigimg {display: none} }
@media (min-width: 401px) and (max-width: 700px) { .smallimg {display: none} .midimg {display: block} .bigimg {display: none} }
@media (min-width: 701px) { .smallimg {display: none} .midimg {display: none} .bigimg {display: block} }
这种方法看起来是可行的，但每次都会下载全部三张图片，这似乎浪费了带宽。我可以将这些图片从img标签改为CSS背景图像，这样会更好吗？它是否能避免下载全部三张图片，还是仍然会下载？
我曾考虑通过编写一些JavaScript代码来根据屏幕尺寸动态更新img标签中的URL，但这似乎会增加很多复杂性。
我曾简要想过将标志和文本分开制作成不同的图片，并将实际图片分解成多个部分，然后将它们组合成重叠的图片。但是这听起来需要很多工作来做到完美，而且我必须确保它在所有可能的尺寸下都能正确显示，如缩小或拉伸等，这并不容易。虽然在这种特殊情况下可能是可行的，但我更喜欢一个通用的解决方案，以便将来可以使用。
有没有人做过类似于这样的事情，并且对如何最好地完成它有一些想法？