SanityImage Component Approach

[markbebbington]

Hi team! I'm coming from a WordPress background and getting up to speed with Sanity + Next.js image optimization. The Turbo Start template has been fantastic to learn from and I'm using it on a new project, but I have a few questions to help me understand the approach better.

Questions

1. Manual hotspot/crop handling: I noticed the wrapper extracts hotspot and crop data to pass to the sanity-image library. Since the library can get this data directly from the image ID, I'm curious about the thinking behind handling this at the application level?

2. Next.js Image integration: Since sanity-image renders a regular <img> tag, was there consideration for using Next.js Image component instead for additional optimizations?

3. Cost considerations: For responsive layouts like blog cards (1 per row on mobile, 2 per row on tablet, 3 per row on desktop), I really only need a few specific image sizes. Since the sanity-image library generates multiple srcSet sizes automatically, I'm wondering about controlling transformation costs at scale - any strategies for ensuring I'm only creating the transforms I actually need?

Thanks for any insights!