2014年10月2日 星期四

[CSS] use image-set to support retina images

一般解析度的圖片在 retina 下其實不太漂亮, 在 retina 顯示下可以顯示更高的解析度圖片, 透過css 增加 image-set 可以user 在 使用 retina 瀏覽時使用較高解析度的圖片.

雖然目前只支援 background-image 屬性，而不能使用在 <img> tag 裡, 我覺得這個問題還滿容易解決的, 使用一個 <div> tag 加 class 後, 就可以長的像 <img> tag 了, 只是<div> tag 右邊的區塊預設會折行, 需要手動設一下 float:left;, 然後會有區塊右邊文字置頂的問題, 這個用css 也都很好解決, 設個 padding 或再使用一個 div  position:absolute; 再配合坐標; 應該就ok了.
<== 由於我不太懂 css, 這部份可能有誤.


在 retina 下的顯示實測:
可以清楚看的出來第1張圖糊糊的, 第2張圖(高解析度)就銳利很多.




相同的 html 在 PC 裡執行:
只有下載低解析度的版本.


解法1:

Serving Images Efficiently to Displays of Varying Pixel Density
https://developer.apple.com/library/safari/documentation/NetworkingInternet/Conceptual/SafariImageDeliveryBestPractices/ServingImagestoRetinaDisplays/ServingImagestoRetinaDisplays.html

header {
    background: -webkit-image-set( url(images/header.jpg)    1x,
                                   url(images/header_2x.jpg) 2x);
    height: 150px; /* height in CSS pixels */
    width: 800px; /* width in CSS pixels */
}

加個 -webkit-image-set 就做完了.

這個做法的優點是, client 端只會從 server side 下載指定大小的圖片, 對 client side 來說傳輸給顯示效果較好, 對 server side 來說, 由於多一個檔案, 所以需要 maintain 工作會多一點點, 所佔用的儲存空間多一點點, 但我覺得這個是利大於弊, 是可行的.

解法1在舊的瀏覽器不支援.


解法2:
直接放一張2倍解析度的大圖, 讓browser 自己 resize 到指定的寬和高, 這個作法更快, 相容性更高, 缺點是 client side 和解法1相比會慢一點點點(對使用者來說無感).

衷心地建議您, 如果都知道來源圖片的 pixel, Html 或 Css 裡請指明該圖片的 width + height, 只寫一個 width 是很方便沒錯, 但是在某些browser 或 eMail Client(ex: outlook)下畫面裡的圖片會為了 resize image 而"閃動", 視覺效果很差.

解法2在一些舊的瀏覽器(或eMail Reader)顯示效果會比較差, 因為他們對 image resize 的重新取樣(Resample)的處理"超差", 會有明顯的鋸齒/模糊或雜點.


結論:


  • 解法1在client side傳輸速度還是視覺效果可能比解法2好
  • 解法2在client side相容性和server side 改 css/html 實作的速度比解法1快.



相關文章:





張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)

Facebook 留言板