Next.js Conf 2024: Your app should be Live by Default ā€“ Watch Keynote

How to Optimize Images Based on Focal Points

10 replies
Last updated: Feb 15, 2022
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?
Dec 15, 2021, 4:17 PM
user Y
user M
maybe you can help? We are really struggling with getting the full width banner header images to show correctly, after setting the focal point
Dec 21, 2021, 8:59 AM
Seem like it doesn't work to set the focal point..
Dec 21, 2021, 9:01 AM
We want this to work out of the box like Sanity has created it without tweaking it. Thanks for all feedback
Dec 21, 2021, 9:02 AM
šŸ™‚
Dec 21, 2021, 9:02 AM
user D
Dec 22, 2021, 8:52 AM
Thanks for your feedback
user M
... we will check it out šŸ‘
Dec 22, 2021, 9:38 AM
Thanks
user M
šŸ˜ŠšŸ‘
Dec 22, 2021, 9:40 AM
user D
Is this working now?
Feb 2, 2022, 1:12 PM
user A
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.
Feb 14, 2022, 1:46 PM
Btw I tried an answer given by
user H
in a different thread (https://sanity-io-land.slack.com/archives/C9Z7RC3V1/p1641155322225900 ). and it worked. Thanks everyone !!! šŸ˜Š
Feb 15, 2022, 12:11 AM

Sanityā€“ build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?