title: Prevent images from being downloaded to page on mobile site
body: <p>How can I make it so that within the mobile version of my site the images are not downloaded to from the web server as these are large files that are not needed and not being used and therefore severely impacting the use of the mobile version of the site. Having looking at previous threads of such nature I saw that hiding the parent of the image using code such as below can benefit.</p>
  
  <pre><code>.parent {display:block;}
  .background {background-image:url(myimage.png);}
  
  @media only screen and (max-width:480px) {
  .parent {display:none;}
  }
  </code></pre>
  
  <p>The problem being I don't want to use background image CSS for SEO issues associated with them as I like to use Schema tagging etc ..so how can I prevent an IMG tag from being downloaded, as display:none; only hides the image rather than stopping it being downloaded.</p>
  
  <p>Note: This is not for copyright protection issues e.g. preventing right click etc etc but for speed and ultimately size of the downloaded content to mobile.</p>