Polyfill for css4 function image-set()
(http://dev.w3.org/csswg/css-images/#image-set-notation)
You can install image-set-polyfill
with bower
or with npm
:
bower:
bower install --save image-set-polyfill
npm:
npm install --save image-set-polyfill
You should only include image-set-polyfill.js
on your page
<script type="text/javascript" src="image-set-polyfill.min.js"></script>
CSS styles
.smart-image
{
background-image: -webkit-image-set(
url('http://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Cat_poster_2.jpg/297px-Cat_poster_2.jpg') 1.0x,
url('http://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Cat_poster_2.jpg/594px-Cat_poster_2.jpg') 2.0x
);
}
Inline styles
<div style="background-image: -webkit-image-set(url(lowdpi.png) 1.0x, url(highydpi.png) 2.0x )"></div>