處理高分辨率顯示器（主要是iOS視網膜顯示器）的高分辨率網頁圖像的正確方法是什麼？

我有一個移動網站利用jQuery Mobile，但坦率地說，這些圖像看起來像iPhone 4/4S上的廢話。我認爲本週晚些時候推出的「新iPad」也會一樣。處理高分辨率顯示器（主要是iOS視網膜顯示器）的高分辨率網頁圖像的正確方法是什麼？

我知道這與像素比例和/或圖像DPI（或PPI或任何你想稱之爲的東西......）我們不討論這個問題。我只是想知道爲這些iOS視網膜顯示器提供高分辨率網頁圖像的最佳方法是什麼。

起初，我認爲改變圖像DPI（在Photoshop中）將解決問題。我採取了一些示例圖像，並縮小到190px的寬度。我以72 DPI和200 DPI保存了一張圖片。這沒有效果。請親自看一下（在iPhone 4/4S上）：http://haxway.com/restest/1.html每張的底部圖像是200 DPI。

然後，我沒有將高分辨率圖像保存爲200 DPI，而是將其保存爲72 DPI，但是這次我將寬度增加到528像素，所以當縮小到190像素的寬度時，〜200 DPI。這看起來有訣竅：http://haxway.com/restest/2.html如果您查看源代碼，您可以看到我強制圖像標記的寬度/高度（<img src="w4.jpg" alt="" width="190" height="143">）。

但是，我不相信這是最好的解決方案。不使用寬度/高度屬性來縮放圖像會影響渲染性能，因爲設備必須縮放圖像而不是隻加載圖像（並且不要再接觸它）？

經過一番研究，看起來好像有一些CSS媒體查詢，如-webkit-min-device-pixel-ratio [1]，您可以在高分辨率顯示中使用不同的CSS，因此可以在CSS中加載更高分辨率的圖像。但我需要定位HTML <img>標籤。我閱讀的另一篇文章（遺憾地失去了鏈接）建議使用Javascript將高分辨率的「常規」圖像替換掉。這聽起來很瘋狂！

有沒有更好的方法去做這件事？我意識到意見可能會有所不同，哪些是「最佳」方式。如果每種方法的優點/缺點都可以解釋，那就太棒了！我的目標是使用任何方法渲染速度最快（希望不使用一些hacky Javascript等）。

謝謝！

[1] http://aralbalkan.com/3331

來源

2012-03-12 DJ Tarazona

雖然你的樣品有點腥。瀏覽器所做的是逐像素地顯示圖像。像這樣看，你的圖像是相似的。 200dpi圖像的打印尺寸只是小得多。如果你想以更高的分辨率上傳相同的圖像 - 包含更多的像素 - 你會看到瀏覽器顯示的圖像大3倍。這也不是你想要的。 – commonpike 2012-05-05 22:20:33

......正好。這不是我想要的。那麼目前這種方法如何「腥」呢？（不要吝嗇攻擊......只是好奇。） – 2012-05-08 05:33:06

對不起，如果這聽起來有問題。這讓我感到困惑：我想，你想要的是更高分辨率下的相同尺寸的圖像。但是您以較高的分辨率上傳較小的圖像。如果瀏覽器*會尊重dpi，則您上傳的200dpi圖像將會小得多。（在任何情況下，感謝測試圖像 - 你幫助我）。 – commonpike 2012-05-12 20:54:27

您將需要運行某種形式的js的解決方案。目前選擇使用的是wilcox。它將爲屏幕提供正確的圖像。該解決方案的最大優點是可以緩存圖像以減輕用戶的負擔。

http://adaptive-images.com/

有一個推入，可以採取幾個源來克服這個問題的新畫面html元素引進來，但它是一個路要走關閉。

http://www.w3.org/community/respimg/

來源

2012-03-12 21:01:42 dbrennan

這是一個優勢，而不是僅僅總是在''標籤中設置'width'和'height'屬性來服務高分辨率圖像（就像我的第二個示例）？沒有「高分辨率」屏幕的設備仍然可以很好地顯示圖像。我知道它會節省帶寬，但其他任何東西？我覺得Javascript解決方案會比較慢，因爲它可能會在文檔準備好之後運行，等等。緩存不應該成爲問題，因爲我總是可以適當地設置Expires頭。我不打算攻擊這個解決方案，我只是想知道所有的成本/收益。謝謝！ – 2012-03-12 23:21:14

對於圖像標籤，我想你已經給自己的解決方案。最大的好處是，爲所有客戶發送一張相同的圖像。

對於CSS圖像，難道你不能這樣做嗎？忘記笨重的-webkit-min-device-pixel-ratio這將需要一個不同的圖像，每次他們煮了一個新的設備。只發送最大的圖像，並使用CSS3的background-size來縮小它。我沒有測試過這個。 IE < 9會給你一個問題。

我是，可能像你一樣，暈眩的html/css並沒有提供一個合適的方法來做到這一點，但只有這樣的hacky解決方法。我也像你一樣，對感到困惑，爲什麼的瀏覽器不只是堅持圖像的DPI信息。如果有人知道，評論表示讚賞。

有沒有更好的方法去做這件事？

是的，避免使用位圖圖像。使用SVG。

來源

2012-04-26 21:56:24 commonpike

我同意SVG會是一個更好的解決方案，但瀏覽器支持和性能在這個時候是差的。 =/ – 2012-04-27 19:37:37

讓事情變得更糟，ipad2在縮小圖像方面出了名。他們變得非常棘手。我和我的客戶已經達成協議，對所有圖像，內聯和背景使用132dpi。它在視網膜屏幕上完全可以接受，而且下載也不會太大。 – commonpike 2012-05-05 22:24:55

處理高分辨率顯示器（主要是iOS視網膜顯示器）的高分辨率網頁圖像的正確方法是什麼？

回答

相關問題