1. Media Queries
   使用css3的媒體查詢實現高清屏的圖片處理。

   @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
   only screen and (-moz-min-device-pixel-ratio: 1.5),
   only screen and (-o-min-device-pixel-ratio: 3/2),
   only screen and (min-device-pixel-ratio: 1.5) {
       .logo {
           background-image: url(‘img/[email protected]‘)
    
   ;
           background-size: 400px 200px; width: 400px; height: 200px;
       }
   }

   sass的mixin

   //-----------------------------------Retina圖片-----------------------------------------  
   @mixin image-2x($image, $width, $height) {  
       @media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {  
           
    
   /* on retina, use image that‘s scaled by 2 */  
           background-image: url($image);  
           background-size: $width $height;  
       }  
   }  

2. retina.js下載 免費CND GitHub
   
3. CSS4的image-set屬性

   .test {
       background-image: url(‘img/logo.jpg‘);
       background-image: -webkit-image-set(url(‘img/logo.jpg‘) 1x,url(‘img/[email protected]‘) 2x)
    
   ;
       background-size: 425px 195px;
       width: 425px;
       height: 195px;
   }

4. HTML5 picture Element

   <picture>
      <source media="(min-width: 1024px)" srcset="foo-large.jpg  1024w, foo-medium.jpg 640w, foo-small.jpg 320w" sizes="50vw" />
      <source srcset="[email protected] 2x, foo.jpg 1x" />
      <img src="foo.jpg" alt="Bar" />
   </picture>

5. 服務端處理 Retina Images github
   使用方法

HTML5之圖片在Retina屏的常用幾種處理方式