HELP: Prevent images from flickering when they load in?

[KittyTheKat]

Recently there have been a few situations with my site where images 'flicker' out when the site loads them in. Right now it's visible with the background of my main pages, which is surprising to me given that it's a small image that's just tiled. Any ideas on how to fix this? Preloading it as a hidden image doesn't seem to help.
Edit: It's most noticeable when switching between my main page and my badges page which makes me think it may have to do with how many images it has to pull.

[starbreaker]

If you can, it might be helpful to specify the width and height in pixels of your images when you create your <img> tags. For example, this is what you've got so far:

Code

<img src="https://kittythekat.neocities.org/images/moomin.jpg">

If you did this instead:

Code

<img src="https://kittythekat.neocities.org/images/moomin.jpg" width="540" height="447" alt="a moomin comic panel" loading="lazy">

The browser would know to allocate a space 540 pixels wide and 447 pixels high for this image before it's finished downloading. In addition, specifying "alt" text lets the browser display an image description if the image isn't available for whatever reason, and also makes your site more accessible to people who need to use screen readers. Finally, setting the image to lazy load means that the browser won't wait for the image to load, but only load the image when the user scrolls down far enough for it to be needed. This can help performance if your page has a lot of images.

Hope this helps.

[KittyTheKat]

@starbreaker All very helpful notes, thank you!

[starbreaker]

You

@starbreaker All very helpful notes, thank you!

You're welcome. Glad I could help.