Beit Pablo

Uncovering the Past

Gallery 3

photo
photo
photo
photo
photo
photo
photo
photo
photo
photo
photo

This page features not only lazy loading but also responsive image sets.

For example on an iPhone 6 with a screen size of 375px wide by 667px tall, only the smallest version of the first three gallery images are loaded for an initial page size of 302k.

On a iPad tablet with a screen size of 768 wide and 1024 tall, only the largest version of the first three gallery images are loaded for an initial page size of 956k. You may well ask why it is loading 3 gallery images when only two are showing above the fold. Well let's talk about that. The browser calculates how many images will be needed by the predicted height of each one. The css tells the browser that the minimum height of the images is 320px so if you have 220px for the header, that leaves 804px for the images. If you divide that by 320px min-height (medium.scss) you get 2.51 so the browser rounds up and loads 3 images.