Go back
3 min read

Image preloading: it is not all straightforward 🖼

Eight ways to control image loading: fetchpriority, preload, responsive images and common workarounds.

Image preloading: it is not all straightforward 🖼

I came across a good breakdown of ways to tell the browser “this image is important.”

A quick rundown of the options:

1. A regular <img />
The browser decides the priority itself. Often, it does a good enough job.

2. The loading="lazy" attribute
Defers loading.
Good for anything below the initial viewport.
Bad if you accidentally put it on the hero image → you will slow down LCP.

3. The fetchpriority="high" attribute, the most practical option
Gives an explicit priority signal:

<img src="/hero.jpg" fetchpriority="high" alt="" />

👉 In most cases, the best solution for LCP images.
No unnecessary magic or duplicate loads.

4. A <link rel="preload" as="image"> tag in <head />
Forces loading to start early:

<link rel="preload" as="image" href="/hero.jpg" />

But:

  • it is easy to trigger a double download
  • you can clog the network and break priorities
  • it requires care with types, imagesrcset and sizes

👉 Use it selectively.

For responsive images, use the rel="preload", imagesrcset and imagesizes attributes.

<link
  rel="preload"
  as="image"
  imagesrcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
  imagesizes="100vw"
/>

👉 Otherwise, the browser might download the wrong size.

5. A hidden <img /> or display: none

<div style="display:none">
  <img src="/hero.jpg" alt="" />
</div>

👉 The browser will still start loading it.
But this is more of a workaround: the priority is unclear, and readability suffers.

6. background-image in CSS

.hero {
  background-image: url("/hero.jpg");
}

👉 Here is the catch:
the browser discovers this image only after parsing CSS,
so it often loads later than an <img />.

7. Background + preload hacks / hidden elements
Things like preloading a background through <link /> or slipping in an invisible <img />.

👉 All of this works, but it looks like working around limitations rather than taking the proper route.

8. JS through new Image()

const img = new Image();
img.src = "/hero.jpg";

👉 An old approach that does not work as well with the browser’s priorities.

———

The article’s main takeaway:

  • there are many ways to “force” the browser to load an image earlier
  • but most are workarounds or solutions for edge cases

👉 In practice:

  • for a hero image → fetchpriority="high"
  • for a background → preload is sometimes justified
  • everything else → only if you understand the consequences

TL;DR:
There is no need to invent elaborate schemes with hidden divs and hacks. In 90% of cases, there is a simpler, native way.

Read the article

Copied