Can you include retina examples about lazysizes HOT 15 CLOSED

I can. But actually this is already implicitly explained using the srcset attribute with the w descriptor. For adaptive responsive images you can use the following pattern:

<img
    data-sizes="auto"
    src="lqip-src.jpg"
    data-srcset="lqip-src.jpg 100w,
    image2.jpg 300w,
    image3.jpg 600w,
    image4.jpg 900w" class="lazyload" />

In case you only want to have non responsive, but retina optimized images, you are using the x descriptor:

<img
    src="100w.jpg"
    data-srcset="300w.jpg 1x,
    600w.jpg 2x" class="lazyload" />

The x descriptor is indeed not explained in the readme or on the demo, but it simply follows the respimg specification.

Note that you need a respimg polyfill for full cross browser support of that.

from lazysizes.

Does this help. Should I clarify this in readme and/or on the demo page?

from lazysizes.

Let me read the docs once again in a couple of days (busy weekend). Perhaps when I read the docs and also think it's unclear or lacking than adding it with a title "Retina example" makes sense. I can update it and send a pull request.

from lazysizes.

This would be awesome. Thx.

from lazysizes.

That's great, thanks. It's one thing to leave it to assumption (and the user to figure out), but a demo always impresses. If you've got a feature, sell it!

from lazysizes.

I would like to use different retina images for different screen resolutions. So on a mobile you would get 300px default image size and 600px retina image, but on desktop you would get a 600px default image and 1200px retina image. I see in the respimg polyfill documentation that you can't mix the w and x descriptor but is there any other way I can achieve this functionality?

from lazysizes.

@axelander
I don't really get, what you want. Can you describe, what you want to achieve and why? Or why it doesn't work for you: Normally you simply want to do this, then the browser can handle those cases:

<img src="300.jpg" 
    data-srcset="300.jpg 300w, 600.jpg 600w, 1200.jpg 1200w"
    class="lazyload"
    data-sizes="auto"
    />

Additionally note: there is nearly no mobile browser without retina.

You can try to fragment mobile and desktop/tablet via the picture element and use the x descriptor:

<picture>
    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source
        data-srcset="http://placehold.it/300x150 1x,
            http://placehold.it/600x300 2x"
        media="(max-width: 760px)"
         />
    <!--[if IE 9]></video><![endif]-->
    <img
        src="http://placehold.it/300x150"
        data-srcset="http://placehold.it/600x300 1x,
            http://placehold.it/1200x600 2x"
        class="lazyload"
        alt="picture but without artdirection" />
</picture>

or use the w descriptor:

<picture>
    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source
        data-srcset="http://placehold.it/300x150 300,
            http://placehold.it/600x300 600w"
        media="(max-width: 760px)"
         />
    <!--[if IE 9]></video><![endif]-->
    <img
        src="http://placehold.it/300x150"
        data-srcset="http://placehold.it/600x300 600w,
            http://placehold.it/1200x600 1200w"
        class="lazyload"
        data-sizes="auto"
        alt="picture but without artdirection" />
</picture>

from lazysizes.

Maybe to clarify: Using srcset with w descriptor automatically not only handles different viewport sizes, it also handles different screen resolutions for you.

from lazysizes.

Alright, that last comment is what I was looking for. So, the w descriptor is taking pixel density into consideration already? For example, surfing on a iPhone 5s, there is a 320px width image element. I would get the 640px image if I add:

<img 
  data-sizes="auto"
  data-srcset="
    /image/320x320.jpg 320w,
    /image/640x640.jpg 640w"
  class="lazyload">

from lazysizes.

Yes.

from lazysizes.

Ok, I didn't get it to work on the iOS simulator, but chrome phone emulator was returning the correct image. I will do some further digging. Thank you for the help!

from lazysizes.

Are you using respimage? iOS needs a polyfill for this.

from lazysizes.

@axelander
Can you give me a heads up. Maybe a testcase for the thing, that it isn't working?

from lazysizes.

No, I forgot to add the polyfill, sorry. Thank you for helping me out! 👍

from lazysizes.

This example is already there. Closing.

from lazysizes.