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))]">