How to deliver different Responsive Images?
Question by MEM
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:
-
Background image technique does work, but those infographics are NOT background.
-
They should arrive server side.
-
Obviously, they need to adapt. (and background size… well…)
-
Even worst, we do have responsive tooltips image maps associated with those infographics.
Answer by Starx
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" />
