Twitter引导程序和图像

Question

我对引导程序有点新手,但对网站开发和css非常精通......我无法解决Bootstrap如何针对不同视口大小处理优化图像的问题.

根据我的经验,你需要针对他们正在观看的设备优化图像,我在Bootstrap中看到的所有内容都让我相信它不会那样做.看起来它只是使用一个大图像并使用css来缩小(甚至向上).当我们希望移动设备拥有丰富的体验,并且针对较小的文件优化速度时,这似乎是反直觉的.

例如,如果我希望图像能够很好地显示在宽度为900px(~200k)的桌面上,我会为该尺寸优化图像.对于具有布局宽度的移动设备,我可以使用400px(~50k)的优化版本.

在我自己的系统中,我们通过用户代理预先发现并在编译期间填充正确的图像,我意识到我可以简单地将所有这些都放入引导程序中,但我预计会有类似的机制用于类似功能,我期待太多了吗？

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

----编辑

我很确定你可以根据视口大小在Bootstraps CSS中定义图像路径,但是它不能回答它首先加载的问题？

---- 2014年11月编辑

仅供参考,这个问题已经过时了...... @media查询将完成不同的文件请求,但是您仍然需要每种大小的单个文件或某种动态生成它们的方式.无论哪种方式,任何非匹配都会延迟加载,因此它会稍微优化一下.对于移动用户来说,在请求时识别用户代理并进一步优化仍然是有益的,因为除了移动特定文件/类之外的任何东西都是无用的,只会减慢速度.

Answer 1

你是正确的默认情况下,Bootstrap只使用CSS来缩放图像,所以从文件大小的角度来看它并不理想.

自适应图像是一个不错的选择,它将根据屏幕尺寸提供不同尺寸的图像.它可以很容易地追溯添加,以便检查它是否适合您.

使用背景图像是另一种可能性.使用媒体查询,您可以在不同的视口中指定不同的背景图像,但如果您有大量图像,这会变得有点混乱.

如果你想获得幻想,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))]">