Question about image quality of banner image

[AkiraSPO]

This code has been a great starting point for us to design our custom news webpart. However, I have been banging my head to find a solution for my issue with image quality. Any tips, suggestion or solution will be greatly appreciated.

When I configure the OOB news webpart and this SPFX webpart side by side and compare the quality of images rendered in the webparts, the image quality of OOB News webpart is far better then this webpart.
When I look in the developers tools, it appears that its because of the fact that we are get the 'preview' image in the code as Banner image URL where as the Microsoft news webpart has a difference source for its images. The image received in the BannerImageURL property becomes blurry if the page is zoomed in even a little bit where as the quality of OOB News webpart doesn't get as bad on zooming in.

Any idea how we can get the image URLs being used in the OOB news webpart?

Image from SPFX webpart

Image from OOB News webpart

[Link631]

is it possible that you are rendering a different ratio of the image? thoese two images you posted do have different ratios and this results in blurred images....

Maybe a solution could be: Check the image ratio being used in news webpart and make sure you publish the same ratio....?

https://support.microsoft.com/en-us/office/image-sizing-and-scaling-in-sharepoint-modern-pages-dc510065-b5a5-4654-bc94-e3ecbbb57d8d

Maybe this helps.... am not sure. They say:
In most cases, images in modern web parts work best across layouts and devices when they have an aspect ratio of either 16:9 or 4:3, depending on the layout.