How to (properly) save images for the web

High quality images, low file size!
< Back to blog
How to (properly) save images for the web

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

TinyPNG & TinyJPG banner
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.

Comparing compressed and uncompressed images from TinyPNG
Pre-compression and post-TinyPNG magic! Can you tell the difference?

So how can I use TinyPNG / TinyJPG?

  1. Analyse your website's performance,
  2. Purchase the Photoshop plugin,
  3. Drag and drop your images onto the free online compression tool,
  4. Go Pro and have unlimited uploads & analytics,
  5. Install TinyPNG on your website and let it do all the work for you!
TinyPNG website optimisation analyser tool
Looks like I've got some serious work to do!

Have you used TinyPNG or TinyJPG in the past? What have been your challenges with web images?

Let me know if I've missed anything in the comment below!

Thanks for stopping by,
Marshy

Thoughts? Leave me a comment below.

Tip: log in with your social media account to comment