如何使可在視網膜和非視網膜設備來使用視網膜準備圖像

Preparing the images for retina-ready (web)

這是澄清的，因爲這麼多的話意味着不同的事情不同人。看起來，在視網膜和非視網膜設備上都有一張看起來不錯的圖像：

如果屏幕上的圖像應該是最大寬度400和最大高度300，那麼圖像本身應該是800 x 600，ppi爲144.然後文件應該被高度壓縮以最小化它的下載時間。

當顯示圖像，你就用這樣的CSS/HTML代碼，迫使其最大寬度和最大高度：

<img src:"imagethatis800x600.jpg" style="width:400px; height:300px;" width="400" height="300" />

這是正確的嗎？（我已經解決了我們公司不會使用response.js或cdn。）

來源

2014-06-20 Paeon

更簡單的方法是使用img的srcset屬性。然後，您可以爲每個CSS像素使用不同設備像素的圖像。

嘗試無論是在桌面瀏覽器，並在手機支持的瀏覽器打開這個頁面： http://www.webkit.org/demos/srcset/

的支持仍然有限，但可能會很快得到更好的支持： http://caniuse.com/srcset

來源

2014-06-20 22:57:39 Emil

謝謝文件（視網膜或非視網膜），但因爲沒有很多的srcset（尤其是IE）的支持，這還不是一個可行的解決方案。 – Paeon

有一個新的響應圖像HTML5 standard。截至2014年7月，它僅在beta builds of browsers。但Picturefill填充已經可用。

This article很好地解釋了不同的用例。但你想要的這裏是簡單地提供高分辨率的替代圖像（例如，「視網膜」）顯示：

<img srcset="small.jpg 1x, large.jpg 2x" 
    src="small.jpg" 
    alt="A rad wolf" />

來源

2014-07-09 10:54:19 mb21

對於廣泛的瀏覽器兼容性，你也可以在容器元素使用CSS背景圖像和控制背景與media queries/dpi queries

看看這個fiddle

#container { 
    background-image: url(http://placehold.it/200x200); 
    width: 200px; 
    height: 200px; 

    @media 
     only screen and (-webkit-min-device-pixel-ratio: 2), 
     only screen and (min-resolution: 192dpi) { 
      background-image: url(http://placehold.it/400x400); 
    } 
}

來源

2014-07-09 11:06:03 alberto2000

對不起，我無法爲此使用css背景。 – Paeon

如何使可在視網膜和非視網膜設備來使用視網膜準備圖像

回答

相關問題