I am designing a website which has a slideshow on its homepage, which automatically rotates through a few pictures. I want these slideshow images to have good resolution without unnecessarily increasing the load time.

Do I need to a worry that the more images in my slideshow, the longer it will take to first load the homepage? Or do these images load individually when the slide advances?

  • It seems you're in the perfect situation to figure this out on your own. Build one with and one without and let us know what you discover. Jan 31 '18 at 14:48
  • 1
    If you're using a 3rd-party component and are unsure when the images are being loaded, the developer tools in your browser will show all of the resources requested by the client, including when each file was requested, how long they took to download, the size of the files, etc... Jan 31 '18 at 15:41
  • @maxathousand thanks! This tool is just what I needed.
    – Doubt
    Feb 1 '18 at 2:02

That really depends how your slideshow is built. You can build it to work either way honestly.

If you are just grabbing a slideshow plugin off the web there might be options for this, but I would say (if I had to) most you will find will typically load all images on page load.


As already stated (by Jacobsen.Brady) it depends on how your slideshow is built and what purpose it serves.

For a purely instructional slide show where advertising revenue is not an essential part of the business model then you might load all the images upfront which will impact the initial page load time or you could load the images on demand which will affect the amount of time between slides.

If, however, we're talking about those clickbait slideshows that rely totally on advertising revenue then each slide is likely to have it's own page with it's own set of advertising to maximise ad views. This bring it's own set of loading issues that aren't really anything to do with the images but the amount of advertising on the page that comes from third of even fourth parties built using iframes inside iframes inside iframes and generating a huge number of HTTP requests to many different servers.

  • To address your second paragraph, I think a nice compromise could be struck—only load the next 1-2 images so that manually advancing is immediate, but you're not obligated to download all n slides, similar to how video providers only load a certain amount of buffer. Jan 31 '18 at 15:37

Not the answer you're looking for? Browse other questions tagged or ask your own question.