search

tubalmartin / riloadr

Riloadr - A cross-browser framework-independent responsive images loader written in Javascript.
MIT License
646 stars 41 forks source link

Hi-res images for iPad and MacBook retina #11

Closed mwdesigner closed 11 years ago

mwdesigner commented 11 years ago

I can only seem to serve apple retina products with hi-res images by adding a large width to the minDevicePixelRatio setting, this then however serves the same hi-res images to mobile. I've tried different combinations, including adding the mobile setting after the minDevicePixelRatio setting but this results in apple retina devices displaying the mobile version of the image again.

Example: This will serve hi-res images to retina devices (but also to mobile too)

        retries: 1,
            breakpoints: [
                {name: 'mobile', maxWidth: 767},
                {name: 'desktop', minWidth: 768},
                {name: 'desktop', maxWidth: 2000, minDevicePixelRatio:2}
            ]

This is a great plugin and if this could be solved it would be perfect!

tubalmartin commented 11 years ago

Sorry for my previous response, my bad!

According to your example, the third breakpoint is redundant. The breakpoint name is the same and you're targeting big screens so I would write it like this:

            breakpoints: [
                {name: 'mobile', maxWidth: 767},
                {name: 'desktop', minWidth: 768}
            ]

To target MacBook Retina I would define the following breakpoints:

            breakpoints: [
                {name: 'mobile', maxWidth: 767},
                {name: 'desktop', minWidth: 768},
                {name: 'desktop_retina', minWidth: 1280, minDevicePixelRatio: 2} // MB Pro Retina 13" & 15"
            ]

The 13" MB Pro Retina has 2560x1600 pixels ("Retina" resolution) so we set 1280 (2560 px / 2 devicePixelRatio) as minWidth and the minDevicePixelRatio to 2.

Could you test the last one? I don't have a MB Pro retina to test.

tubalmartin commented 11 years ago

To target both iPad & MB Retina you could define these breakpoints:

 breakpoints: [
                {name: 'mobile', maxWidth: 767},
                {name: 'desktop', minWidth: 768},
                {name: 'ipad_retina', minWidth: 768, maxWidth: 1024, minDevicePixelRatio: 2}, // iPad Retina in Portrait & Landscape
                {name: 'desktop_retina', minWidth: 1280, minDevicePixelRatio: 2} // MB Pro Retina 13" & 15"
            ]
mwdesigner commented 11 years ago

Thank you for the quick response, this is all great news!

I originally assumed I would be able to re-use the same directories with the different breakpoints, but using a different one did the trick, so really pleased about that. I only need the two image sizes for my project for now so made a duplicate of my 'desktop' folder, renaming it 'retina'.

I can now confirm I have mobile images serving mobile devices and the hi-res versions serving the apple retina devices.

Many Thanks.