Make more useful for using different images on varying screen widths

[leekiernan]

Rather than using the same image of different sizes, this allows the changing of image to match the screen size. eg. perhaps you want to change the aspect ratio of this image on a mobile vs a desktop.

Now we serve images on a min-width basis to match more common css media queries and provide a clearer path for doing so.

[ivopetkov]

The idea is that the default image (the one in the src attribute) is one with the highest resolution. That's what we've written for ages. It will be used in old browsers, Google Images and social networks. Example:

<img src="image.jpg" />

and now with Responsively Lazy we make it lazy loaded and responsive on modern browsers by specifying smaller versions. The result is:

<img src="image.jpg" data-src="image-200.jpg 200w, image-400.jpg 400w" ... />

That's the big difference with other lazy loading implementations. Other libraries make you break your HTML by removing the src attribute, or they make you put tiny version there. Responsively Lazy enhances your valid code without breaking it.

[freezy-sk]

@ivopetkov That idea with highest resolution as src is not good if you are doing mobile first

[ivopetkov]

@freezy-sk there is a "hack" that can be used in this case.

Here is an example where the max image version width is 600px and you want the default to be 400px:

<img src="image-400.jpg" data-src="image-200.jpg 200w, image-400.jpg 400w, image-600.jpg 10000w" ... />

The 10000w value tells the library to load the image-600.jpg image when the container's width is lower than 10000px.

[freezy-sk]

@ivopetkov nice hack :)
what about using last image in data-src without specified width as that one which should be used for unlimited width?

[ivopetkov]

@freezy-sk sounds awesome :) Expect the update in an hour.

[freezy-sk]

👍

[ivopetkov]

@Kiernan809 can you please give us more information about your last change (if (container.lastSetOption[1] !== bestSelectedOption[1])). Not sure why it's needed.

[leekiernan]

Apologies for delay! This may be a non-use case:

Somebody rotates their screen, loads new image, sets new padding-bottom etc.

Rotates back, original padding-bottom, not original image. No longer fits.

The old image is already cached; we know that it was designed for this screen size. It seems reasonable that we should use it.