My website has a grid of images. Let's say there are 100 images in a 10x10 grid and each image is 50x50. I give the users the ability to scroll out so that this 500x500 grid becomes 20x20 grid at 25x25 resolution which is 400 photos or in which is 5x5 at 100x100 resolution for just 25 photos.
To be able to do this I must have all 400 images loaded from the get go. My issue comes down to how those images should be stored on the server. If I store all images at 100x100 then that could be say 4 megabytes of space. But if I store them at 50x50 that is only 1 megabytes of space but would be blurry at the higher resolution. Keep in mind that space is both the amount of data (and therefore time) to load a page and the amount of storage space required on the server.
My solution for this is to sacrifice server space by keeping multiple copies of the images stored at each resolution. When the page loads it takes 400 photos at the lowest resolution, 100 photos at the medium resolution and 25 photos at the highest resolution. Then when the user changes sizes it switches between which image it uses.
This is a simplistic example as ultimately I would like 5 (or more) levels of zoom and would be a lot more code. Just wondering if server storage is not an issue (if only) and I really wanted to push the efficiency of data usage (considering this site is aimed at mobile users), is this an acceptable solution? Or are there any other solutions which would be better or worth considering?
