I'm designing a hero page that features over 20 full-screen images. Should I use preload for all of them, or is lazy loading a better option? Additionally, does the method I use, like CSS or JavaScript, affect the outcome?
4 Answers
With so many images, it's definitely a challenge. Generally, I recommend preloading the images that are above the fold while lazy loading the rest. This way, users see something immediately without waiting too long.
I'd be cautious about the need for 20+ full-screen images in the first place. For performance, lazy load the images and let the browser manage them. It might also help to consider smaller sizes or thumbnails to improve load times.
I always lean towards lazy loading, especially with that many images. Users generally dislike waiting long for pages to load. Plus, lazy loading helps improve the overall user experience by prioritizing visible content.
Definitely use native lazy loading with HTML attributes like srcset. It's simple to implement and really helps with efficiency without needing complex scripts.
How would you suggest balancing quality and load times for those images?