Zoomed image is blurry - Githubissues

HiDeoo / starlight-image-zoom

Starlight plugin adding zoom capabilities to your documentation images

https://starlight-image-zoom.vercel.app

MIT License

47 stars 4 forks source link

Zoomed image is blurry #22

Closed CyberSinh closed 1 week ago

CyberSinh commented 1 week ago

Describe the bug

Zoomed image is blurry, even if image is not resized by Astro. It looks as if zooming is achieved by scaling the thumbnail image, without taking into account the image's native resolution.

To Reproduce

Go to https://www.luminescence-software.org/en/echosync/about/
Click on the screenshot
The zoomed image is blurred, although when saved on disk, the text is perfectly clear when the image is displayed at 100%.

Expected behavior

Zoomed image should be at the native image resolution.

How often does this bug happen?

Every time

System Info

I use the latest version of Astro, starlight and starlight-image-zoom.

Additional Context

No response

HiDeoo commented 1 week ago

Thansk for the feedback.

I have not been able to repro the issue on the link you provided or on other websites using the plugin. I even compared in an image diffing tool pictures of the original images and the ones displayed by the plugin and excluding the plugin UI, they were identical on my end.

Would you be able to provide a screenshot of what you are seeing? Did you try in multiple browsers? Does this only happen on your website or other websites using the plugin as well, e.g. its documentation?

CyberSinh commented 1 week ago

Hi HiDeoo,

I've recorded a screencast to illustrate the problem.

You can see that the text in the screenshot, when zoomed in, is not as sharp as the same image displayed in the Windows image viewer. The zoomed image is blurry in both Chrome and Edge.

It's not obvious whether abnormal blurring is occurring on the images displayed in the starlight-image-zoom documentation, as the images are not very sharp originally. The blur is clearly visible when the image contains text, such as a screenshot containing text.

Thanks for your help.

HiDeoo commented 1 week ago

Thanks a lot for taking the time to record the issue, this was super helpful.

Using your video and your specific image from the initial repro locally, I was able to spot the issue on Chrome, altho for some reason, for me it's only slightly visible on the red text, but nothing like the video. On Firefox, it's perfect and on Safari it's ugly.

I think I may have figured out the issue and a potential way to fix it. This requires totally rewriting how zooming is done. My initial work on this seems to fix the issue in all browsers but I need to polish it a bit more so I'm planning:

Finish rewriting the zooming logic, tests and open a draft PR hopefully tomorrow.
Make sure to add an image with lots of text in the docs as it's a great way to test this.
Test it a bit more on more browsers and devices.
If you're ok with it, maybe ping you so you can also test on your end and see if it fixes the issue.
Release it in the next version.

CyberSinh commented 1 week ago

I've tested the ImageZoom.astro file from your PR and everything looks fine from my point of view. This issue can be closed as soon as a component update has been released. Thank you very much!

HiDeoo commented 1 week ago

Thanks for taking the time to test the changes, super appreciated :raised_hands:

I just released the version 0.9.0 which includes the refactor.