image-set實現Retina屏幕下圖片顯示詳細介紹

支持image-set：若是你的瀏覽器支持image-sete，並且是普通顯屏下，此時瀏覽器會選擇image-set中的@1x背景圖像； 
Retina屏幕下的image-set：若是你的瀏覽器支持image-set，並且是在Retina屏幕下，此時瀏覽器會選擇image-set中的@2x背景圖像。 
上面就是有關於「image-set」的簡單介紹。 
爲何要使用image-set而不使用Media Queries? 
若是你有閱讀有關於Retina的文章，你就會知道，在Retina屏幕下實現圖像顯示的方法有不少種，好比說「img」標籤方法、javascript和方法，還有「Media Queries」方法，特別是「Media Queries」方法（若是你不清楚這些方法，能夠點擊 這和這）。既然有這麼多種方法要以實現Retina屏幕下的圖像顯示，那麼爲何還要使用「image-set」方法。這個問題問得很是的好。Jason Grigsby 在「Safari 6 and Chrome 21 add image-set to support retina images 」中把爲何要使用「image-set」而不使用CSS3的「Media Queries」實現Retina屏幕下圖像方法作了兩點描述。 

 

不像Media Queries，image-set不須要告訴瀏覽器使用什麼圖像，而是直接提供了圖像讓瀏覽器選擇。在將來，我但願有人在使用Retina設備瀏覽網頁，但網速慢時，告訴設備採用低分辨率的圖像。甚至會更好，他能根據網速智能的選擇須要的圖像。 

使用「Media Queries」的問題是，在高分辨率顯示器下他沒有選擇的權利。也就是說，瀏覽器分辨率等於1或2或者其餘的時候，瀏覽器必須加載指定的圖像。 
image-set的好處是，在支持image-set的瀏覽器會在高分辨下匹配須要的圖像，而沒有其餘額外的功能。但我相信，爲瀏覽器提供不一樣的圖像選擇，這瀏覽器在不一樣的分辨下選擇正確的圖像。 
image-set能讓各類不一樣分辨下的圖像都顯示在CSS中的同一個地方。而使用media queries顯示不一樣圖像時，你可能會隔開不少行代碼，難於尋找到對應的圖像。 

image-set真的好強大，很惋惜的是，他僅支持background-image屬性，而不能使用在「<img>」標籤中。 
前面也說過了，目前image-set只能使用webkit瀏覽器的私有屬性「-webkit」在「Safari6」和「Chrome21」下運行。如今在IOS 6獲得 支持。不過很遺憾的是，目前別的瀏覽器仍是不支持image-set,如今他僅是CSS4的一個草案，但願未來能寫到標準中，造福於苦逼的前端人員。