title: Can I use a media query in internal CSS, and will it avoid loading the background images I define?
body: <p>I'm working on a responsive site where each page will have a large hero image, defined in the CMS. I'd like to avoid having to download that background image on mobiles.</p>
  
  <p>The only way I can think to do it is to have some inline CSS in the head of the page like so:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      @media only screen and (min-width: 680px) {
          .hero-image { background-image: url(../images/image.jpg); }
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>First, can I use media queries in inline CSS?</p>
  
  <p>Second, will this avoid downloading the image on mobiles?</p>
  
  <p>Third, is there a better way?</p>
  
  <p>Thanks</p>