How to (properly) save images for the web

On the move? Listen to below

Optimise web images with a perfect balance in quality & file size

What's one of the biggest causes of website bloat, slow loading speeds and user frustration? Images.

But what would the internet be like if it weren't for images? Well it'd be super boring!

So how we can make the internet an interesting and fast place to surf?

Remember the good (read 'bad') old days of dial-up internet? Downloading any large image could take up over a minute to slowly appear, line by line. Not to mention the line dropping out halfway through if someone answered the phone... What a nightmare!

Thankfully things have drastically improved since then, but with all these improvements have come increased expectations and demand from users and designers. Therefore we still need to make sure we set solid rules around how we design and save our images for the net.

The technical stuff...

Actually... you know what, let's not get bogged down in the technical stuff.

But essentially, a web page loads content bit by bit. Generally, large pieces of content like big images / photos get served up last, and large images are going to take a long time to load.

If you’ve got a tonne of large images on your website, you’re adding an unnecessary amount of loading time for every picture and your users (not to mention Google) are gonna hate you for it.

What file formats should I use?

File format is super important. Your browsers can load JPG, PNG, SVG and GIF images pretty quickly because they're small in size and are compressed formats. But uncompressed formats like TIFF, Photoshop PSD and BMP are going to ruin your loading time... As a rule of thumb, don't upload these guys on your website!

But does file format go far enough...?

Go further than just file format

Waving TinyPNG panda mascot — Pandas are awesome, but the TinyPNG mascot is the real MVP.

Enter TinyPNG (AKA TinyJPG).

If this is the first time you're hearing of about TinyPNG, then you're in for a treat!

Ok, so what does TinyPNG do?

Well, TinyPNG uses a smart lossy compression algorithm / technique thingy to reduce the file size of your PNG (or JPEG) files. (I'm not going to pretend to fully understand how it works)

What I do understand is that it selectively reduces the number of colours in an image, which therefore means your image will store fewer bytes data. Incredibly, the end result is basically imperceivable to the eye but will save you a huge amount in file size!

The image I used in the header of this blog post, for example, was originally 0.7 megabytes BUT after TinyPNG-ing it came down to a measly 0.1 mb!

My personal rule is I always aim for an image size under 0.5 mb.