Change img src in responsive designs?

css, image, responsive-design

Solution

If it's just a few images (and they are optimized) then hiding them via CSS is no problem. If it's a lot then take a look at Response JS which will change the `src` on the fly for you. Try this:

<body data-responsejs='{ "create": [
    { "prop": "width", "breakpoints": [0, 320, 481, 641, 961, 1025, 1281] }
]}'>

<img src="small.png" data-min-width-481="medium.png" alt="example">

Read this article too.

Update - extra example:

<body data-responsejs='{ "create": [
    { "prop": "width", "breakpoints": [0, 320, 481, 641, 961, 1025, 1281] }
  , { "prop": "device-pixel-ratio", "breakpoints": [0, 1, 1.5, 2] }
]}'>

<img src="small.png" data-device-pixel-ratio-1.5="medium.png" alt="example">

Problem

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? :)

Original source