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

Written by Knut Melvær

Missing Image!

When you upload images to Sanity there's a lot of stuff that happens behind the scene. We extract color palettes, dimensions and aspect ratios, and if you configure your schema, it will make available the EXIF data and geolocation of the image as well.

We also store a low-res version of your image in the metadata, so that you can render a tiny, blurry preview of it immediately. Then the actual image is downloaded to the client. This is useful for art direction and makes it possible for you to only store one full resolution version of your image, not having to worry about duplicates and so on.

We wrote a post on CSS-tricks about all this, with live code examples on Codepen, on how to use this metadata that’s applied to images in Sanity. We're pretty pleased with it!