Add support for multiple formats

mlisook / plastic-image

A Polymer 3.0 element which adds extra plasticity to <iron-image> with support for srcset and lazy loading

MIT License

30 stars 6 forks source link

Add support for multiple formats #11

Closed ozasadnyy closed 7 years ago

ozasadnyy commented 7 years ago

Webp is amazing image format but unfortunately, not all browsers support it. The combination of webp + lazy loading should be super awesome!

mlisook commented 7 years ago

Hi, thanks for the suggestion.

What are you thinking as far as how it would work? Maybe something like:

If the browser supports webp and there is at least 1 webp image in the srcset
- discard the non webp images
else
- discard the webp images

or ??

ozasadnyy commented 7 years ago

Here are 3 basic techniques: https://developers.google.com/speed/webp/faq

Modernizr
HTML5 element
In your own JavaScript

I am more for second way

mlisook commented 7 years ago

Well, this control extends iron-image which not only doesn't use the <picture> element, but doesn't even really use the <img> element - it actually sets the background image of a <div> in its shadow dom.

I would think it would be necessary to detect support for webp in JavaScript.

So, if there are any webp images in the srcset, and webp is supported, do we assume the user wants to serve one of those in preference to any of the JPG or PNGs?

ozasadnyy commented 7 years ago

Correct. These files are much smaller

mlisook commented 7 years ago

I like your idea and it is easy enough to implement. Look for an enhancement to do this in the next couple of days.

Thank you!

mlisook commented 7 years ago

Support for webp has been added in PR #13 Add Webp Support. Readme documentation has been updated to reflect the new feature. New version is tagged 1.0.4.