title: How to swap images on mobile/desktop in responsive mode
body: <p>I have a list of images for desktop and mobiles in the following folder structure:</p>
  
  <pre><code>img:
      img-1.png
      img-2.png
      img-3.png
      img-4.png
      img-5.png
      img-6.png
  
  img/mobile:
          img-1.png
          img-2.png
          img-3.png
          img-4.png
          img-5.png
          img-6.png
  </code></pre>
  
  <p>I can use the following code to switch desktop <code>img-1.png</code>:</p>
  
  <pre><code>&lt;span id="switcher"&gt;
     &lt;img id="houdini" src="img/img-1.jpg" alt=""&gt;
  &lt;/span&gt; 
  
  &lt;span id="switcher2"&gt;
     &lt;img id="houdini2" src="img/img-2.jpg" alt=""&gt;
  &lt;/span&gt;
  
  &lt;span id="switcher3"&gt;
     &lt;img id="houdini3" src="img/img-3.jpg" alt=""&gt;
  &lt;/span&gt;
  
  &lt;span id="switcher4"&gt;
     &lt;img id="houdini4" src="img/img-4.jpg" alt=""&gt;
  &lt;/span&gt;
  
  &lt;span id="switcher5"&gt;
     &lt;img id="houdini5" src="img/img-5.jpg" alt=""&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@media only screen and (max-device-width: 489px) {
      span[id=switcher] {
          display:block;
          background-image: url(/mobile/img-1.jpg) !important;
          background-repeat: no-repeat !important;
          background-position: center !important;
      }
      img[id=houdini] {display: none !important;}
  }
  </code></pre>
  
  <p>How can I avoid writing the above CSS for every <code>img-1</code> to <code>6</code>... Can I pass/access an ID?</p>
  
  <p>Can the use of <code>!important</code> be removed?</p>
  
  <p>(Must work on IE8)</p>