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

Different bestMatchingImage algorithm #3

Closed bramvanderholst closed 7 years ago

bramvanderholst commented 7 years ago

Hi there!

So funny, your module came JUST in time. We had written the specs what we needed to build and then did a last Google search and saw your repo, doing exactly what we needed to build!

Anyway, small question. We are building a product grid and have tons of images on each page and therefor wanted to implement this. Since the large range of devices and devicePixelRatio's we need to implement, we want to keep our list of generated images as small as possible and still provide the best user experience possible.

At the moment if we want to achieve this, we need to provide the following:

<plastic-image use-elem-dim srcset=URL200 200w 1x,
        URL400 200w 2x,
        URL600 200w 3x,
        URL800 200w 4x,
        URL300 300w 1x,
        URL600 300w 2x,
        URL900 300w 3x,
        URL1200 300w 4x,
        URL400 400w 1x,
        URL800 400w 2x,
        URL1200 400w 3x,
        URL1600 400w 4x"></plastic-image>

You see where this is going, we have a lot of duplicate URL's and that is not really the use case we are going after.

It would be nice if we could do the following:

<plastic-image use-elem-dim srcset=URL200 200w,
        URL300 300w,
        URL400 400w,
        URL600 600w,
        URL800 800w,
        URL1000 1000w,
        URL1200 1200w"></plastic-image>

If the device pixel ratio's aren't added it will multiply the width and height values of refDim values by devicePixelRatio. This way the above automatically works.

I can create a PR for this, if you'd like.

mlisook commented 7 years ago

I really like this proposal. I'd very much appreciate a PR.

mlisook commented 7 years ago

This enhancement was implemented in pull request 8 by @bramvanderholst