How to Preload an Image With the link rel="preload" as="image"

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...

Mar 10, 2021, 8:57 AM

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

<head>

instead

Mar 10, 2021, 9:35 AM

Thank you

user F

Mar 10, 2021, 10:39 AM

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

How to Preload an Image With the link rel="preload" as="image"

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

Was this answer helpful?