After all the images have been downloaded, I start scrolling from the top of my page to the bottom.
As soon as I reach the beginning / top of a image, a lag arises.
When I reach the bottom of the page, I scroll back to the top, then there are no problems (I guess the browser has already done its thing at the first meeting with the images.)
But what is it that the browser does (maybe reduces / adjusts the dimensions?), And why does it not do this before reaching the images?
When lag occurs, I have total 9 images on the page in the sizes 300 - 900kb.
If I change the sizes to 50 - 100 kb, no lag occurs.
Still a mystery why the browser does not do what it needs to do with the images before reaching them.
What is happening, what options do I have and what can I do to avoid lag without resizing the images.
As @Gandalf said above you need the height and width attributes in the image tag itself for the browser to reserve the correct space while it downloads the image.
It doesn’t matter that you resize the image in css later but you need the original height and width attributes in the image tag itself.
I checked the link you PM’d me and on mobile and on desktop (in Chrome) the images load on page load for me as per normal. I don’t need to scroll to start the download of the image.
However the images are a very large size. This image is 950k (approx) and you never show it larger than about 450px x 450px (approx). I would be looking at about 90k for an image that size rather than 950k. Run your images trough your paint package and optimise them right down. (There are online services if you don’t have the necessary tools.)
If you open the network panel on your devtools you can see the images being loaded while you look at it. I have a very slow connection as I am away at the moment and it took ages for the page to load.
I don’t see anything else apart from the missing attributes already mentioned which will fix the layout re-positioning as images load.
There is no lazy load. They are all downloaded immediately. But even after all the pictures have been downloaded (and everythings is ready), it lags on my laptop when I scroll over the pictures. I dont have the same problem on my desktop.
The size thing is not the problem. Regardless of whether the browser has to change the sizes of the images, the browser should not wait to do so until it reaches the images. If everything has been downloaded and there is nothing else to do for the browser, why sit and wait when there is work that can be done?
It’s probably that the laptop is struggling to resize those large images to their current size. A browser has to repaint when scrolled and you have images a couple of thousand pixels wide that need to be resized down to about 450 px max.
Read the section on scroll lag here.
Obviously some browsers and some devices are better at this.
I would suggest that you resize your images down to a native 500px approx width in your paint package (or look at an online service to do this).
On my desktop with a very slow connection the site was more or less unusable. I also saw no evidence of the height and width attributes being added to the html (unless I looked at a cached version of course. I will recheck when I get back home). You
How can you be so sure? If you serve images that are bigger than needed they will take longer to download and, as @PaulOB says, the browser will have to resize them.
And even if it’s not the problem, it’s still a problem.
