Read about Sanity.io’s image pipeline in CSS-tricks

When images are uploaded to Sanity, several processes occur automatically, including the extraction of color palettes, dimensions, aspect ratios, and potentially EXIF data and geolocation if the schema is configured accordingly. Additionally, a low-resolution version of the image is stored in the metadata, enabling an immediate rendering of a small, blurry preview before the full-resolution image is downloaded to the client. This functionality supports efficient art direction and eliminates the need for storing multiple versions of an image. A detailed post on CSS-Tricks, complete with live code examples on Codepen, explains how to utilize this metadata effectively within Sanity.