Work with responsive images - picture tag and srcset

[AInteriorB]

The lightbox itself is responsive, but you can provide only one image element, It would be great that the lightbox works with the modern picture tag and srcset where you can give different media types and sizes and the browser finds the needed resource itself. I think this was already mentioned in #71 but closed due to no response.

A responsive image-tag can look like this nowadays:

<picture>
    <source type="image/webp"
            srcset="img/image.webp 3000w,
                    img/image_2400.webp 2400w,
                    img/image_1600.webp 1600w"
            sizes="100vw" />
    <source 
            srcset="img/image.jpg 3000w,
                    img/image_2400.jpg 2400w,
                    img/image_1600.jpg 1600w"
            sizes="100vw" />
    <img src="img/image_2400.jpg" alt="Image" />
</picture>

Please see the following urls for more infomation:

• https://www.html5rocks.com/en/tutorials/responsive/picture-element/
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture