Squoosh - optimising image sizes for performant web apps

What can we do when the project requires huge graphics files but they’re breaking everyone’s browser?

One of the biggest challenges we faced in the creation of the Myths Map was transitioning the style and detail of Clive’s hand-drawn creations into a digital environment.

We had originally intended to build the map in 5 layers and then compress into a single image - starting with the foundation of the sea and land textures, followed by landscape elements, then settlements, POI’s and finally animations. Clive would provide his drawings and Matt would prepare them e.g. colouring, cutting out. I would create a brush pack from the digitised drawings and build the layout. Think one big digital collage.

This was so we could make changes relatively easily during the creative process, whether that be swapping out something that wasn’t working as expected or alter the topography of the landscape to better accommodate the Heritage sites and animated elements.

In order to retain the detail of the artwork, the sheer size of digitised versions and the quantity made it near impossible to work with (both from a development perspective and overly stretched design software). We knew we weren’t prepared to compromise on the quality, as the map is first and foremost an experience.

However, how on earth were these going to render on the average user’s phone or computer if our spec’d out kit couldn’t cope?

This is when we discovered Squoosh.app

Squoosh managed to tick both the development box - make everything as small as possible to have minimum impact on load time, and the design one - keep it looking pretty.

There are a number of options on compression standards including MozJPEG, OptiPNG, Google’s own WebP - whilst you can also create your own custom compression.

You can view your image with a side-by-side comparison tool allowing you to simply adjust various compression settings so you can tweak your way to the optimum file size / image quality balance that suits.

We were able to slice up the canvas into tiles and squoosh these individually to reduce the canvas size further than if we were to do it as one whole image. The tiling also enabled individual sections of the map canvas to be lazy loaded in separately.

James talks in more detail about the technical challenges of the project and how we overcame them in an upcoming article.

Squoosh saved the day and we’re very pleased with the end result. Check out the live map here.