CSS Preload images?

[Stoker 4.0]

Found this article: https://www.dhiwise.com/post/preload-im ... experience
Just wondering if its something we can use?

Code: Select all

/* Preloading CSS Background Images */
body::before {
  content: url("./images/morning_bg.png");
  content: url("./images/day_bg.png");
  content: url("./images/midday_bg.png");
  content: url("./images/afternoon_bg.png");
  content: url("./images/evening_bg.png");
  content: url("./images/goodnight_bg.png");
  display: none;
}

[cabot]

Hello,

It all depends on the context.
Are these images displayed when an element is hovered? (using a sprite would do the job)
Are they displayed regularly and randomly?
Are they heavy?

Preloading can be useful, but you need to bear in mind that you will be preloading all the images, and therefore consuming resources.

What's more, there are several ways of preloading images, so please take a look at this article.

I don't know if your request concerns the images displayed in the background of your header, but you can start by converting them to webp and compressing them with a tool like TinyPNG.

Original jpg (37.8 Ko):


Convert to webp (28.4 Ko):


Compressed webp (4.5 Ko):
The weight has become ridiculous and preloading would have no impact, or really imperceptible.

[Stoker 4.0]

So converting to compressed is a better choice.
And yes, its for the header images

[Stoker 4.0]

or AVIF

[cabot]

Yup

Edit: You've converted your images to webp, but you can also compress them with TinyPNG.
Depending on the number of colors, you can divide the final weight by 2, 3 or more.
Like the image in my last post. ^^