html – 响应式设计：针对不同屏幕尺寸的不同图像

我们的客户希望在较小的屏幕上显示不同的横幅图像,而不是在较大的屏幕上.不只是收缩/拉伸适合,而是实际上替代不同的图像.全尺寸的图像是相当复杂的 – 几个人,两个标志和一些装饰文字,因此,他们想要裁剪一些人的较小图像,删除标志等.所以他们想要最大的,最复杂的桌面图像,中型设备的更简单的图像,然后更小更简单仍然是最小的.

这样做最好的方法是什么？

我的第一个想法是包括所有三个图像,并使用@media最小/最大宽度使其中两个在任何给定的大小看不见.喜欢：

@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,但这似乎是一堆复杂性.

我简单地想到使徽标和文本分开的图像,将实际的图片分割成碎片,然后尝试将它们全部组合成重叠的图像.但是,这听起来像是要做正确的工作,然后我必须确保它看起来正确的所有可能的大小,不那么容易缩小或拉伸等.虽然这可能是在这个特定的我更喜欢将来可以使用的一般解决方案.

有人做了这样的事情,并且有一些关于最好的方式的想法吗？