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 remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for free Explore the demo

Platform

Features

Use cases

Integrations

Learn

Build and share

Frameworks

Discover

Case studies

Popular guides

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

Sanity– build remarkable experiences at scale

Was this answer helpful?