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.
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.
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