Morr Homes & Projects are a successful building company based in the Mid North Coast. They wanted a website to showcase some of the impressive projects that they have built, as well as provide a central place to find out more about the company.
As such the site has a strong focus on photography. By using a minimal colour palette with lots of whitespace, the images on the website really pop.
The problem with image-heavy websites is twofold:
Lots of images on the page = slow load times
Images are typically the largest asset on a website, so downloading lots of them can make load times slow — which is not something we want.
Fortunately the web framework we use (Gatsby) comes with a plugin to optimise our images for us and it comes with a ton of benefits;
It generates multiple versions of each image and the users browser will load whichever size is closest to the width of the screen. Saving on bandwidth and making the page faster to load.
It also adds an Intersection Observer to these images. This is just a fancy (and performant) way for the browser to detect if the image should be on the screen or not. If the user has to scroll down the page to view an image, we don’t download the image until the image is almost about to enter the screen.
It generates a tiny blurred version of the image that can be downloaded almost instantly. This takes up the same amount of space as the higher resolution image, preventing layout shift (the page jumping around as images and other content load) and hinting to the user that the image is still loading and what it will look like when it’s finished.
Generating lots of images = slow build times
In order for Gatsby’s image component to show all these different sized versions of each image, we have to generate them at build time.
When there are hundreds of images to be processed, this results in thousands of variants which can take quite a while to build. As we added more projects to the site we knew we had to address this.
Thankfully around this time we started experimenting with Sanity — a headless CMS. We were able to have Gatsby source the data for the project pages from Sanity. This made adding new projects and updating existing ones much simpler, but Sanity’s CDN is also compatible with the Gatsby image component, so generating optimised images is done on Sanity’s servers, and the results are cached dramatically improving the site’s build times (they are now less than half of what they used to be!)