Simple Tips Which Will Drastically Improve The Speed of your website-Part 1: Image Optimisation

haks Hinds
Jun 26 · 4 min read

Let’s not waste time; there are three main ways in which the speed of your website can be impacted, namely:

— The client Side

— Network Latency

— Backend

Client Side

We are going to start here. For the client side we can look at many ways to improve speed, but 90% of optimisation will fall under three key categories:

  1. Critical render path
  2. Optimise Code
  3. Progressive Web App

Today we will start looking at the critical render path.

Critical — Means things which are absolutely needed

Render — What is displayed or shown to a user

Path — The chain of events that need to be followed for our page to be displayed in the browser

One of the easiest ways to get a huge speed increase is image optimisation. Let’s take a look at some simple changes we can make to drastically improve the speed of our website. This falls under the Render category.

Image Optimisation

  • To display a webpage, our computer or device has to download all the files it needs to render the page from the server
  • The more KB it has to download, the longer it will take to load the website

Step 1. Minimise images…

The main way to change an image’s size is to change the file format. So we initially want to ensure we are using the most appropriate format for the job at hand.

JPG — Photos, images, many colours, no transparent background, (usually)large

GIF — Limited colours (size savings but grainy), but still widely acceptable in the current world

PNG — Usually limits the colours you can use and tend to be smaller than JPGs because of that, can add transparency

SVG — Vector graphics, used for images that need to scale esp. for print, can be customised with CSS

We want to compress the size as much as possible without compromising quality.

Once you have chosen the right format, you can move onto step 2..

Step 2. Reduce the file size…

To reduce the file size of this JPG we can use a tool such as http://jpeg-optimizer.com/. On this site we can do all of the following in one simple step:

  1. Choose file
  2. Compress Image
  3. Resize Photo

Woah! From 2.5mb down to 20kb! Thats over a 99% saving! But lets not stop there. Let’s go to step 3…

Step 3. Duplicate and change image quality…

This is so simple your grandma could do it! We are going to do the following

  1. Duplicate the new file
  2. Save it with a new size

Thats it, just two steps. Open the new file and hit duplicate

This will give you a cool new version of the image to manipulate. Next thing to do is to save the new image and change the quality.

We can get away with huge savings in file size without actually discernibly impacting the user experience in a negative way.

Step 3. Use Media queries to display different images for different screen sizes…

Why would we send the same image that can be perfect on a 60 inch 4K screen to a tiny iPhone which only has a small screen size. The browser is smart enough to only load the images we want based on break-points, if we tell it what those break points are.

So the default body background is blue. But we have given instructions that if the screen size is under 500px, only show our small image, and if it is above 900px, only show our large image. Neither will download unless its own breakpoint is hit.

This covers the main points we want to address when it comes to image optimisation and we can find huge savings when it comes to website speed just by implementing the changes we have discussed. However there are many more things which we can cover, which we will in the next post.