隨著retina 屏幕的逐漸普及，網頁中對圖片的適配要求也越來越高。如何讓圖片在放大了兩倍的retina屏幕顯示依然清晰，曾經一度困擾著網頁開發者，好在css3 與 html5 已經著力在改變這種現狀。那么到底什么是響應式圖片呢？
什么是響應式圖片？ 響應式圖片是指：用戶代理根據輸出設備的分辨率不同加載不同類型的圖片，不會造成帶寬的浪費。同時，在改變輸出設備類型或分辨率時，能及時加載對應類型的圖片。
css3 響應式圖片 對于很多 ios 開發者來說可能已經不太陌生了，為了適配 retina屏幕，傳統的 css3 實現方式是通過加載一張寬高分別放大兩倍的圖片，然后通過media queries使背景圖片尺寸減小一倍「background-size:50% 50%;」，例如：
.mod .hd h3 { background-image:url(/upload/pic16/56383c4a1c2b0859e6017268a77eb4ad.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(/upload/pic16/4951366feefa5a1b3441cbaf2823ada8.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中很快也會支持了。 需要注意幾點：
「-o-min-device-pixel-ratio」的取值是分數比如「2 /3」，demo，詳見：operadev 的文章 firefox 16 之前版本是「min–moz-device-pixel-ratio」，min 后面有兩個「-」。 1dppx 相當于 96dpi。 顯而易見，通過media queries來實現「響應式圖片」還是很麻煩，css 代碼的可維護性不高，有一些 hack 的味道。我們更期望一種原生的語法來選擇不同的圖片，值得慶幸的是css imagelevel 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(/upload/pic16/56383c4a1c2b0859e6017268a77eb4ad.png);/* 普通屏幕 */ background-image: -webkit-image-set( url(/upload/pic16/56383c4a1c2b0859e6017268a77eb4ad.png) 1x, url(/upload/pic16/4951366feefa5a1b3441cbaf2823ada8.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 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 imagescommunity group應運而生。最新的規范在這里：http://picture.responsiveimages.org/。截止本文發布時間，最近一次更新是2013年1月7日，規范示例：
<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.>誠然，任何一個新標準的提出，都會存在各種不同的聲音，這是好事，作為網頁的最終開發者其實并不太關心實現語法。有任何問題大家也可以直接到html5 中文興趣小組參與討論。
小結 本來想把新年的第一篇文章寫的歡樂一些，不過貌似沒啥槽點。html5 響應式圖片的草案還剛剛開始，但是前景還是很美好的。目前我們能做的就是在css 中使用「image-set」屬性值，因為目前大部分retina 屏幕的設備的瀏覽器都是基于 webkit 內核的，如果有特殊的需求可以使用 media queries。


學SEO要知道什么代碼?
app開發過程需要注意哪些細節
網站排名為何上不了首頁
淄博網站建設網站如何規劃？
秀峰企業網站開發包括什么
實現企業網站建設的必要性有哪幾個方面？
網站建設開發具體流程是怎樣的？
企業網站制作需要注意幾個方面