Sprout comes with a way to lazy load images. This is done a view ways:

• Media.jsx will take a sanity image schema, and render an image based on your size prop (small, medium, large) with responsive sizes.
• BackgroundMedia.jsx is the same thing, but meant for a absolute inset-0 div that is the background of a container. The Sanity schema allows for a mobile vs. desktop crop aspect ratio because phones and desktops are such different dimensions.
• Image.jsx is the component that these both use, which takes sources, renders alt text, and renders a blurred base-64 hash of the image until the full resolution is downloaded.