search

zouhir / lqip-loader

Low Quality Image Placeholders (LQIP) for Webpack
1.21k stars 44 forks source link

On the Demo: Different image sizes LQIP and Final Image #4

Closed willgriffiths closed 7 years ago

willgriffiths commented 7 years ago

Refreshing the demo app I can see that for the mountain image the: The LQIP is 900x386 px And the final image is 900:400 px

Shouldn't they be the same size? Or is this on purpose? :)

zouhir commented 7 years ago

That's a good catch @willgriffiths

the LQIP is just 14px of width (1.55% of original width) and css is the reason it is stretched to fill 900px. I'm afraid my CSS to stretch the width only is amplifying or showing issues in the ratio.

In a perfect world scenario, ratio should stay the same. But I wouldn't recommend letting the LQIP and image set a dynamic container height for now only until I do more investigations, and I recommend this more real life example https://shop.polymer-project.org/ where they use a pre specified height for the banner div and get the LQIO to fill it 100% in both width and height :)

All other examples I saw in the web use a specific height, but I am willing to investigate the ratio issue and try to get it accurate come back to you in this thread. will keep it open.

Thanks for the catch and hope I helped!

willgriffiths commented 7 years ago

Hey @zouhir, thanks for the quick response. This is more feedback than an actual issue.

Good work on the repo. ;)

zouhir commented 7 years ago

really food catch tho ;)