Watch a live product demo πŸ‘€ See how Sanity powers richer commerce experiences

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
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 ( ). and it worked. Thanks everyone !!! 😊
Feb 15, 2022, 12:11 AM – build remarkable experiences at scale

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

Categorized in

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
After adding the subtitle and running this code npm run graphql-deploy It does nothingSep 15, 2020
how to limit a reference to just one entry in Studio reference input side versus the default as-many-entries-as-you-fill-in-an-array...Sep 18, 2020
Is it possible to fetch more than one "_type" using GROQ?Nov 2, 2020
I want to add a view with the Structure builder (S.view.component) where I list similar documents based on the title. What...Sep 23, 2020
Is there a structure builder example where the format of each preview for the document list is modified?Feb 3, 2021
I have an array of references to a country schema type but it always just returns NULL values for meJan 30, 2021
Hi, I need help with a query for getting the url of an image asset. Here is what I've been trying, but I only get the _ref...Dec 1, 2020
Sanity UI looks brilliant :smiley: Is something like the current date picker possible at the moment? I’m not sure if anicon...Dec 21, 2020
Hey everyone. I have been coding and may have potentially accidentally deleted something. Does anyone know how to resolve...Dec 26, 2020
Hello everyone and happy new year :raised_hands::skin-tone-2:, I have a problem with outputting Portable Text :disappointed:...Jan 1, 2021

Related contributions

Clean Next.js + Sanity app
- Template

Official(made by Sanity team)

A clean example of Next.js with embedded Sanity ready for recomposition.

Cody Olsen
Go to Clean Next.js + Sanity app

Blog with Built-in Content Editing
- Template

Official(made by Sanity team)

A Sanity-powered blog with built-in content editing and instant previews.

Go to Blog with Built-in Content Editing