title: Should I use CSS3 media queries to deliver different image sizes for retina display devices?
body: <p>Many similar questions have been asked here before. I believe mine is slightly unique.
  I have developed a mobile app with JQM + Cordova/PhoneGap.</p>
  
  <p>Originally I used big images (targeted towards retina display devices) and used responsive css to scale image down as needed. The problem with this approach that older devices end up having to download big images and these devices would not have the same processing 'grunt' that newer retina devices have - causing unnecessary overheads.</p>
  
  <p>I decided to use css background images because I have heard they load faster than image HTML tags (as everything is loaded in css first) and then use css3 media queries like below:</p>
  
  <pre><code>@media 
  (-webkit-min-device-pixel-ratio: 1), 
  (max-resolution: 163dpi) { 
  .pic #point1 {background-image: url(../img/baby/nonretina/Baby-TP1-Role-Models.jpg); border: 2px solid #ccc;}
  }
  
  @media 
  (-webkit-min-device-pixel-ratio: 2), 
  (min-resolution: 326dpi) { 
  .pic #point1 {background-image: url(../img/baby/retina/Baby-TP1-Role-Models.jpg); border: 2px solid #ccc;}
  }
  </code></pre>
  
  <p>Now comes the issue, I have got stacks of images within my app (hundreds) so my css file is going to be quite large. Considering my app will need to load the css in the first page/view (index.html), will this negatively impact on my app load time? Should I still use this approach or revert to the former approach?</p>
  
  <p>I just feel like a big css file with heaps of media queries may not be the answer to optimise images within my app for both retina and non retina devices...</p>