1

I have created a basic html website that has a gallery with images. It stores them according to month taken. The page loads quite slow with all the images, is there a better way to store the images for them to load faster?

Thanks

Sean
  • 6,873
  • 4
  • 21
  • 46
Timothy Goodes
  • 67
  • 3
  • 13

2 Answers2

5

Load them progressively (lazily) through javascript and even better create thumbnails and load the thumbnails progressively with javascript loading.

Then load the full image only when clicking a thumbnail.

Furthermore divide the images into groups / pages so only a few images are loaded / displayed during each page request.

Furthermore make your webserver cache images for a certain time so the browser does not have to refetch them every time they are re-requested

The aboce will reduce the page load time dramaticaly

PS and yes, unless necessary dont store images in database but in disk folders, so that only the url of an image is needed to load an image instead of the whole image in data-encoded form (in case you dont do this already)

UPDATE: check The complete guide to lazy loading of images, for modern browers and modern web apps

Nikos M.
  • 8,033
  • 4
  • 36
  • 43
3

This is not a programming question. However to guide you in the right direction you could look at optimizing your images to reduce the file size yet keep good image quality. This will help to speed up page load times. There are plenty of online tools that you can use to optimise your images such as https://tinypng.com/ and https://tinyjpg.com/

fionaredmond
  • 639
  • 7
  • 15