I am trying to find the best way to load many (say 100) images onto a web page. Some images are large background images for a parallax effect, others are images on cubes (so all sides of the cubes made from divs); What I am wanting to know is what is the best approach, so far I have a few idea:
method A 1 lazy load all the images and background images when they appear. 2 use a sprite sheet for the smaller images. 3 compress all images for best compression, use Gzip.
method B (experimental) 1 create a separate style sheet with variables for each image converted to base64 (ex :root{--boxImage1:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABA.....) 2 create a service worker for the css as it would become rather large 3 use compression to min the css file. 4 use gzip to transfer from server.
Method c store the images as binary on a database (I worry this would actually make them slower as it would be searching the database rather than the file system).
are any of these methods worth doing or is there a way simpler way that I should use ?
I'm currently working on PWA with a lot of user uploaded images, and I can confidently say that using your method A did wonders for our app load time.
Compressing images on upload and converting them to base64 strings drastically reduces their size, and combined with lazy load of 5 images at a time, app is much faster.
Since you have service worker tag in your question, I would also recommend precaching at least the initial batch of images for even faster load speed of your homepage.