title: Background instead of inline images for mobile optimization with media queries?
body: <p>Ive mobile optimised my site with media queries. Everything looks how I would like it to but unnecessary images (as they're hidden with css) are being downloaded, slowing page loading times.</p>
  
  <p>The easiest solution to this seems to be to replace as many inline images as I can with divs with background images. Then I can hide the div's with media query css for the mobile version. </p>
  
  <p>I know there are potential downsides to this, outlined well in this post: 
  <a href="https://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image">When to use IMG vs. CSS background-image?</a></p>
  
  <p>So the company logo, pictures of staff, etc will stay as inline images. </p>
  
  <p>Are there any issues to my approach I havn't considered? Ive read a lot about mobile optimisation, particularly with media queries, and I havn't heard of anyone doing this even though it seems quite an obvious solution where images could be inline or background.</p>
  
  <p>Note, ive done some experiments with iPhones and Android (im waiting to get some Blackberrys) and I know to stop background images downloading I need to set display none to the div's parent, not the div with the background image itself. </p>
  
  <p>Note2, in an ideal world sites would probably have been built as mobile first but in this situation (and often in others) there is a limit to how much the original site can be modified.  </p>
  
  <p>Thanks </p>