Twitter Bootstrap和图像

Question

我对bootstrap有点新，但在网站开发和css方面非常精通......我在绕过Bootstrap如何处理针对不同视口大小的优化图像时遇到了困难。

根据我的经验，您需要优化他们正在浏览的设备的图像，我在Bootstrap中看到的所有内容都让我相信它不会那样做。它似乎只是使用一个大的图像，并使用CSS来缩小（甚至上升）。当我们希望移动设备具有丰富的体验，并通过较小的文件进行速度优化时，这似乎与此相反。

例如，如果我想要一个图像很好地显示在布局为900px（〜200k）宽的桌面上，我会为该尺寸优化图像。对于具有布局宽度的移动设备，我会在400px（〜50k）处说明优化版本。

在我自己的系统中，我们通过用户代理预先发现并在编译期间填充正确的图像，并且我意识到我可以简单地将所有这些内容放入引导程序中，但我期望有某种形式的类似功能的机制，我是否期待太多？

我没有看到Bootstrap如何推迟在页面内容中加载图像，直到发现视口大小之后才能使用为该大小优化的正确文件？我在这里错过了什么吗？

----编辑

我敢肯定，你可以白手起家CSS基于视窗的大小定义图像路径，但它好好尝试一下答案，它会首先加载问题？

---- 编辑2014年11月

FYI，这个问题是非常过时的...... @media查询将实现不同的文件要求，但是你仍然需要单个文件大小各自在或者以某种方式动态生成它们。无论哪种方式，加载延迟任何不匹配，所以它有点优化。对于移动用户来说，在请求时识别用户代理并进一步优化是非常有益的，因为除了移动特定的文件/类以外，加载任何内容都是无用的，并且只会减慢速度。

Answer 1

默认情况下，默认情况下，Bootstrap仅使用CSS来缩放图像，因此从文件大小的角度来看它并不理想。

Adaptive Images是一个不错的选择，它将根据屏幕尺寸提供不同尺寸的图像。追溯添加容易，很简单，可以检查它是否适用于您。

使用背景图像是另一种可能性。使用媒体查询，你可以在不同的视口指定不同的背景图像，但如果你有很多图像，这会变得有点麻烦。

如果您想要看起来，http://responsejs.com应该在技术上很好地工作。

当然，还有其他选项。

祝你好运！

编辑

如果使用另一种框架是一个选项，Zurb Foundation有一个新的交换组件，它可以让您在不同的视口指定不同的图像。这很光滑。例如

<img data-interchange="[/path/to/default.jpg, (default)], [/path/to/bigger-image.jpg, (large)]"> 
<!-- or your own queries --> 
<img data-interchange="[/path/to/default.jpg, (only screen and (min-width: 1px))], [/path/to/bigger-image.jpg, (only screen and (min-width: 1280px))]">