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.
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.
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.
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.
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.
The easy way to add social media link previews to a serverless web app.
Devon (UK) is always a great place for photography in the summer; these were taken on the southern coast, close to Exeter.
These photos were taken on a recent holiday to India.