Change img src in responsive designs?

Question

I'm about to code a responsive layout which will probably contain three different "states".

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.

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.

If it weren't for that i'd probably go with "adaptive-images.com".

So, i need some input on a best practice solution for this.

What i could think of:

• Loading the images as backgrounds – feels a little bit filthy.

• Insert both versions and toggle css display property – very filthy!

• Write a javascript that sets all img links – feels a bit overkill?

Anyone sitting on a good solution? :)

Answer 1

Other option. Not need scripts, only CSS.

HTML

<div id="mydiv">     <img src="picture.png" class="image_full">     <img src="picture_mobile.png"  class="image_mobile"> </div> 

CSS

.image_full{    display:block;   }   .image_mobile{   display:none;  }  @media (max-width: 640px) and (min-width: 320px){   .image_full{    display:none;   }    .image_mobile{    display:block;   } }