保存移動客戶端從響應式設計下載大圖像

Question

隨着響應式設計現在變得越來越流行，響應式設計的缺點之一是移動客戶端需要下載不需要的大圖像，例如，

http://twitter.github.io/bootstrap/examples/carousel.html

頁面，非常好我的iPhone上，但圖像downloed是1500x550，這是浪費的，緩慢的，對於一些用戶來說，它招致的成本。

如果我知道客戶端是移動的，不會提供大圖像，那麼替代方法是什麼？是否有任何現有的方法/ libray，所以我不需要寫我自己的UA嗅探代碼？

Answer 1

看看http://www.w3.org/community/respimg/和http://responsiveimages.org/

它是要創建響應圖像一個規範W3工作組：

http://picture.responsiveimages.org/

現在，您可以使用使用JavaScript編寫的polyfill，它具有類似的語法，並且由相同的人根據自己的規範維護：

https://github.com/scottjehl/picturefill

我測試過它，我要去，因爲工作出色，以將其用於生產;）

希望這有助於

Answer 2

看看這篇文章，Media Query Asset Downloading。我發現使圖像成爲包裝在另一個元素中的背景圖像效果最好。

這是一個很常見的問題，而且是一個很好的問題，目前還沒有'最佳答案'。

這裏是關於Clown Car technique

我希望這可以幫助你的文章。我很高興你關心不同設備上的圖像，這是一個普遍被忽視的問題。

Answer 3

如果使用的小丑車技術，請參閱使得它在IE瀏覽器正常工作，我的筆記： http://jona.ca/blog/notes-on-using-the-clown-car-technique-in-ie