You're developing a website for an art gallery, which will showcase high-quality images of artworks. How would you manage the loading of high-resolution images without compromising the user experience, especially considering users with slower internet connections?
Difficulty level
Load all images in their full resolution as the page loads.
Only load high-resolution images when the user scrolls to them (lazy loading).
Use a single, low-resolution image for all artworks.
Use thumbnails that expand to full resolution when clicked.
Lazy loading is a technique where images or other assets (like videos) only load when they enter (or are about to enter) the viewport. This means users only download what they view, leading to quicker initial page load times, reducing the initial payload for users, especially beneficial for those on slower connections. Thumbnails can also be beneficial but might require additional user action to view the high-res version.