title: Change img src in responsive designs?
body: <p>I'm about to code a responsive layout which will probably contain three different "states".</p>
  
  <p>The quirky part is that much of the text, for example menu items will be images – not my idea and that's nothing i can change i'm afraid.</p>
  
  <p>Since the images will differ slightly, other than size, for each state (for example in the smallest state the menu becomes floating buttons instead of a regular header), i will need to switch images instead of just scaling the same ones.</p>
  
  <p>If it weren't for that i'd probably go with "adaptive-images.com".</p>
  
  <p>So, i need some input on a best practice solution for this.</p>
  
  <p>What i could think of:</p>
  
  <ul>
  <li><p>Loading the images as backgrounds – feels a little bit filthy.</p></li>
  <li><p>Insert both versions and toggle css display property – very filthy!</p></li>
  <li><p>Write a javascript that sets all img links – feels a bit overkill?</p></li>
  </ul>
  
  <p>Anyone sitting on a good solution? :)</p>