How fashion choices can affect a website's loading time

Next time you're choosing office imagery for your website, ask your colleagues to put away their herringbone patterned shirt.

15 September 2019

Not too long ago, I was working on a website that happened to have some sub-optimal loading times on a particular page. This page was a company profile page which happened to have a head and shoulders picture of all 50 of their employees; and on average, each image weighed about 200kb.

50 x 200kb = 😱

I fired up Photoshop and bulk exported new versions of these images at a lower JPG quality (50-60%) and managed to get most images down to around 40kb. However I noticed that there were a few images that I couldn’t drag below 100kb, unless I set the quality down to 10% resulting in a pixelly mess.

It’s all in the detail

Have a look at these two images below, the left shirt of which I am ashamed to admit that I own.

Which one of these 2 images do you think will result in a larger exported file size? The checked shirt. The JPG export attempts to capture all the detail in the clothing of some of those aforementioned employee profile pictures, thus significantly increasing their file size.

The fix

With a bit of experimentation, I found that I could use Lightroom to blur the offending item of clothing enough to not make it very noticeable, but also take the edge off the detail which brings down the file size. Take this image below of me pretending to read a book which weighs approximately 150kb.

An industrial estate local to me. Not sure why the lights were on at 9pm though.

Using the Brush Tool, with a brush radius of 12-15px, draw an area over the detailed area and then start to decrease the value of the sharpness slider until you are happy with the result.

An industrial estate local to me. Not sure why the lights were on at 9pm though.

Final result

As you can see below, we haven’t lost too much from the original image, yet managed to bring the file size down from 150kb to 80kb.

Recent posts

Adding Opengraph to your single page app

The easy way to add social media link previews to a serverless web app.

Photo Series: Dreamstate

Devon (UK) is always a great place for photography in the summer; these were taken on the southern coast, close to Exeter.

Photo Series: Indian Nights

These photos were taken on a recent holiday to India.