How can I efficiently load images on a website [closed]

I have a website where users can upload products with images and other users can search for them on a search page. My search page currently have 50 products per page (and some ads in between) and each of these product cards have an image on it.

First I tried to put the image src straight into HTML like you usually do:

<img src="my_image.jpg">

This made the search page load slowly before showing any content (I hide the content and show a spinner until body is loaded).

Then I tried to put the source as a placeholder attribute, which on document load then was switched to the src attribute in JS to reveal the image:

<img placeholder-src="my_image.jpg">

$(document).ready(function() {
    $('[placeholder-src]').each(function() {
        var imageSource = $(this).attr('placeholder-src');
        $(this).attr('src', imageSource);
    }); 
});

This made the page itself load almost instantly but with no images. And then you could see the images load from top to bottom slowly, around the same time it took before to load them I guess (but now you could see when they loaded).

What I have done so far

I tried to speed up images by:

• Limit the size of the images that users can upload. They will now before upload compress to a max height or width of 550px since I never show it in larger formats on my site. Still the largest images are around 1Mb in size.
• I was thinking of saving them in an even smaller format to show as thumbnails on my search page. They could then have a max width/height of 300px and should load almost double speed (?). However, this will increase my image storage by 50% which is not good since I will have LOTS of images.

Question

What is the best way to load images on a webpage to improve the experience and make the site load faster?