how to first load an image in webpage

Question

i have a question to ask you. So I have on my webpage a showcase that has some images that keep playing. I used JCarousel to build it. The thing is that when i first enter on the page i can't see the image or I see only a part of it. I suspect that this is because the site a few seconds while it loads all the images it has.
My question is: how can I make certain images be the first ones to be loaded? Or how can I prioritise the way the images load on the page? By the way I'm doing this in html,php using javascript and ajax and the images are taken from a database.
Thank you very much!

Answer 1

If you Base64 encode them, you can put them in the CSS, or HTML. It will really increase the side of a page, so perhaps encode a low resolution picture, and then replace it with highres when it loads. That is, a preview image.

Try this tool/guide .