How to Preload a Performant and Responsive Image Gallery

September 02, 2016 0 Comments responsive, css, javascript, by

There are many ways to preload images, some are more appropriate than others. The ideal way really depends on your use case. Common ways to load these resources use CSS and JS. Loading background images in CSS is alright, but we don't know exactly when these images will be ready. Loading images in JS is fine, but isn't the most performant thing I can do. This is even more so, when I consider serving responsive images for art direction, at varying pixel densities.

Solution

This example uses preload to have the browser prefetch the resources. This will keep the resources in the browser cache. This should be similar to requesting the images with JS but could be faster because we're letting the browser handle this natively.

<link rel="preload">  

Responsive

Another requirement will be to use the picture element with srcset. Here we will tell the browser where our images live and use size to set the size of the image in the viewport. For better browser support we may consider image-set.

References:


Tag cloud