title: Prevent image from loading on mobile devices
body: <p>To maximize efficiency for mobile devices, I would rather not have images that are used for the desktop version. Through research, I have learned that simply using <code>display:none;</code> css or <code>jQuery('img').hide()</code> will only hide the image, but still use the resources to load it.</p>
  
  <p>How can I take this:</p>
  
  <pre><code>&lt;div class="com_router_img"&gt;
  &lt;img src="http://www.example.com/wp-content/uploads/2013/05/img.jpg"
   alt="img" width="700" height="350" class="aligncenter size-full wp-image-307" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And NOT display it on my mobile stylesheet? Here is mobile stylesheet query:</p>
  
  <pre><code>&lt;link rel="stylesheet" media='screen and
   (-webkit-min-device-pixel-ratio: 1.4) and (-webkit-max-device-pixel-ratio: 1.5)'
   href="&lt;?php bloginfo('template_url'); ?&gt;/smallphone.css" /&gt;
  </code></pre>