How to Optimize Images Based on Focal Points

Hello !!! I want to optimize the sanity image based on focal points, so I used the below code. 

<Image src={urlFor(image).fit('crop').crop('focalPoint').focalPoint(0.18493150684931453, 0.30544983361040945).url() || ''} layout="fill" objectFit="cover" />

  Here for focal x and y , I used x and y values from hotspot,  but it did not work for panoramic view, Is there any other way to give these focal points based on screen size?

maybe you can help? We are really struggling with getting the full width banner header images to show correctly, after setting the focal point

Seem like it doesn't work to set the focal point..

We want this to work out of the box like Sanity has created it without tweaking it. Thanks for all feedback

Thanks for your feedback ... we will check it out 👍

Thanks 😊👍

Is this working now?

I tried the above solution and it didn't work. Tried by getting width and height from image meta data also. Still it's not working properly for all the devices , desktop, tablet and mobile.

Btw I tried an answer given by in a different thread (https://sanity-io-land.slack.com/archives/C9Z7RC3V1/p1641155322225900 ). and it worked. Thanks everyone !!! 😊