Question

On this website:

• .php

• .jquery

• .yii based

We need to have two or more different infographic pictures, depending on the viewport width.

• The client is picky about w3c validation

• picturefill solution doesn’t validate

• different images and not only different image version, should be served

• for a lot of reasons background images are not a solution*

• IE8 and up support

I can use either a server or client side version, no problem.

Reasons:

1. Background image technique does work, but those infographics are NOT background.

2. They should arrive server side.

3. Obviously, they need to adapt. (and background size… well…)

4. Even worst, we do have responsive tooltips image maps associated with those infographics.

Answer 1

If media queries is not what you want then use response.js, if done properly you can load <img>s too. Here is a example:

<-- Load lo-fi.png  when viewport is 0–480px wide or no-js. 
    Load medium.png when viewport is 481–1024px wide. 
    Load hi-fi.png  when viewport is 1025px+ wide. --> 

<img src="lo-fi.png" data-src481="medium.png" data-src1025="hi-fi.png" alt="example" />