I have 9 images on a page. 3 images per row.
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.