Preloading hero image from Sanity before page content renders

2 replies

Last updated: Mar 10, 2021

Hello! Does anyone know a way to preload an image with the <link rel="preload" as="image" ...> ? I would like to preload my hero image, which is defined in Sanity for a FrontPage page type, but I'm not sure how I would get it before all other content.
I'm using
angular and the .NET client library. Also I'm using responsive images with the <picture> element...

AI Update

Great question! Preloading hero images from Sanity with responsive <picture> elements is definitely doable, though it requires building the image URLs manually since you need them before your main content loads.

Since you're using the .NET client library and Angular, here's the approach:

Building Image URLs in .NET/C#

While there isn't an official Sanity image URL builder for .NET (the .NET LINQ client focuses on queries and mutations), you can construct Sanity image URLs manually since they follow a predictable pattern:

https://cdn.sanity.io/images/[project-id]/[dataset]/[asset-id]-[width]x[height].[format]?[parameters]

For example, to get a 1200px wide WebP image with automatic format selection:

https://cdn.sanity.io/images/your-project/production/abc123-2000x1500.jpg?w=1200&auto=format

Preloading with Responsive Images

For your <link rel="preload"> with <picture> elements, you'll want to generate multiple URLs for different screen sizes. Here's the HTML structure you're aiming for:

<link rel="preload" 
      as="image" 
      href="https://cdn.sanity.io/images/.../image-id.jpg?w=1920&auto=format"
      imagesrcset="
        https://cdn.sanity.io/images/.../image-id.jpg?w=640&auto=format 640w,
        https://cdn.sanity.io/images/.../image-id.jpg?w=1024&auto=format 1024w,
        https://cdn.sanity.io/images/.../image-id.jpg?w=1920&auto=format 1920w"
      imagesizes="100vw">

Implementation Strategy

Fetch the hero image reference first: Make a minimal GROQ query to get just the front page hero image data:
```
*[_type == "frontPage"][0]{ "heroImage": heroImage.asset->_id }
```
Build URLs in C#: Parse the asset ID and construct URLs with different widths and the auto=format parameter (which serves WebP/AVIF to supporting browsers)
Inject in page head: Add the preload link tags to your page <head> before the main content

Key URL Parameters

The most useful Sanity CDN parameters for responsive images:

w= - width in pixels
h= - height in pixels
auto=format - automatically serves WebP/AVIF to supporting browsers
q= - quality (default 75)
fit= - fit mode (clip, crop, fill, etc.)

Alternative: fetchpriority

As an alternative to preload, you could also use the newer fetchpriority="high" attribute directly on your <img> tag, which is simpler and doesn't require building URLs twice:

<img src="..." fetchpriority="high" loading="eager" />

This tells the browser to prioritize fetching this image without needing a separate preload link.

Hope this helps! The manual URL construction is straightforward once you understand the pattern, and Sanity's CDN handles all the heavy lifting with caching and format optimization.

Show original thread

2 replies

https://github.com/w3c/preload/issues/131
^ Not really possible for responsive image. Look into removing blocking elements in

<head>

instead

Thank you

user F

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for free Explore the demo