『reprint』Pixel distortion

 隨着 Retina 屏幕的逐漸普及，網頁中對圖片的適配要求也愈來愈高。如何讓圖片在放大了兩倍的 Retina 屏幕顯示依然清晰，曾經一度困擾着網頁開發者，好在 CSS3 與 HTML5 已經着力在改變這種現狀。那麼到底什麼是響應式圖片呢？

什麼是響應式圖片？

響應式圖片是指：用戶代理根據輸出設備的分辨率不一樣加載不一樣類型的圖片，不會形成帶寬的浪費。同時，在改變輸出設備類型或分辨率時，能及時加載對應類型的圖片。

CSS3 響應式圖片

對於不少 IOS 開發者來講可能已經不太陌生了，爲了適配 Retina 屏幕，傳統的 CSS3 實現方式是經過加載一張寬高分別放大兩倍的圖片，而後經過 Media Queries 使背景圖片尺寸減少一倍「background-size:50% 50%;」，例如：

.mod .hd h3 {
    background-image:url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png);/* 普通屏幕 */
}

/* ------------- Retina ------------- */
@media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */
       only screen and (min--moz-device-pixel-ratio: 2), /* Firefox 16 以前 */
       only screen and (-webkit-min-device-pixel-ratio: 2), /* Webkit */
       only screen and (min-resolution: 240dpi), /* 標準 */
       only screen and (min-resolution: 2dppx) /* 標準 */
{
.mod .hd h3{
    background-image:url(http://img04.taobaocdn.com/tps/i4/T1947tXmJhXXcCfooh-210-320.png);
    background-size: 105px 155px;
}
}

兩張圖片的對比效果：

在製做@2x圖片時須要注意一些問題：

若是相似上圖同樣是純文字內容的圖片，不要直接從大圖片縮放爲小圖片，這樣文字效果會有些失真，這是 Photoshop 渲染的問題。應該調整字號，再從新排版。能夠直接看看：一淘首頁 的效果。

藍框內是直接縮放圖片大小的效果，紅框內是把字號從32號改爲16號的效果。

CSS3 Media Queries 中用來定義設備分辨率的是 「resolution」 媒體特性，同時派生出兩個媒體特性，分別是 「min-resolution」和 「max-resolution」。該規範中規定：若查詢 Non-Square Pixels （專業術語，指高度與寬度不等的像素，能夠理解爲「非正方形像素」。計算機屏幕上及高清晰度視頻信號中 的像素是正方形的（像素寬高比爲 1:1）。標準清晰度數碼視頻信號中的像素都不是正方形的。例如：NTSC制式的像素高度大於寬度，而PAL制式的像素 寬度則大於高度。）設備，在「min-resolution」查詢中指定的值必須與最稀疏尺寸進行比較，在「max-resolution」查詢中必須與 最密集尺寸進行比較。對於「resolution」（沒有「min-」或「max-」前綴）從不查詢 Non-Square Pixels 設備。另外在 CSS image Level 3「image-resolution」屬性中定義了一些單位，好比「dppx」，各瀏覽器支持狀況以下：

 

特性	Chrome	Firefox (Gecko)	IE	Opera	Safari (WebKit)
基本特性	不支持「1」「4」	3.5 (1.9.1) 「2」	9	9.5	不支持 「1」「4」
dppx	「4」	16.0	未知	12.10「3」	「4」

 

• 「1」Chrome 支持私有屬性「-webkit-min-device-pixel-ratio」和「-webkit-max-device-pixel-ratio」。

• 「2」Firefox 8.0 以前錯誤的接受了整數數值（不帶單位），16 開始支持 dppx 單位。

• 「3」Change our implementation of the resolution media query to use CSS units。

• 「4」David Barr 在 Webkit 實現了 CSS3「image-resolution」屬性， 而且支持了 dppx，dpi 和 dpcm 單位，具體 Chrome 哪一個版本開始支持能夠自行測試，相信  Media Queries 中很快也會支持了。

須要注意幾點：

1. 「-o-min-device-pixel-ratio」的取值是分數好比「2 /3」，Demo，詳見：Opera Dev 的文章

2. Firefox 16 以前版本是「min–moz-device-pixel-ratio」，min 後面有兩個「-」。

3. 1dppx 至關於 96dpi。

顯而易見，經過 Media Queries 來實現「響應式圖片」仍是很麻煩，CSS 代碼的可維護性不高，有一些 hack 的味道。咱們更指望一種原生的語法來選擇不一樣的圖片，值得慶幸的是 CSS Image Level 4 中就實現了這種原生語法的「image-set」。

「image-set」語法：

<image-set> = image-set( [ <image-set-decl>, ]* [ <image-set-decl> | <color>] )
<image-set-decl> = [ <image> | <string> ] <resolution>

那麼上面的例子咱們能夠改成：

background-image:url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png);/* 普通屏幕 */
background-image: -webkit-image-set(
    url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png) 1x,
    url(http://img04.taobaocdn.com/tps/i4/T1947tXmJhXXcCfooh-210-320.png) 2x);/* Retina */

這裏的單位「x」等同於「dppx」，未來是否統一還有待進一步討論。注意 Webkit 目前只實現了 url() 形式的取值，color、*-gradient() 等暫不支持，並且「x」取負值彷佛也是合法的。

如下是一些常見移動設備的「min-device-pixel-ratio」值：

-webkit-min-device-pixel-ratio: 1.0

• 全部非 Retina 的 Mac

• 全部非 Retina 的 iOS 設備

• Acer Iconia A500

• Samsung Galaxy Tab 10.1

• Samsung Galaxy S

• 其餘設備

-webkit-min-device-pixel-ratio: 1.3

• Google Nexus 7

-webkit-min-device-pixel-ratio: 1.5

• Google Nexus S

• Samsung Galaxy S II

• HTC Desire

• HTC Incredible S

• HTC Velocity

• HTC Sensation

-webkit-min-device-pixel-ratio: 2.0

• iPhone 4

• iPhone 4S

• iPhone 5

• iPad (3rd generation)

• iPad 4

• 全部 Retina displays 的 Mac

• Google Galaxy Nexus

• Google Nexus 4

• Google Nexus 10

• Samsung Galaxy S III

• Samsung Galaxy Note II

• Sony Xperia S

• HTC One X

-webkit-min-device-pixel-ratio: 3.0

• HTC Butterfly

• Sony Xperia S

HTML5 響應式圖片

CSS「image-set」 解決了背景圖片的響應式問題，可是 HTML中的 img 元素怎麼辦呢？正當我束手無策的時候，2011年11月 @brucel  提出了HTML5 的一個解決草案：

<picture alt="">
<source src=hires.png media="min-width:800px">
<source src=midres.png media="min-width:480px">
<source src=lores.png>
<!-- 不支持的瀏覽器降級處理 -->
<img src=midres.png alt="">
</picture>

於此同時，其餘的一些想法如雨後春筍般涌現出來，因而 W3C 社區討論組 Responsive Images Community Group  應運而生。最新的規範在這裏：http://picture.responsiveimages.org/ （W3C http://www.w3.org/TR/html-picture-element/）。截止本文發佈時間，最近一次更新是 2013年4月24日，規範示例：

<picture width="500" height="500">
<source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x">
<source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x">
<source srcset="small-1.jpg 1x, small-2.jpg 2x">
<img src="small-1.jpg" alt="">
<p>Accessible text</p>
</picture>

能夠看到這裏的「srcset」屬性相似「image-set」，一般狀況下，「srcset」裏面的資源是具備 fallback 特性的，也就是說第一個圖片資源沒法加載的時候能夠跳過加載後面的備用資源。

可是 Apple 的 eoconnor 提出的方案是這樣的：

<img src="foo-lores.jpg"
    srcset="foo-hires.jpg 2x, 
    foo-superduperhires.jpg 6.5x"
    alt="decent alt text for foo.">

目前咱們能作的就是在CSS 中使用「image-set」屬性值，由於目前大部分 Retina 屏幕的設備的瀏覽器都是基於 Webkit 內核的，若是有特殊的需求可使用 Media Queries。

一絲
2013-1-15

最後更新：2013-4-28

轉載請註明原文地址：http://www.iyunlu.com/view/Front-end/70.html