Image optimisation – A railway thought

As I’m riding home, on the train, mile by mile chugging along, I thought about something. Something I’m pretty sure every commuter ponders at least once on every journey.

Couldn’t we just go faster?

Being the geek I am, I wanted to apply this to Web Development and the medium of media distribution as a whole. Why don’t we just go faster?

Let’s start with image optimisation, this is a must, surely people still get it right in this day and age with all the plugins, automation and commonplace of editing suites. Well you’d be wrong.

There’s a lack of answering the simple questions whenever I see this talk about image optimisation. If I’m going to upload an image to my website, what’s a reasonable file size? 100kb, 300kb, 1mb. Let me answer your question. Forget the sizing, and start thinking about the purpose. If you’re trying to run an e-commerce site, you want to get the balance where the image is small enough so that your page has low load times, whilst maintaining a level of visual quality throughout.

Take this article, that I’m going to quote here, but take it anecdotally because I have neither the time nor the patience to fact check it.

Google increased the number of search results to thirty. Traffic and revenue from Google searchers in the experimental group dropped by 20%.

 

The page with 10 results took .4 seconds to generate. The page with 30 results took .9 seconds.

Do I believe this was the case? Yes. Why do I believe it? Because A) how many times have you clicked on more than the first 3 search results, unless you were looking for your own website, or your own name, you vain nerds out there. B) As we progress towards a more and more optimised web, we’re making those milliseconds count.

Especially Amazon, as they found out for every 100ms of latency, they dropped 1% in sales. That could be 1% off of a brand new Sofa, or a pair of sneakers that cost way too much. Why risk that 1%?

Ok, so you’ve read the doom and gloom, what can you do about it? Well first of all, let me tell you about this incredibly talented and handsome company based in Nottingham called Roboto.Studio (seriously call us). All jokes aside, there’s a whole bunch of plugins that can do this if you have a WordPress site. I’m especially impressed with ImSanity, despite having possibly the worst branding job I’ve ever seen for a plugin. If you’re just using photoshop, consider save for web to be your friend. One of the most common issues I run across is, why scale the image to 4k resolution?

Keep it roughly 1920×1080 max, nobody is going to spend the time to load your page, to see your image you only optimised for Mac super high-res retina screens.