Generate several different images size for mobile support

[Psycojoker]

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

And for support for old browsers https://scottjehl.github.io/picturefill/

[QSchulz]

I saw that most of the places we could make use of this feature, we already do. However, it's not used where it could have the most impact: for pictures-group.
The issue I guess is with the lazy-loading with jquery_lazyload which cannot make any use of the srcset/sources and sizes that are described in picture or img (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset) tags.
I think we may have a way out with the new lazyload that is a complete revamp (and isn't using jQuery anymore): https://github.com/tuupola/lazyload/tree/2.0.0-rc.2
Unfortunately it is only in rc/beta mode for now but the last commit was pushed less than a month ago so it's a pretty good indicator.
What I'm hopeful for is that we can make use of the data-srcset (https://github.com/tuupola/lazyload/tree/2.0.0-rc.2#responsive-images) with sizes properties in the img tag. That would solve the issue we're having with the current version of lazyload.

Now the next issue I see is more: how do we configure the sizes property? How do we know the actual values to be put in there to benefit from the data-srcset? We'd need to know the expected size of the pictures on the line, but that is handled by the browser, thanks to the flex container.
Am I missing something? Is there some property I don't know about or maybe a math function for this?