francoischalifour / medium-zoom

🔎🖼 A JavaScript library for zooming images like Medium
https://medium-zoom.francoischalifour.com
MIT License
3.58k stars 160 forks source link

Zoomed image size exceed intrinsic image size #200

Open bdauton opened 1 year ago

bdauton commented 1 year ago

Hi,

I'd like to know if it's possible that the zoomed image size do not exceed the real image size so the zoomed image is not blurry when the the viewport is huge.

I use the data-zoom-src attribute to provide the HD image url and also widthand height attributes set to the low definition image sizes to prevent document layout shifts.

Thanks, Ben

francoischalifour commented 1 year ago

Can you please reproduce the wrong behavior you're experiencing in this sandbox? Thanks!

bdauton commented 1 year ago

Ok, It's me, I used the wrong images… Can you just confirm I handle well the thumbnails/zoomed/2x things? I try to reduce the overall page weight…

<img src="low-def-thumbnail.jpg" srcset="high-def-thumbnail@2x.jpg 2x" data-zoom-src="high-def@2x.jpg" width="{low-def-thumbnail-width}" height="{low-def-thumbnail-height}" loading="lazy"> ?

Thanks!

bdauton commented 1 year ago

Ok, I updated the sandbox with to examples: one with loading="lazy" and one without.

It seems to work as expected in both cases only with Chrome. With Firefox, the zoomed image doesn't respect the intrinsic image size. Using Safari, without loading="lazy", it works well but as soon as the attribute is added, the zoomed image is still the thumbnail.

Am I missing something?