I'm working on a webpage that loads hundreds of small images and I'm looking for ways to speed up the load time, especially for users with slower connections. I've tried lazy loading and using interlacing techniques, but it's still not fast enough for my liking. I want first-time users to see all images as quickly as possible. I considered using a sprite sheet and drawing the image onto a canvas to pass it to an image element as a data URL, but I'm unsure if this would actually improve performance, given the size of the sprite sheet and initial download time. Additionally, I'm currently hard-coding all elements in HTML, thinking it would help speed up loading. Should I switch to dynamically creating these elements to improve performance?
1 Answer
To help speed things up, you should consider using smaller thumbnails for your images. Load the full-size images only when a user clicks to view more details. Also, try using the WebP format and compress your images using TinyPng to significantly reduce their size. This combo could really optimize loading for slower connections.
I tried that approach, but the current code setup makes it tricky to switch images without breaking the script. I didn’t consider WebP yet, though—thanks for that tip!