Images can delay your overall page load experience due to image numbers and their size. There are different strategies for optimizing image delivery. The first one you should consider is lazy loading images below the fold.
This could be a very tricky technique to execute. Modern APIs can help you, the IntersectionObserver (https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) API in particular gives you the ability to detect when elements are entering the viewport. You can designate the distance and time estimated threshold for an element to appear.
The IntersectionObserver API will trigger an event to let you know when an element is about to be displayed. At this point, you can initiate an image download if necessary. This means that your pages images will not be loaded in the initial render process, but be loaded as needed. This can...