Optimized images

<SanityImage image={sanityImageObject} maxWidth={650} />

By using the <SanityImage /> component, you get:

• Lazy loading: images are only loaded when they come into view, speeding up initial page load
  • For above-the-fold content (opens in a new tab), you can set loading='eager' to load the image immediately, which is generally better for performance
• Automatic generation of multiple sizes and formats
  • Sanity has a powerful image pipeline that optimizes images for the web and allows us to serve them in multiple sizes and formats, picking the best width for the device.
  • Retina screens are served crispier images, accommodating for their higher pixel density
• Crops and hotspots (see below)

Here's an example <img> in Tinloof's website (opens in a new tab), created with the toolkit's <SanityImage />:

<img
  loading="lazy"
  alt="Screenshot of the publish status field in Sanity Studio"
  style="--img-aspect-ratio: 4.363636363636363; --img-natural-width: 1200px"
  src="https://cdn.sanity.io/images/o5kh1pex/production/214df1dd763713174c3304fe441d7651877b4668-1200x275.png?w=795&amp;fit=max&amp;auto=format"
  srcset="
    https://cdn.sanity.io/images/o5kh1pex/production/214df1dd763713174c3304fe441d7651877b4668-1200x275.png?w=400&amp;fit=max&amp;auto=format   400w,
    https://cdn.sanity.io/images/o5kh1pex/production/214df1dd763713174c3304fe441d7651877b4668-1200x275.png?w=600&amp;fit=max&amp;auto=format   600w,
    https://cdn.sanity.io/images/o5kh1pex/production/214df1dd763713174c3304fe441d7651877b4668-1200x275.png?w=850&amp;fit=max&amp;auto=format   850w,
    https://cdn.sanity.io/images/o5kh1pex/production/214df1dd763713174c3304fe441d7651877b4668-1200x275.png?w=1000&amp;fit=max&amp;auto=format 1000w,
    https://cdn.sanity.io/images/o5kh1pex/production/214df1dd763713174c3304fe441d7651877b4668-1200x275.png?w=1200&amp;fit=max&amp;auto=format 1200w
  "
  sizes="(max-width: 795px) 100vw, 795px"
  data-loaded="true"
  width="1200"
  height="275"
/>

Notice how:

• Based on the original image's aspect ratio (1200x275), we set the proper width/height
• We offer multiple image sources, with their respective sizes
• Through the sizes property, we guide the browser to pick the best size based on the device's screen size
  • In this case, the image has a max-width of 795px, meaning it will occupy 100% of the viewport until it reaches 795px, at which point it will stop growing.

Hotspots and crops

Editors can define crops and hotspots (opens in a new tab) for adapting the same image to multiple contexts.

It's worth understanding the difference between hotspots and crops, and the purpose of each.

Crops limit the image's dimensions and happen across all image variations.

The hotspot defines which parts of the image should be more visible when displayed in aspect ratios other than its natural one.

Implementation details on hotspots

• The image builder changes the loaded image URL/file, so it can’t act on the hotspot unless there’s a specific aspect-ratio constraint, which needs the height.
• When we’re rendering, say, a 50x50 avatar, the image builder will do the trick, just pass forceAspectRatio=1 to the <SanityImage> component
• For images that have their aspect ratio preserved across all screens, this is irrelevant. There’s not even a need for hotspots as we’ll always show the entirety of the image
• With responsive images that have different aspect ratios across screen sizes, such as a banner background, we need the hotspot but can’t rely on a fixed aspect ratio. The solution needs to come with CSS, often with the object-position property.