Retina images with Picturefill?

420 Views Asked by At

I'm having a bit of trouble understanding how to implement retina images with Picturefill

This is what I have...and I don't think it's working:

<picture>
    <img
    src="img/small.jpg"
    srcet=
    "img/large.jpg" data-media="(min-width: 800px) 900w"
    "img/large.jpg" data-media="(min-width: 800px) and (min-device-pixel-ratio: 1.5) 1800w"
    "img/medium.jpg" data-media="(min-width: 640px) 640w"
    "img/medium_2x.jpg" data-media="(min-width: 640px) and (min-device-pixel-ratio: 1.5) 1280w"
    "img/medium.jpg" data-media="(min-width: 320px) 320w"
    "img/medium_2x.jpg" data-media="(min-width: 320px) and (min-device-pixel-ratio: 1.5) 640w"
    size="100%"
    alt="">
</picture>

The media-queires pull the images that are 2x bigger. Set it to 1.5 for Android devices.

0

There are 0 best solutions below