All your code does is generates HTML that is sent back to the browser. The URL in ImageUrl of the image object is just the src attribute of the image tag.
<img src="imageUrl" />
So you have to look at this in 3 views
1. How long does it take to generate the HTML or run the program.
2. How large is the HTML block that is being sent back to the browser
3. How long does the browser take to populate the image url's to complete the page request.
1. If it takes a long time to generate the code, you have to optimize the code to run faster.
2. If the HTML being sent back to the browser is too large, and takes a long time, you have to write more efficient or compact HTML to reduce the size.
3. If the browser takes forever to download each image, then you need to make the images smaller in file size.
3A. To reduce the image file size, you compress the image using the JPEG format, and select a lower quality, or make the image size smaller. If your using PNG at 24, then the images will be huge in file size.
3B. You can also show less images in the HTML, let's say 10 per page, and build an index system to take the current page and chop it up into 10 pages.
3C. Sometimes it's a matter of perception. You change the display of your interface to make it more interactive, in which you show a thumbnail of the image, and you have to click to see the large version. Not everybody wants to see every image, so they can choose.
Finally
It's called lazyload, a J Query plugin, that will use the browsers window position, to determine when to download the images. So when the windows area becomes visible, the image downloads.
Personally, it's just comes from experience in GUI and program designs, in which you create programs that satisfy the users perception of speed.
Submit an article or tip