Change img src in responsive designs? <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>