如何為移動體驗制作響應式圖像

Question

UPDATE

---

我有全屏背景圖片。 這為移動瀏覽帶來了問題，因為圖像很大且高分辨率。

接下來的問題是視網膜顯示器如何設計/程序員如何准備處理這個問題？ 我看到很多關於如何在圖像之間切換的文章。 但后來我對像素密度與分辨率過分混淆。 需要的時間和地點以及如何以及為何將其作為目標。

例：

*全屏背景圖像，分辨率為1900x1080和72dpi。 為了獲得最佳優化，每個分辨率/像素密度應該有多少個圖像？ 此外，鑒於這種情況，哪個庫/插件/語義最適合解決這種情況？

最后，如果我使用媒體查詢來定位和切換背景圖像，它會下載所有圖像嗎？ 或者只是滿足要求？

@media (min-device-width : 768px) 
and (max-device-width : 1024px) {
background-image:url('paper1024.png');
}

@media only screen 
and (min-width : 1824px) {
background-image:url('paper1900.png');
 } 

謝謝堆棧

---

//舊問題並沒有刪除它以用於評論目的//

所以我正在建立一個全屏圖像的響應式網站。 我一直在遇到的問題是原始圖像對於移動下載而言要大得多。

作為響應式設計的新手，我不知道這是一個問題，並且我自己也不予理睬。 我讀了幾篇文章

最好的是：
http://www.alistapart.com/articles/responsive-images-and-web-standards-at-the-turning-point/

我的問題是：我不相信<picture>標簽對公眾開放？ 我無法找到任何更多信息。

有誰知道這是否允許？ 此外，有關如何正確使用它的更多信息/文檔。

如果picture不適用。 是否有任何“ 標准 ”的關注，使圖像響應膨脹的移動帶寬？

Answer 1

這是我在上一個項目中進行視網膜檢查的方式：

首先使用background-image在普通css中設置桌面圖像：

#bg {
  background: image-url('wallpaper_desktop.jpg') center top;
  background-size: 1024px 768px;
}

然后，我用iphone等手機：

@media only screen and (min-device-width: 320px) and (max-device-width: 480px){
  #bg {
    background: image-url('wallpaper_mobile.jpg') center top;
    background-size: 320px 480px;
  }
}

然后它涉及視網膜圖像處理。 使用圖像，大小加倍（請參閱文件名中的“@ 2x”）：

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  #bg {
    background: image-url('wallpaper_mobile@2x.jpg') center top;
    background-size: 320px 480px; // Original size
  }
}

由於還有帶Retina顯示屏的iPad和MacBook，我們應該考慮為它們提供更大和高分辨率的版本，與高分辨率手機相比：

@media only screen and (max-device-width: 2048px) and (-webkit-min-device-pixel-ratio: 2) {
  background: image-url('wallpaper_desktop@2x.jpg') center top;
  background-size: 1024px 768px;
}

所以，通常我每個圖像使用4個版本。 2個桌面版本（一個用於視網膜顯示屏的尺寸加倍）和2個移動版本（另一個用於視網膜顯示屏的尺寸加倍）

順便說一句：當使用媒體查詢附加圖像時，沒有其他請求。