响应图像或不同的图片

Question

我想知道哪一个是使用bootstrap创建响应式网站的更好方法。

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

Answer 1

除小图片外，我会针对不同的分辨率使用不同的图像。但是不在CSS中使用媒体查询 - 在HTML中有一个draft of a standard。

这个东西没有完全实现，但最近有一些进展（特别是在Chrome中）。但是，有一个JavaScript polyfill - 我已经用它做了很好的经验。

示例：它可能如下所示：

<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>

按顺序处理＆lt; source＆gt; -tags，并使用具有第一个匹配媒体查询的那个。所以这会：

1. 在视口上渲染图像2000px.jpg，宽度至少为1440像素，设备像素比率小于2倍
2. 在视口上渲染图像4000px.jpg，宽度至少为1440像素，设备像素比率至少为2倍
3. 在宽度介于480px和1439px之间的视口上渲染1440px.jpg（设备像素比无关紧要）
4. 在所有其他情况下呈现480px.jpg，但以下情况除外：
5. 如果浏览器不支持图片代码，请渲染图片fallback.jpg。

使用＆lt; picture＆gt; -tag不是这样做的唯一方法，有更多的可能性。请参阅上面链接的标准草案。

Answer 2

这取决于。如果您使用的是大型图片，最好选择不同的尺寸，因为较小的尺寸更适合移动设备，尤其是移动数据连接。