關於image-set和srcset

關於image-set

不久前加入一個新項目組，在新項目中學習到了一個css新屬性：image-set，經過多方資料查詢，現將總結羅列如下：

image-set是CSS4草案中的一個屬性，目的就是保證圖片在屏幕上的自適應。目前image-set只能使用webkit瀏覽器的私有屬性“-webkit”。

語法

image-set() = image-set( <image-set-option># )
<image-set-option> = [ <image> | <string> ] <resolution>

image-set() 可以根據用戶設備的分辨率匹配合適的圖像。為不同的設備分配合適得圖像;

示例：下述示例1代碼將會為普通屏幕使用 test.png，為高分屏使用 test-2x.png，如果更高的分辨率則使用 test-print.png，比如印刷。

 

div {
    background-image: image-set( "test.png" 1x, "test-2x.png" 2x, "test-print.png" 600dpi );
}
div {
　　  background-image: -webkit-image-set(url(http://mat1.gtimg.com/www/images/qq2012/qqlogo_1x.png) 1x,url(http://mat1.gtimg.com/www/images/qq2012/qqlogo_2x.png) 2x);
}

 

兼容性

需要注意的是，目前這些瀏覽器支持的語法是：image-set( <url> | <string> )，寫法如同示例中的第二種寫法。

image-set真的很實用，很可惜的是，他僅支持background-image屬性，而不能使用在“<img>”標簽中。

實際運用

一般在實際運用時，會和background一起用，如下：

selector {
  background-image: url(no-image-set.png);
  background: image-set(url(foo-lowres.png) 1x,url(foo-highres.png) 2x) center;
}

 

類似於不同的文本，圖像也會顯示成不同的：

1. 不支持image-set：在不支持image-set的瀏覽器下，他會支持background-image圖像，也就是說不支持image-set的瀏覽器下，他們解析background-image中的背景圖像；
2. 支持image-set：如果你的瀏覽器支持image-sete，而且是普通顯屏下，此時瀏覽器會選擇image-set中的@1x背景圖像；
3. Retina屏幕下的image-set：如果你的瀏覽器支持image-set，而且是在Retina屏幕下，此時瀏覽器會選擇image-set中的@2x背景圖像。

 

關於srcset

查閱image-set時，也順便翻看到了srcset屬性，img的srcset屬性方便的解決了頁面圖片適應不同屏幕密度的情況。目前除了IE沒有兼容到，已經全部都兼容了，可以放心使用。這個屬性也就彌補了image-set只能在background使用的問題。

兼容性：

 

srcset這個屬性用於：以最合適的src去匹配不同屏幕（高分屏低分屏如Retina；大屏小屏）

示例用法如下：

<img src="mm-width-128px.jpg" srcset="mm-width-128px.jpg 1x, mm-width-256px 2x">
當然，我們也可以簡寫成：
<img src="mm-width-128px.jpg" srcset="mm-width-256px 2x">

新標准

按照上面的實現，不同的屏幕密度都要設置圖片地址，目前的屏幕密度有1x,2x,3x,4x四種，如果每一個圖片都設置4張圖片的話，太麻煩了。所以就有了新的srcset標准。代碼如下

<img src="source.jpg" width="100%"
  srcset="source_400.jpg 400w, source_600.jpg 600w, source_1280.jpg 1280w">


<img src="image-128.png"
  srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w"
  sizes="(max-width: 360px) 340px, 128px" />

 

1x、2x 表示目標屏幕的像素密度；400w、600w表示目標瀏覽器的寬度的限度，如瀏覽器寬度550w時，匹配600w的src。

對於srcset里面出現了一個w單位，可以理解成圖片質量。如果可視區域小於這個質量的值，就可以使用，當然，瀏覽器會自動選擇一個最大的可用圖片。

sizes語法如下：

sizes="[media query] [length], [media query] [length] ... "

上面例子中的sizes就是指默認顯示128px, 如果視區寬度大於360px, 則顯示340px。

注意，這里所有的值都是指寬度值，且單位任意，em, px, cm, vw, ...都是可以的，甚至可以CSS3的calc計算，例如：

sizes="(max-width: 360px) calc(100vw - 20px), 128px"

表示當視區寬度不大於360像素時候，圖片寬度為整個視區寬度減去20像素的大小。