Image 响应图像或不同的图片

我想知道哪一种方法能更好地创建具有引导功能的响应性网站

1- Use img-responsive class for responsive images
2- Use 5 different images for different @media

---

视情况而定。如果您使用的是大图像，可能最好使用不同的尺寸，因为较小的尺寸更适合移动设备，尤其是在移动数据连接上。

除了小图像，我会使用不同的图像以获得不同的分辨率。但是不要在CSS中使用媒体查询——在HTML中这样做有一个简单的方法

这些东西还没有完全实现，但是最近有了一些进展（尤其是在Chrome上）。然而，这其中有一个原因——我在这方面有很好的经验

示例：它可能如下所示：

<picture>
    <source media="(min-width: 1440px)" srcset="2000px.jpg 1x, 4000px.jpg 2x">
    <source media="(min-width: 500x)" srcset="1440px.jpg 1x">
    <source media="all" srcset="480px.jpg 1x">
    <img src="fallback.jpg" alt="alternative text">
</picture>

按顺序处理-标记，并使用具有第一个匹配媒体查询的标记。因此，这将：

在宽度至少为1440px且设备像素比小于2x的视口上渲染图像

2000px.jpg

在宽度至少为1440px且设备像素比至少为2x的视口上渲染图像

4000px.jpg

在480px到1439px宽的视口上渲染

1440px.jpg

（设备像素比无关紧要）

在所有其他情况下渲染

480px.jpg

，以下情况除外：

如果浏览器不支持图片标记，请渲染图像

fallback.jpg

使用-tag并不是做这类事情的唯一方法，还有更多的可能性。参见上面链接的标准草案