support for webp by picture and source tag

[DEvil0000]

The problem

WebP is for sure a format one may want to use - especially for mobile view. There are multiple ways to implement some webp redirect/switch and lookup on a static website. In my case rewrite rules are not an option and the goto way is the modern html version of such a switch by using the picture/source/img tags in combination.

Example:

<picture data-zoomable>
    <source srcset="image.webp" type="image/webp" data-zoom-src="zoomed.webp">
    <img src="image.jpeg" data-zoom-src="zoomed.jpeg">
</picture>

Issues, Solution and Implementation suggestion

1. At the moment this js does only support img tags. So isSupported function must get changed.
2. In case a picture tag is selected the inner tags and their data-zoom-src must get used.
3. In case the webp source is selected the source tag does not have the size and do not "contain" the image but it changes basically the src of the img tag without changing it in actual html. This is at least the case in chrome. So to avoid browser differences it may be best to build the same html structure for the zoom (picture/source/img tags).

[francoischalifour]

🎉 Support for <picture> elements by @fennifith was released in v1.0.8.